今回はHTML + JavaScript（Canvas）だけで、エースコンバット風フライトシューティングを目指す企画のPhase1として、 「飛んでいる感触」に全振りしたプロトタイプを作った。
まだ敵も撃てないし、ミッションもない。 でも――
-
地平線が傾く
-
ピッチで上下する
-
スロットルで速度が変わる
-
旋回すると失速気味になる
この時点で、もう“飛んでいる”。
なぜPhase1は「撃たない」のか
いきなりシューティングを作ることもできる。 でも今回は、あえて飛行モデルだけに集中した。
理由はシンプルで、
フライトゲームの面白さの8割は「操縦感」にある
からだ。
ここが決まっていない状態で武装や敵を足すと、 後から全部作り直しになることが多い。
なので今回は、
-
速度
-
ピッチ / ロール / ヨー
-
慣性
-
失速っぽさ
このあたりをひたすら調整するフェーズにした。
実際に遊べるデモ（Phase1）
下に埋め込んでいるのが、今回のPhase1プロトタイプ。
※ PC / スマホ両対応 ※ 音は出ません
← / → : Roll
↑ / ↓ : Pitch
W / S : Throttle
Mobile Controls:
Left screen drag : Roll
Right screen drag : Pitch
Two-finger vertical drag : Throttle
（※ ブラウザ翻訳を使えば、日本語でも問題なく操作できます）
操作方法（ゲーム内表示は英語）
ゲーム内の操作説明はあえて英語表記にしている。 理由は文字コード事故を避けるため、そしてHUD的に英語の方が雰囲気が合うから。
-
← / → : Roll
-
↑ / ↓ : Pitch
-
W / S : Throttle
Mobile
-
Left drag : Roll
-
Right drag : Pitch
-
Two-finger vertical drag : Throttle
技術的な話（軽め）
使用技術
-
HTML5 Canvas
-
JavaScript（フレーム更新は
requestAnimationFrame） -
外部ライブラリなし
やっていること（超ざっくり）
-
ロール角からヨー回転を発生させる「アーケード寄り」な飛行モデル
-
ピッチ角から上昇 / 下降を計算
-
速度に応じた旋回性能変化
-
旋回時の速度ロス（G負荷っぽさ）
ガチの物理シミュレーションではないが、 ゲームとして気持ちいい嘘を優先している。
Phase1の完成ライン
このPhaseでのゴールは以下：
-
飛んでいる感触がある
-
地平線が自然に動く
-
速度・高度が意味を持つ
-
PC / スマホ両対応
全部達成できたので、Phase1はここで一区切り。
次のPhaseでやること（予告）
次は、いよいよゲームっぽさを入れていく。
Phase2予定：
-
敵機のスポーン
-
レーダー表示
-
ターゲットマーカー
-
ロックオン判定
ここまで来ると、一気にエースコンバット感が出てくるはず。
まとめ
HTMLとJavaScriptだけでも、 ここまで「飛ぶ感触」は作れる。
派手な3DやWebGLに行く前に、 まずは操縦して楽しいかどうかを作る。
個人開発なら、この順番が一番幸せだと思う。
次のPhaseも、引き続きログとして残していく予定。
成田ラボ的フライトシム開発、もう少し続きます。
