前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。
今回は、ブロックを崩したときにスコアの表示を変更、球が落ちてしまったときのライフを変更、開始と終了時のテキスト表示をつけてみました。
使用した環境
・Mac OS 10.15.6
・Node.js 12.16.3
・Visual Studio Code 1.48.1
・Babylon.js Editor v4.0.0 beta2
1. ブロックを崩したときにスコアの表示を変更する
まずHUD.tsに以下を追加します。
exportを先頭につけた関数は、他のソースコードから呼び出すことができます。addScore()はブロック (それぞれblock.tsがアタッチされている) から呼ばれてほしいので、exportをつけました。
次に、block.tsで、addScore()を呼び出す処理を書きます。
このようになります。
2. 球が落ちてしまったときにライフを変更する
いろいろ方法はあると思いますが、今回はボール (ball.tsがアタッチされている) がプレーヤーの位置より下に移動してしまったときに、ハート画像のalphaを0にする処理を作ってみました。
ball.tsはUnityと同じようにonUpdate()の中に処理を書くことで、一定フレーム毎に繰り返し呼ばれます。そこで、適当なフラグを作って、x値が一定値よりも小さくなったときにハートの１つを非表示にするremoveHearts()を呼ぶ処理を書きました。
removeHearts()はこのようにしました。
これにより、球が落ちてしまったときにライフが減ります。また、3つ減ると"You lose. Reload to play again"が表示されます。
3. 開始と終了時にテキストを表示する
今回、HUD.tsの export default class HUD extends Node {} の中で、球が当たったブロックの数や、開始やゲームオーバー時のメッセージを表示させる処理を書いています。
このとき、HUD.tsのHUD classの外からテキストを変更させるために、このような書き方をしています。
export defaultなので、HUD classの中で書いた関数が他のスクリプトから読めるかと思ってshowMessagesをHUDクラスの中に書いてみたのですが、読めなかったのでこの書き方にしています。
showMessage()は、ball.tsなど他のスクリプトから呼ばれます。結果、このようになります。
4. おわりに
まだ不具合がいくつか残っていますが、最低限のゲームの形にはなりました。あとは、ここで作った内容をwebサーバに配置する方法がReadmeやドキュメントから見つけられないので、次回はその辺りを調べてみます。次回で完結予定です。
