Babylon.jsのGUI Editorで作ったGUIをソースコードから制御する方法

前回の記事ではGUI Editorの基本的な使い方を説明しました。

今回はGUI Editorを使ってゲームのタイトル画面と設定画面を作ってみたので、この画面をソースコードから切り替える方法を解説します。

なお、この記事で説明に使っている一連のファイルは以下のリポジトリで公開しています。

また、動作させてみたときの画面はこちらにあります。

1. GUI Editor側で、各Controlに名前をつけてからjson出力する

この画像にあるように、左側のControl Layerでソースコードから制御したいcontrolについて名称をつけておきます。ここでは、"Button_end", "Button_setting", "Button_start"などが該当します。

名前を付けたらSAVEをクリックしてjsonファイルを取得します。

index.htmlやjsonを格納するフォルダを準備し、Visual Studio Codeなどで開きます。ベースとなるコードはBabylon.jsが提供しているPlayground (サンプルコードを集めたサイト) から取得するとやりやすいと思います。

たとえば、以下のURLにアクセスすると、GUI Editorで生成したjsonファイルを読み込んで表示するサンプルコードを確認できます。
https://playground.babylonjs.com/#SWI883

赤枠で囲ったところを選択すると、sample.zipという形でファイルをダウンロードできます。これを解凍して中に入っているindex.htmlを使うのがよいです。

このように読み込みます。今回はタイトルと設定で２つの画面を準備したのでparseFromURLAsyncを２回使います。
gist.github.com

今回はどちらも画面全体で表示しているので分かりづらいですが、読み込んだ時点だとどちらも表示されるので、最初に表示しない方をvisible falseにしておきます。

なお、ここで使っているgetControlByNameですが、これはGUI Editorで作ったcontrolの名称を元に特定のcontrolを取得できるものです。

今回の２つの画面は、どちらもBackgroundと名付けたrectangle図形が親要素になので、"Background"で指定しました。

■ゲームタイトル画面

補足：前回の記事で書いたように、GUI Editorで任意の画像を指定できないので、デフォルト画像を配置しています。

■設定画面

また、isVisible=falseにすると、その場所をクリックしても何も反応しなくなります。単に非表示になるだけではなく、子要素のボタンも効かなくなります。

このようになります。
gist.github.com

先ほどのgetControlByNameを使って、それぞれのボタン情報を取得します。このボタン情報からonPointerClickObservable.addを呼び出し、ボタンが押されたときに実行したい処理を書くだけです。

これにより、冒頭の動画で紹介したように、ボタンを押すと画面が切り替わるという処理が実現できます。

Playgroundでは、スライダーを調整することでmeshの色が変わるなど、他の例もあるので参考にしてみてください。

■スライダーを調整することでmeshの色を変更 https://playground.babylonjs.com/#JSF3QM

今回はそれっぽいGUIを作るためにフォントも変えています。Githubリポジトリのreadmeでも記載していますが、下記のフォントを使わせていただきました。ありがとうございました。

変更したフォントは、GameTitleGUI.jsonとGameSettingGUI.jsonをVisual Studio Codeで開き、fontFamilyでgrepすると確認できます。

"fontFamily": "GN-きんいろサンセリフ",

今回のゲームタイトルは架空のものなので、実際のゲームそのものを作る予定はないですが、いつかゲームやツールを作るときはGUI Editorが役立ちそうだと思いました。