FishRumble!!

概要

スマホをコントローラーとして使用するマルチプレイヤーカヤックゲーム。

3人1チームの釣りバトル(物理)！スマホを振って操作しよう！

ゲームプレイ

QRコードでスマホをUnityクライアントに接続
釣りで魚を釣る
釣った魚を振り回して相手チームにぶつける
相手チームのHPを0にしたら勝ち

FishRumble!! デモ動画

チーム構成と役割

ゲームモード

single: 1チーム3人
versus: 2チーム3vs3

背景

Unityゲームを作るために集まったチームなのでゴリゴリUnity技術を用いています。また、スマホをコントローラーにしてみんなで遊べるゲームを作りたかったのでこのようなゲームになりました。

技術スタック

デプロイ先：Render（コントローラーアプリ＋中継サーバー）ちゃんとCIを回しながら開発！

アーキテクチャ

通信方式: Socket.IOによる双方向リアルタイム通信
リアルタイム通信: Socket.IO 4.8.3
ルーム管理: サーバーがインメモリで管理、ホスト切断時に自動削除

通信フロー

推し技術・推しポイント

Next.js カスタムサーバー構成

Next.jsのデフォルトサーバーではWebSocketが使えないため、http.Server + Socket.IOを統合したカスタムサーバーを構築しました。これによりサーバー1つだけでUI配信 + リアルタイム通信を実現！

インメモリ（ルーム・プレイヤー管理）

推しポイント: データベース不要。Mapで軽量に管理。

データベースを使わず、サーバーメモリ上の Map<string, RoomState> , Map<string, PlayerData>,だけで管理しているため、読み書きが爆速！ルームが消えればプレイヤー情報も自動消滅するので、ゴミデータが残らない！

interface RoomState {
  roomId: string;        // 6文字英数字（I/O/0/1除外）
  hostId: string;        // Unityのsocket.id
  gameMode: "single" | "versus";
  players: Map<string, PlayerData>;  // socket.id → { role, team }
}

自動クリーンアップ — ホスト切断時にルーム自動削除（ゴーストルーム防止）
役割占有管理 — チーム内で同じ役割は1デバイスのみ
切断時の自動解放 — プレイヤーがブラウザを閉じるだけで役割が空き、別の人がすぐに取れる
リアルタイム同期 — スマホ側で誰が何の役割を取っているかが常に最新に保たれる

Socket.IO便利

WebSocket + HTTPロングポーリングの自動フォールバック（WebSocketが通らない環境では、自動的にHTTPロングポーリングに切り替わってくれる）
再接続機能 — ネットワークが不安定な環境でも自動リトライ（最大10回、1秒〜5秒間隔）
ルーム機能 — io.to("room:xxx").emit() で同一ルームのみに配信