ft_transcendence

ブラウザで動作するリアルタイムオンラインお絵描き当てゲーム

Web AppTypeScriptReactFastityNetworkGame

概要

42の最終課題として、4人チームで約2.5ヶ月かけて開発したリアルタイムマルチプレイヤーお絵描き当てゲーム「お絵描きアイランド」。1人が出題された単語をキャンバスに描き、他のプレイヤーがチャットで回答を当てる。フロントエンドはReact + TypeScript、バックエンドはFastify + Prisma + PostgreSQL、リアルタイム通信はWebSocketで構成し、Docker Composeで4サービスをオーケストレーションしている。597コミット、92PRの規模で開発を進めた。

苦労・工夫した点

最も苦労したのは、クライアントの意図しない切断からの再接続処理だった。ReactのuseEffectクリーンアップとWebSocketのoncloseイベントが競合し、意図しない再接続ループが発生する問題に直面した。isMountedRefやhasJoinedRef、cancelledフラグなど複数のrefを使ってライフサイクルを管理することで解決したが、画面ごとに異なる再接続戦略が必要で、試行錯誤を重ねた。この過程で得た知見はリサーチノートとしてチーム内で共有した。もう一つの大きな課題は、フロントエンドとバックエンドの責任分界の決定だった。Waiting画面は更新頻度が低いため「WebSocketは通知のみ、データ取得はHTTP」という方式を採用し、Game画面はミリ秒レベルの応答が必要なため「すべてWebSocketで完結」する方式を採用した。画面の特性に応じて通信アーキテクチャを使い分ける判断に至るまでに調査と議論を重ねた。 4人チームでの開発では、ft_ircで導入したCI/CDとPRテンプレートをさらに発展させ、型チェック・ビルド・フォーマットの3つのCIワークフローを整備した。2人→3人→4人とチーム規模が拡大する中で、開発プロセスも段階的に成熟させてきた。

ポイント

WebSocket通信のアーキテクチャ設計。画面の特性に応じて通信戦略を最適化している点が特徴で、Waiting画面では「WebSocketを通知のドアベルとして使い、実データはHTTPで取得する」方式、Game画面では「描画座標、チャット、タイマー、スコアのすべてをWebSocketで直接同期する」方式を採用した。バックエンド側ではconnectionHandler.tsが12種以上のメッセージタイプをルーティングし、roomManager.tsがインメモリ状態管理とブロードキャストを担当する構成になっている。ゲーム中のスコアはメモリ内Mapで高速に管理し、ラウンド終了時にPrismaトランザクションでバッチ保存する二層構造も、リアルタイム性とデータ永続性を両立させるための設計判断である。

ft_transcendence

概要

苦労・工夫した点

ポイント

他のプロジェクト

Urban Reflection

TOTO Technical Center Tokyo

Recursive Orchestra

HOTORIUM

AIR HUB TOKYO "Clean Air Vision”

Reflective tree

sonus-oleum

WOW 25th Anniversary Exhibition - Unlearning the Visuals

Yakushiji Hikari Kyoya -inori-

ft_irc

Celvoke 2022 S/S Key visual

miniRT

Minishell

NEM-PA Series M.2 2280 Gaming SSD

Fluctuation landscape

Contour

CodeHero by shibajuku

Virtual Event Platform Concept movie

Moment

SFC Creative Week