Codex / Canvas / Perspective

Codexで3Dシューティングゲームを作る方法

迫ってくるドローンへ照準を合わせ、ゲートを守る一人称シューティングです。今回は3Dライブラリを使わず、座標を遠近投影して奥行きを作っています。

3Dに見せる仕組み

敵は画面上の座標ではなく、横位置X、高さY、奥行きZを持ちます。描画する時に、XとYをZで割って画面中央からの距離へ変換します。遠い敵ほど小さく中央へ集まり、近づくほど大きく外側へ広がるため、平面のCanvasでも奥行きが生まれます。

screenX = centerX + (worldX / depthZ) * focalLength
screenY = centerY + (worldY / depthZ) * focalLength
size    = objectSize * focalLength / depthZ
01

遠近投影

奥行きZから表示位置と大きさを毎フレーム計算します。

02

照準判定

投影後の敵の中心と照準の距離で命中を判断します。

03

ウェーブ

時間とともに出現間隔、耐久力、移動速度を上げます。

最初にCodexへ渡すプロンプト

HTML/CSS/JavaScriptだけで動く一人称3D風シューティングを作って。
Canvasを使い、外部ライブラリは使わない。
敵はX・Y・Z座標を持ち、遠近投影で奥から手前へ迫るように描画する。
マウスとタッチで照準を動かし、クリックまたはSpaceで射撃する。
敵が手前まで来たらHPを減らす。
スコア、コンボ、ウェーブ、HP、リスタートを入れる。
PCとスマホの両方で遊べるUIにして。

演出を引き上げる追加プロンプト

シューティングの爽快感を上げて。
命中時に発光粒子、撃破時に画面揺れを入れる。
床と壁に奥へ収束するグリッドを描き、前進しているように動かす。
武器とレーザーを手前に描き、照準はネオン発光させる。
敵撃破でゲージが溜まり、満タンで画面内の敵を一掃できるようにする。
エフェクトが増えても毎秒60フレームを維持できるよう配列を整理して。

難易度の整え方

最初から敵を速くすると照準操作を覚える前に終わります。序盤は敵を遠くに出し、1発で倒せる敵を中心にします。その後、出現間隔を短くし、耐久力の高い敵を混ぜると自然に難しくなります。ゲームオーバーまでの時間と、特殊攻撃を1回は使えるかを実際に遊んで確認します。