推しアイデア
うんとこしょ、どっこいしょ。この掛け声がゲームに!
うんとこしょ、どっこいしょ。この掛け声がゲームに!
うんとこしょ、どっこいしょ、これだけ Three.js使ってみたかった
Next.js + Tree.js で 3Dモデルを使った「かわいい」Web UI のゲーム画面
みんなで『おおきなかぶ』を引っ張って抜くゲーム。
プレイヤーは自分のスマホで、画面をスライドしてカブを引っ張ります。 大きく引くほどカブに大きな力を加えられ、貢献度が上がります。
ただし、カブが抜ける瞬間にまだ引っ張っていると、勢いで転んでしまいます。転んだ人は負けです。
勝つためにはできるだけ長く・強く引っ張って貢献しつつ、カブが抜ける直前にうまく手を離す必要があります。
カブが抜けそうになると様々な兆候が現れるため、上手に見極めましょう!
最終的にカブが抜けたときに転ばずに立っていた人の中で、最も貢献度が高い人が勝ちです。
Vercel 上で Next.ts、3Dモデルは Cloudflare R2、wsの通信サーバーはGCP VM上で GOのchiが動いています。

開発環境はMakefileを用いて、初期セッティングやサーバーの起動、デプロイ部分を簡略化しています。
3Dモデルは自作のローポリモデル。全部合わせても5MBもありません。普通に作ると軽く50MBは超える容量になるのですが、少ない頂点数でも違和感がないように工夫することで軽いモデルでの作成を行いました(結果用意したcloudflare要らない子説がでてインフラ担当は複雑な気持ちでした)。

おじいちゃん(開発名称:じじい)
犬(開発名称:熊)
カブが埋まる穴
トーラスで大まかな大きさをとって、ジオメトリーノードで頂点座標をずらすことで土の盛り上がりを表現しています。地味ですが、3dモデル担当の一番の推し技術です。
今回バックエンド側が寂しい構成なので、どこか無理やりにでも認証をつっこみたいという思いで入れた認証です。 wsを確立した後にtokenのやり取りをトンネル内で行うことで、なりすましを予防する仕組みです。
本ゲームはオフラインの場で楽しむことがメインになるので基本は不要ですが入れました。
