======================================================================== HUD・UI仕様 (HUD & UI Specification) ======================================================================== 1. ゲーム画面レイアウト (Game Screen Layout) ------------------------------------------------------------------------ 1-1. レイヤー構成 ゲーム画面は以下の3レイヤーで構成される（下から順）． 1. PixiJS描画レイヤー: マップ・プレイヤー・ボム・ハリケーンの描画 2. HUDレイヤー: タイマー・HP・塗り率・ミニマップの表示 3. 入力レイヤー: ジョイスティック・ボムボタンのタッチ入力 1-2. 配置 ・左上: タイマー ・左側: HPゲージ ・右上: ミニマップ + チーム塗り率パネル ・左側（入力）: ジョイスティック ・右側（入力）: ボムボタン ・中央: カウントダウン・通知テキスト 2. タイマー (Timer) ------------------------------------------------------------------------ 2-1. 表示仕様 ・位置: 画面左上 ・形式: MM:SS（分:秒） ・通常時: 白色で表示する 2-2. 残り時間による表示変化 ・残り30秒以下: 文字色が濃い赤（#8B0000）に変わる ・残り10秒以下: 1秒間隔で点滅する（opacity 1 ↔ 0.35） 3. HPゲージ (HP Gauge) ------------------------------------------------------------------------ 3-1. 表示仕様 ・位置: 画面左側 ・形式: 「HP: 」に続いてハートアイコンで被弾状況を表示する ・ハート表示: リスポーンまでの残り被弾可能回数をハートで示す - 被弾していないハート: 塗りつぶしハート - 被弾済みハート: 空ハート ・最大表示数: 5個（PLAYER_RESPAWN_HIT_COUNT に対応） 4. チーム塗り率パネル (Team Paint Rate Panel) ------------------------------------------------------------------------ 4-1. 表示仕様 ・位置: 画面右上（ミニマップの右隣） ・表示内容: 4チーム分の塗り面積率（%）をチームカラーの四角アイコン付きで表示する ・形式: 「■ XX%」（■はチームカラー，XXは小数点以下切り捨ての整数） 4-2. 残り時間による表示変化 ・残り30秒以下: 全チームの塗り率が「???%」に置き換わり，非表示になる 5. ミニマップ (Mini Map) ------------------------------------------------------------------------ 5-1. 表示仕様 ・位置: 画面右上 ・表示方式: Canvas要素によるリアルタイム描画 ・表示内容: - フィールド全体の塗り状況（チームカラーで色分け） - 自プレイヤーの現在位置（マーカー表示） ・トグル: タップで開閉を切り替えられる 6. ジョイスティック (Joystick) ------------------------------------------------------------------------ 6-1. 表示仕様 ・位置: 画面左側の入力領域 ・表示: タッチ開始時にジョイスティックのベースとノブが表示される ・ベース: 半透明の円形背景 ・ノブ: 指の位置に追従する小さな円 6-2. 操作仕様 ・タッチ開始: 指を置いた位置にジョイスティックが出現する ・ドラッグ: 指の移動方向と距離に応じて移動入力ベクトルが決定される ・ベクトル正規化: 入力ベクトルの長さが1.0を超える場合は1.0に正規化する ・タッチ終了: ジョイスティックが非表示になり，移動入力がゼロになる 7. ボムボタン (Bomb Button) ------------------------------------------------------------------------ 7-1. 表示仕様 ・位置: 画面右側の入力領域 ・表示: ボムアイコン付きの円形ボタン ・クールダウンリング: ボタン外周にクールダウンの残り時間をリング状に表示する - クールダウン中: リングが徐々に減っていく - クールダウン完了: リングが消え，ボタンが活性化する 7-2. 操作仕様 ・タップ: ボムを現在地に設置する ・クールダウン中: ボタンは非活性状態でタップしても反応しない ・クールダウン時間: - 通常時: 4000ms - フィーバータイム時: 2000ms 8. 開始カウントダウン (Start Countdown) ------------------------------------------------------------------------ 8-1. 表示仕様 ・位置: 画面中央 ・表示: ゲーム開始前のカウントダウン数字（3，2，1）を大きく表示する ・ゲーム開始後: 自動的に非表示になる 9. 通知テキスト (Notification Text) ------------------------------------------------------------------------ 9-1. フィーバータイム通知 ・表示条件: ゲーム残り時間がちょうど60秒の時点で表示する ・表示内容: 「！Fever Tieme！」 ・位置: 画面中央 ・演出: パルスアニメーション（拡大縮小）で表示する 9-2. ハリケーン警告 ・表示条件: ハリケーン出現時（残り120秒の時点）に表示する ・表示内容: 「WARNING：ハリケーン出現」 ・位置: 画面中央 ・演出: 点滅アニメーションで表示する 10. PixiJS描画要素 (PixiJS Rendered Elements) ------------------------------------------------------------------------ 10-1. マップ ・各セルをチームカラーで塗りつぶした矩形で描画する ・未塗装セルは既定の背景色で表示する ・ビューポートカリング: 画面外のセルは描画をスキップする 10-2. プレイヤー ・スプライト画像で描画する ・名前テキストをスプライト上部に表示する ・被弾時: 点滅エフェクトを表示する ・リスポーン時: 爆発エフェクトを表示する 10-3. ボム ・スプライト画像で描画する ・爆発時: 円形の爆発エフェクトをチームカラーで表示する 10-4. ハリケーン ・SVGベースのオーバーレイで描画する ・回転アニメーション付きで表示する