diff --git "a/docs/PLAN_01_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210\345\256\237\350\243\205\350\250\210\347\224\273.txt" "b/docs/PLAN_01_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210\345\256\237\350\243\205\350\250\210\347\224\273.txt" new file mode 100644 index 0000000..262bd72 --- /dev/null +++ "b/docs/PLAN_01_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210\345\256\237\350\243\205\350\250\210\347\224\273.txt" @@ -0,0 +1,79 @@ +======================================================================== +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完了ごとに動作確認を行い,バグを次工程に持ち越さない. \ No newline at end of file