======================================================================== Pixel Paint War - プロトタイプ実装計画 (Prototype Implementation Plan) ======================================================================== 1. 概要 (Overview) ------------------------------------------------------------------------ 本ドキュメントは,「SPEC_03_プロトタイプ_移動テスト.txt」で定義された50人同時接続テストを達成するための段階的な実装ロードマップである. 複雑性を排除するため,最小構成から機能を積み上げる(Step-by-Step)方式を採用する. 2. 実装フェーズ定義 (Implementation Phases) ------------------------------------------------------------------------ 2-1. Step 1: クライアント単体移動 (Local Movement) ■ 目標 サーバーを介さず,ブラウザ上でジョイスティック操作によりキャラクターが移動・描画されること. ■ 実装対象 ・packages/shared/ - src/config/gameConfig.ts: マップサイズ,移動速度等の定数定義. - src/utils/math.ts: ベクトル計算,移動ロジック (Pos += Vel * Speed * DT). ・apps/client/ - src/input/Joystick.ts: タッチ入力の正規化,デッドゾーン処理. - src/entities/PlayerSprite.ts: 描画更新処理. - src/core/GameLoop.ts: Pixi.js Tickerを用いたメインループ. 2-2. Step 2: サーバー開通・単体通信 (Single Player Network) ■ 目標 WebSocketサーバーと接続し,バイナリパケットの送受信(エコーテスト)に成功すること. ■ 実装対象 ・packages/shared/ - src/protocol/schema.ts: DataViewを用いたバイナリエンコード/デコード処理. ・apps/server/ - src/index.ts: WebSocketサーバー起動 (wsライブラリ). - src/network/Connection.ts: 接続管理. ・apps/client/ - src/network/SocketClient.ts: バイナリ送受信の実装. 2-3. Step 3: 複数人同期・補間 (Multiplayer Sync) ■ 目標 2つのクライアント間で位置同期が行われ,他プレイヤーの動きが補間により滑らかに表示されること. ■ 実装対象 ・apps/server/ - src/managers/RoomManager.ts: 接続IDと座標の管理. - src/network/PacketHandler.ts: 全員分の座標スナップショット作成とブロードキャスト. ・apps/client/ - src/entities/RemotePlayer.ts: 他プレイヤー描画クラス. - src/network/Reconciler.ts: 線形補間 (Lerp) ロジックの実装. 2-4. Step 4: 50人規模最適化 (Optimization & Scaling) ■ 目標 パケットサイズを削減し,50人同時動作時の帯域負荷を仕様内(30KB/s以下)に抑えること. ■ 実装対象 ・packages/shared/ - src/utils/quantization.ts: 座標の圧縮 (Float -> Uint16). ・apps/server/ - src/core/ServerEngine.ts: ループ処理の最適化,必要に応じたAoI(関心領域)判定. 2-5. Step 5: メタデータ・UI実装 (Meta Data & UI) ■ 目標 ゲーム開始前のロビー画面およびUIを実装し,ゲームサイクルを完成させること. ■ 実装対象 ・apps/client/ - src/scenes/TitleScene.ts: 名前入力とスタート処理. - src/ui/UIManager.ts: DOMベースのUIオーバーレイ. ・packages/shared/ - src/types/index.ts: ロビー用JSONメッセージの型定義. 3. 開発ルール (Development Rules) ------------------------------------------------------------------------ ・ロジックの共通化: 移動計算式や衝突判定は必ず `packages/shared` に実装し,Client/Server間でコードを共有する. ・検証優先: 各Step完了ごとに動作確認を行い,バグを次工程に持ち越さない.