Babylon.jsで弾を飛ばす処理を作ってみよう

これはBabylon.js アドベントカレンダー2022の記事です。

今回はキー入力をしたら弾が飛ぶ、というシンプルな表現の作り方を紹介します。
実際は他にも方法があるはずなので、今回の紹介は一例としてご理解ください。

1. まずは物理演算を有効にする

このように書きます。このenablePhysicsを使わないと、後半で解説するApplyImpulseが動きません。
gist.github.com

例えばこのように書きます。小さめのsphereを表示させ、cameraの子オブジェクトにすることで、向きを変えても常に画面中心に標準が表示されます。
gist.github.com

この時点の内容は、以下で確認できます。
https://www.babylonjs-playground.com/#JVZU08

getForwardRayを使います。

createInstanceにより、あらかじめ作っておいたbulletというsphereのコピーを作り、これをapplyImpluseで飛ばします。飛ばす方向は先ほど準備しておいたrayで決まります。

impulseMagnitudeの値を大きくすると弾丸の速度が増します。
gist.github.com

キー入力はonKeyboardObservable.addを使います。

この時点の内容はこのようになります。

先ほどの内容で実質完成ですが、あのままだとボタンを押すたびに弾オブジェクトが増えてしまいます。そこで一定座標を超えたらdispose (削除) する処理を追加します。

これでzで100以上、あるいは-100以下まで弾が移動したらdisposeされます。

以上の内容はこちらから確認できます。キーボードのaを押してみてください。

シューティングゲームを作る、何かを動かす処理を作るときの参考になれば幸いです。