[Astro #79] Three.jsで実装する軽量な地形這行ミサイル物理と多段階パワーアップインフラ
はじめに
Three.js(React Three Fiber)環境において、ハイトマップや重いレイキャスター(Raycaster)を使用せず、境界箱(AABB)のフチ判定を応用した「地形に沿って這うミサイル」の挙動、およびそのパワーアップインフラ一式を実装しました。以下にその技術的な仕様と解決した課題をまとめます。
1. 基本仕様とフチ這わせ物理演算
高負荷なレイキャスト処理を回避するため、画面内にスクロールしてくる地形オブジェクトのバウンディングボックス(AABB)から各フチの座標を算出し、3つのステート(状態)を遷移する軽量なステートマシンを構築しました。
| ステート | 物理挙動の概要 |
|---|---|
FALL (自由落下) | 自機の下部から斜め下方向(右下)へ直線的に自由落下します。 |
SLIDE (床滑り) | 地形ブロックの天面に接触した瞬間、高度(Y座標)を天面の高さに強制ロックし、地形スクロールを相殺しながら右方向へ滑走します。 |
CLIMB (壁登り) | 現在航行している床より高い前方の左壁(側面)に接触した際、X方向の速度をゼロにし、Y方向のプラス速度へギアシフトして垂直上昇します。 |
2. グラディウス準拠の2段階パワーアップとUI制御
本家グラディウスのパワーアップインフラをベースとしつつ、よりゲーム性を高めるカスタム仕様を配線しました。
-
動的上限カウントシステムの導入
-
通常の「フラグ管理」から「段階管理(
missileLevel:0〜2)」へコンバートしました。 -
1回目の発動で1発、カプセルを集めて2回目の発動を行うことで、画面内に最大2発まで同時に存在できるマルチミサイルへと強化されます。
-
MAX状態のインテリジェント・自動スキップとHUD表示消去
-
レベル2(MAX)に達した瞬間、HUD上のパワーアップゲージ内から「MISSILE」のテキストがスッと消灯(暗転化)します。
-
以降はパワーカプセルを回収しても、ゲージ選択の枠が自動的にMISSILEスロットをスルー(スキップ)して次の兵装へ直行するループ処理を実装しました。
3. ハマり・めり込み等のバグに対する根本解決
段階的なデバッグにより生じた以下の物理演算の課題に対し、動的バグフィックスを実行しました。
-
モグラミサイル(沈み込み)の解決と見た目の補正
-
3Dメッシュ(
coneGeometry)の原点が中心にあることで発生していた地面へのめり込みに対し、ステートに応じて先端の回転角(rotZ)と表示高度(renderY)を動的にアジャストするディスプレイオフセット層を配置しました。 -
舞台装置外への漏れ出し防止クランプ
-
画面下部に崖から落ちて消滅する際、インゲームモニターの下端(
y = -MONITOR_HEIGHT / 2)をデッドラインとして厳密にクランプし、劇台の下の木製フレームまでダダ漏れで落下するルックの不具合を修正しました。 -
床の継ぎ目における自動乗り継ぎと隙間対策
-
横に平坦に並んだ別々のブロックを横断する際、境界の隙間(演算誤差)でミサイルが落下しないよう、左右のX軸判定にマージンを確保し、同じ高度の隣り合う床へ自動でターゲットIDをバトンタッチするバインディング処理を追加しました。
-
無限スタック(チャタリング)を解消する激突即消滅物理
-
地面の上に孤立して設置されているオブジェクト(木など)の側面を登ろうとする際、足元の床判定と木の側面判定が超高速で競合し、その場に留まり続けてしまうスタック現象(チャタリング)を検知しました。
-
寿命による猶予消滅ではなく、自分より背の高い壁に正面衝突したことを検知した瞬間、即座に「地形激突」として判定し、星パーティクルを排出しながら美しく自爆・消滅(配列からデリート)するロジックを統合することで、ミサイルがその場に残る詰まりを根本から完全解決しました。