Babylon.jsでシューティングゲーム風画面を作ってみた

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

今回は、先月作ったソードアートオンライン風のオブジェクトが消えるエフェクトをもとに、簡単なシューティングゲーム風画面を作る方法を解説します。

1. Grid Materialを使ってサイバー風の画面を作る

平面と空中に浮かべたオブジェクト、およびskyboxにGrid Materialをつけます。このPlaygroundの記述をほとんどそのまま使わせていただきました。

こちらをご参照ください。

こちらをご参照ください。

３の記事をご参照ください。

以前作った処理を見直して、boxやsphereなどの基本図形だけでなく、任意のオブジェクトでも光が散るエフェクトを作りました。

これらを元にして、一通り動くようにしたのがこちらです。十字キーで移動、キーボードのAを押すと弾を発射します。

中央のUFOに弾をぶつけると、HPバーが表示され、HPがゼロになると光となって散ります。

詳しいコードはPlaygroundの中に書いてあるのでご参照ください。

Babylon.js forumで、別の人の話題の中で取り上げられました。

元の質問者がExploded View (放射状にパーツが広がるようなView) を作る方法について質問していて、派生版の例として紹介されています。

うまく工夫するといろいろなことができて面白いです。機会あればもう少し本格的なゲームも作ってみたいと思います。