Babylon.jsでHPゲージを作ってみよう

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

Babylon.jsにはGUIを作る仕組みが準備されています。たとえばゲームでよく使われるHPゲージのような表現も比較的簡単に作れます。

今回は、HPゲージがゼロから回復する、HPゲージが特定イベントで減っていく、という処理を作る方法を紹介します。

1. HPゲージが回復する表現

すでにBabylon.js Playgroundで公開されていました。ここにアクセスすると確認できます。

このようになります。

先ほど紹介したPlaygroundを参考にして作り替えました。

まず、こちらの#1と書かれたサンプルコードを開くと、HPゲージを右上に移動させて、ゲージmaxにした状態が確認できます。

次に、キー入力です。

このように、onKeyboardObservableを使ってキー入力をとり、aボタンが押されたときにバーの表示を10減らします。

実行すると、このようになります。

このようにゲージ関係は比較的簡単に実装できるので、ゲームを作るときに使えそうですね。