前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。
今回は、ブロックに当てた数、ライフの数を表示させるGUI関係の処理を追加します。
使用した環境
・Mac OS 10.15.5
・Node.js 12.16.3
・Visual Studio Code 1.47.1
・Babylon.js Editor v4.0.0 beta2
1. Babylon.js Editor v4.0.2にはGUI追加機能はない
いずれ入るかもしれませんが、v4.0.2時点では入っていません。そのため、以下のドキュメントを参考にしながら作ることになります。
Use the Babylon GUI - Babylon.js Documentation
とくにこちらは、Babylon.jsを使ったゲームを作られた方の説明で、具体的なGUI表現がたくさん書かれています。今回も参考にさせていただきました。
Game GUI - Babylon.js Documentation
2. テキストを表示する
onStart()の中に、このように書きます。
2Dゲームということで、const playerUI = AdvancedDynamicTexture.CreateFullscreenUI("ここは任意"); を最初に宣言して、playerUIにテキスト、画像などを追加していくイメージです。
これで、このように表示されます。
たしかにテキストは表示されているのですが、もう少しゲームっぽいフォントにしたいと思います。Babylon.jsで作られたゲーム「Summer Festival」を参考にしました。
具体的には、Google Fontを使用します。使い方は例えば以下が参考になります。
ページ全体に適用させるには、index.htmlにgoogle fontの読み込みと、.disable-selectionに -ms-user-select: none; のようにuser-selectを追加する必要があるようです。
このようにしました。
これにより、HUD.tsで blockCount.fontFamily = "Viga"; と指定したVigaのフォントが適用されます。
3. 画像を表示する
画像を表示するためには、テキストのときのplayerUIに、Imageクラスのインスタンスを追加します。
例
var b1 = new BABYLON.GUI.Image("b1", "textures/test.png");
第二引数は画像のパスを書きます。上の例だと、このような階層になります。
|＿ index.html
|＿ textures/test.png
|＿ main.js
しかし、Babylon.js Editorの場合はプロジェクトの中に多数のコードがあって、単にBabylon.jsでプログラムを組む場合と階層が大きく変わります。
たとえば、自分で定義したTypeScriptファイルはこのような階層構造で配置されています。
Babylon.js Editorを使ったとき、TypeScriptファイルから画像を呼び出すときの方法は情報がありませんでした。そこで、いろいろ調べたところ、下記の手順で画像を読み込むことができました。
(1) Babylon.js Editorの中でTextureを追加する
まずはBabylon.js Editor上で必要な画像を追加します。
追加すると、プロジェクトの中で、scenes/scene/files/ の中に画像ファイルが追加されます。
なお、一度でもBabylon.js Editor上で画像を追加すると、Editor上で画像を削除しても、scenes/scene/files/ の中にある画像ファイルの実体は残ったままになるようです。
今回はライフゲージをハートで表示したかったので、Googleのマテリアルアイコン (Apache License 2.0) からハートの画像を取得して加工しました。
Material Icons Guide - Google Design
See the full set of material design icons in the Material Icons Library. という場所を選択するとアイコンを選ぶことができます。
(2) 画像を表示するコードを書く
このように書きます。ほんとはハートはもう少しよい書き方があるはずですが、まだやり方を整理できてないので単純な書き方にしています。
topとleftはCSSのtopやleftと同じように使うことができます。
ここまで作ると、先ほどのテキストと合わせてこのように表示されます。
4. おわりに
前回辺りから情報があまりないので動くようになるまで時間がかかることと、最近あまり時間が取れないため進みが遅いのが悩ましいですが、そろそろゲームの形に仕上げたいと思います。
