[Astro #95] LAYER FIGHTER: ステージセレクト実装 & ジャンプ攻撃追加

ステージセレクト画面の実装

LAYER FIGHTER にステージセレクト画面を追加しました。トレーニングモードを選択すると、まずステージセレクトに遷移し、好きなステージを選んでからバトルに入る流れになっています。

Stages.json の分離

これまで Assets.json に詰め込まれていたステージ情報を、専用の Stages.json に分離しました。ステージが増えてきたこともあり、管理しやすくなっています。

3Dプレビュー付きの選択UI

ステージセレクト画面では、左側にステージ名の一覧、右側に選択中ステージのGLBモデルがゆっくり回転するプレビューを表示しています。クリエイター名やライセンス情報も表示するようにしました。

各ステージのプレビュー表示サイズは Stages.json の previewScale で個別に制御できるようにしています。ステージごとにモデルのスケールが大きく異なるため、一律倍率ではなくJSON側で調整できる形にしました。

VR対応

操作体系はタイトル画面と同じです。

• 左スティック上下: ステージ選択
• 右トリガー: 決定
• キーボード: ↑↓で選択、Enterで決定、Escで戻る

入力貫通バグの修正

タイトル画面でEnter/トリガーを押した瞬間に STAGE_SELECT がマウントされ、同じフレームの入力イベントがステージセレクト側でも拾われてしまい、最初のステージが自動選択されるバグが発生しました。

readyRef を導入し、マウント後200msの猶予を設けることで解決しています。

const readyRef = useRef(false);
useEffect(() => {
  readyRef.current = false;
  const timer = setTimeout(() => { readyRef.current = true; }, 200);
  return () => { clearTimeout(timer); readyRef.current = false; };
}, []);

ジャンプ攻撃の追加

空中でパンチ/キックが出せるようになりました。

• JUMP_PUNCH（空中P）: 発生5F、持続8F。空対空や飛び込みに
• JUMP_KICK（空中K）: 発生7F、持続10F。飛び込みの主力

3箇所同時更新パターン

LAYER FIGHTER で新しい FighterState を追加する際は、必ず以下の3箇所を同時に更新する必要があります。今回もこのパターンに従っています。

1. isAttacking（useFTGGameLoop.ts ヒット判定）
2. isLocked（useFTGGameLoop.ts ステートマシン）
3. isAttacking（FTGComponents.tsx HitBox表示）

加えて ANIM_MAP、FighterState 型（3ファイル）、着地判定の更新も必要です。

しゃがみパンチのバグ修正

ジャンプ攻撃の実装中に、CROUCH_PUNCH が isAttacking リストに含まれていないことを発見しました。しゃがみパンチは技として出るものの、ヒット判定が動いておらずダメージが入らない状態でした。isAttacking と isLocked の両方に追加して修正しています。

HUD二重表示バグの修正

「YOU LOSE」「PRESS ANY BUTTON」などのラウンドフェーズ表示が画面上に二重に表示されるバグを修正しました。

原因は、同じテキストが2つの異なるレイヤーで描画されていたことです。

• FTGTrainingScene.tsx: 3D空間内の Billboard（VR用）
• FTGBattleHUD.tsx: HTML overlay（デスクトップ用）

VRではHTML overlayが見えないため3D Billboardが必要で、デスクトップではHTML overlayの方が見栄えが良いため、両方の実装が必要です。しかし、同時に表示してはいけません。

ftgHudRef に isVR フラグを追加し、state.gl.xr.isPresenting を毎フレーム書き込むことで、デスクトップではHTML overlay のみ、VRでは3D Billboard のみが表示されるようにしました。

現在のステージ構成

ステージ名	作者
Sci-fi Fighting	Umar
Lava Fighting Arena	Umar
Mitaiken Horizon Llsifas	tspmosybau
Hikari LLSIFAS	tspmosybau

全ステージ CC Attribution ライセンスで、Sketchfab から取得したモデルを使用しています。

次の課題

フレームデータの調整が残っています。現状、キック系の技は startup や recovery が長すぎて実戦で振りにくい状態です。アニメーションの再生時間との兼ね合いがあるため、animSpeed と合わせて実機で確認しながら調整していく予定です。