前回の記事ではGUI Editorの基本的な使い方を説明しました。
今回はGUI Editorを使ってゲームのタイトル画面と設定画面を作ってみたので、この画面をソースコードから切り替える方法を解説します。
なお、この記事で説明に使っている一連のファイルは以下のリポジトリで公開しています。
また、動作させてみたときの画面はこちらにあります。
- 1. GUI Editor側で、各Controlに名前をつけてからjson出力する
- 2. ローカル環境で開発できる準備をする
- 3. parseFromURLAsyncでjsonを読み込む
- 4. GUI Editorで作ったボタンが押されたときの処理を書く
- 5. その他
- 6. おわりに
1. GUI Editor側で、各Controlに名前をつけてからjson出力する
この画像にあるように、左側のControl Layerでソースコードから制御したいcontrolについて名称をつけておきます。ここでは、"Button_end", "Button_setting", "Button_start"などが該当します。
名前を付けたらSAVEをクリックしてjsonファイルを取得します。
2. ローカル環境で開発できる準備をする
index.htmlやjsonを格納するフォルダを準備し、Visual Studio Codeなどで開きます。ベースとなるコードはBabylon.jsが提供しているPlayground (サンプルコードを集めたサイト) から取得するとやりやすいと思います。
たとえば、以下のURLにアクセスすると、GUI Editorで生成したjsonファイルを読み込んで表示するサンプルコードを確認できます。
https://playground.babylonjs.com/#SWI883
赤枠で囲ったところを選択すると、sample.zipという形でファイルをダウンロードできます。これを解凍して中に入っているindex.htmlを使うのがよいです。
3. parseFromURLAsyncでjsonを読み込む
このように読み込みます。今回はタイトルと設定で2つの画面を準備したのでparseFromURLAsyncを2回使います。
gist.github.com
今回はどちらも画面全体で表示しているので分かりづらいですが、読み込んだ時点だとどちらも表示されるので、最初に表示しない方をvisible falseにしておきます。
なお、ここで使っているgetControlByNameですが、これはGUI Editorで作ったcontrolの名称を元に特定のcontrolを取得できるものです。
今回の2つの画面は、どちらもBackgroundと名付けたrectangle図形が親要素になので、"Background"で指定しました。
補足:前回の記事で書いたように、GUI Editorで任意の画像を指定できないので、デフォルト画像を配置しています。
また、isVisible=falseにすると、その場所をクリックしても何も反応しなくなります。単に非表示になるだけではなく、子要素のボタンも効かなくなります。
4. GUI Editorで作ったボタンが押されたときの処理を書く
このようになります。
gist.github.com
先ほどのgetControlByNameを使って、それぞれのボタン情報を取得します。このボタン情報からonPointerClickObservable.addを呼び出し、ボタンが押されたときに実行したい処理を書くだけです。
これにより、冒頭の動画で紹介したように、ボタンを押すと画面が切り替わるという処理が実現できます。
Playgroundでは、スライダーを調整することでmeshの色が変わるなど、他の例もあるので参考にしてみてください。
■スライダーを調整することでmeshの色を変更 https://playground.babylonjs.com/#JSF3QM
5. その他
今回はそれっぽいGUIを作るためにフォントも変えています。Githubリポジトリのreadmeでも記載していますが、下記のフォントを使わせていただきました。ありがとうございました。
変更したフォントは、GameTitleGUI.jsonとGameSettingGUI.jsonをVisual Studio Codeで開き、fontFamilyでgrepすると確認できます。
"fontFamily": "GN-きんいろサンセリフ",
6. おわりに
今回のゲームタイトルは架空のものなので、実際のゲームそのものを作る予定はないですが、いつかゲームやツールを作るときはGUI Editorが役立ちそうだと思いました。