Streamerio

推しの配信者やVTuberを見てるだけで満足!?いっそのことゲームでいじめちゃおうよ!! え？推しをいじめたくない？だったら守ってあげてよ！

操作説明

1. 配信者は画面を操作し、ゲームを始めます
2. QRコードが発行されるので視聴者はそれを読み取り視聴者用Webアプリへ移ります。
3. 配信者は直感的なUIに従い、前進しゴールを目指します
   • 攻撃ボタンから弱い攻撃ができます。
   • ジャンプボタンからジャンプができます。
4. 視聴者は視聴者用Webアプリから弱い〜強いまでの支援と妨害ができます。
   • この妨害は押したらすぐ反映されるわけではなく、視聴者数によって回数が決められるので全員が押した回数がその数を超えるとイベントが起こるというシステムになります。
5. ゲームがクリアしたタイミングで視聴者に統計画面が出現します。
   • 視聴者に関しては画面がでない場合、どれでも問題ないので支援ボタンを押してください

ex. 音量設定もできます UIもこだわりました！！！！！

使用技術の話

ゲーム部分: Unity バックエンド: Go フロントエンド: Next.js データベース: PostgreSQL, Redis

デプロイ先 ・Unity → unityroom ・Go → Cloud Run ・Next.js → Vercel ・PostgreSQL → Supabase ・Redis → Upstash

システムのはなし

↓簡単なシステム構成(全部デプロイしました！)

配信者と視聴者という構図で視聴者側はボタンをたくさん押すことができるという要件から最初からスケーリングが行える構成にしようと考え設計を始めました。 ただやはり知識に限界があったので、GPT-5と最初はコストを抑えた最小の構成で、今後は拡張していくことを相談して構成を決めていきました。
下が話してた会話です。 https://chatgpt.com/share/68ce1f99-5d10-8006-b7b1-633be4c3248f

Redisは今回全員初めてという中選びました。 今回は全視聴者のリクエストの数が一定値に達するとUnityにイベントを送るという構成でした。 ただ、今後、サーバーの数を増やすなどを想定すると、状態をサーバー側が保持するわけにはいかない、ただ普通にデータベースに保存するなど考えるとI/Oあたりで不安が残るということで入れた感じになります。 かなりの不安要素でしたが、デプロイまで進むことができました。 また，今回の要件ではunity側とバックエンド側で双方向に通信がしたいものだったので，WebSocketを採用しました．よく使っているHTTPでの通信とは一味違った難しさがあり，戸惑いながらも何とか実装しました．

Unityではステージの自動生成を実装し切ることができました． 短いステージをprefabとして作り，それらをランダムな順番で生成することで実現できました． ステージをプレイヤーの位置によって生成することでシームレスに繋がっているように見えるようにしたり，prefabごとに高さに違いがあっても高さを合わせて生成することで崖ができないようにしたりと，細かなこだわりも満載です．