前回は球がブロックと衝突すると、ブロックが消えるという処理を紹介しました。
今回はブロックが消えたことをスコアとして表示する、終了時にメッセージを出すという処理を追加します。
1. AdvancedDynamicTexture.CreateFullscreenUIを使ってGUIを作る
Babylon.js Editorには、GUI Editorという仕組みを呼び出すことができます。
GUI Editorとは、文字通りソースコードを使わずに画面レイアウトを配置できるツールです。元々Webベースの独立した仕組みですが、Editorに内蔵されたようです。
GUI Editorについては、以前こちらでまとめたことがあります。 www.crossroad-tech.com
こちらでデザインできたらよかったのですが、Babylon.js Editorのプロジェクトに入れた画像を読み込むことができませんでした。そこで、今回はソースコードで書くことにしました。
普通の書き方ですが、このような記述にして開始時のメッセージと残りのブロック数を示すテキストを定義しました。
2. ブロックの衝突時に残りのブロック数を変更＋終了メッセージをつける
前回の記事で書いたブロックの衝突時に、GameManager.tsというコードに定義したsetBlockCount()を呼ぶようにしました。
setBlockCount()はこちらです。
これにより、全体の動作はこのようになります。
3. おわりに
Havok関連と、TypeScriptの微妙な使い方の違いがあって、予想より時間がかかりましたがひとまず終了です。
ブログの解説は部分的だったので、全ての内容が入ったGitHubリポジトリを準備中です。コードを整理したらこちらの記事に追加します。
2025/11/7追記
こちらに準備しました。
