VitePress

Appearance

フライトシミュレーターのサンプル ​

コウノトリを操縦して空を飛ぶゲームです。機体は自動で前進し続ける ので、ロール（左右の傾き）とピッチ（上下の向き）で進む方向を コントロールします。追いかけてくるオウムの敵を3羽撃ち落とすと クリア、飛んでくるブロックにぶつかってLIFEが0になると ゲームオーバーです。

▶ フライトシミュレーターを実行する （ソースを見るにはページを開いてブラウザの「ページのソースを表示」を 使うか、リンク先を保存してください）

操作方法 ​

  • PC — A/Dキーでロール（左右に傾ける）、W/Sキーでピッチ（機首の 上げ下げ）、Enterキーで弾丸発射。
  • スマホ — 左ジョイスティックでロールとピッチ、「R」ボタンで 弾丸発射。

このプログラムの特徴 ​

飛行機らしい操縦 ​

プレイヤー（Stork.glbのコウノトリ）はSimplePhysicsモードの rigidBody: 'kinematic'で、物理演算の影響（重力など）は受けずに プログラムから直接動かします。毎フレームのupdate(dt)は たった3行で、「自分の向き基準」の回転・移動メソッドを使うのが ポイントです。

js
this.rollRightNow(3*view.leftJoystick.x); // ロール(左右の傾き)
this.turnDownNow(view.leftJoystick.y);    // ピッチ(機首の上げ下げ)
this.moveForwardNow(0.1);                 // 常に前進

地面との平行移動ではなく機体基準で回転するので、宙返りも 横転もできる飛行機らしい動きになります。

カメラの「上」を機体に合わせる ​

このサンプルで一番おもしろいところです。通常カメラの上方向は ワールドのY軸ですが、それだと機体が傾いたときにカメラが ついてきません。メインループで毎フレーム、デフォルトの上方向 ベクトルをプレイヤーの上方向に合わせることで、Followモードの カメラが機体と一緒に傾くようになっています。

js
a3.ObjectA3.defaultUpVector.set(player.getUnitVecY());

ゲームが終わったら(0,1,0)に戻します。

プレイヤーを追いかける敵 ​

敵のオウム（Parrot.glb）は物理演算ではなく、毎フレーム 「プレイヤーの前方30m + ランダムなずれ（うろうろ成分）」に向かって 現在位置から3%ずつ近づく、という計算で動いています。単純な式ですが なめらかに追尾しているように見えます。

障害物と弾丸 ​

  • 障害物のブロック（ClearBlocks.a3）はメインループ中に 100分の3の確率でプレイヤーの前方のランダムな位置に出現し、 ぶつかるとLIFEが減ります。
  • 弾丸（ball.glb）はkinematicで毎フレーム前進し、一定時間で 消えます。敵に当たるとスコアが100点入ります。

衝突の検出はすべて 当たり判定の handleCollision()で行い、obj instanceof Bulletのように 相手のクラスで処理を分けています。

そのほか ​

  • 空を飛ぶゲームなので地面はなく、背景はAcerola3DのSkyBox （SkyBox01.a3）だけです。
  • LIFEとSCOREの表示はHTMLの要素に毎フレーム書き込んでいます。
  • BGM・効果音: 魔王魂