これはBabylon.js アドベントカレンダー2022の記事です。
2022年の夏頃に、Babylon.js ForumでGUI Adventureというコンテストが告知されました。
ソースコードだけで書くか、以前紹介したBabylon.js GUI Editorのどちらかで何かの画面を作り、主催者の審議で上位５名が入賞というものです。
今回、幸運にも入賞することができましたので、どんなものを作ったかについて紹介します。
1. GUI Adventureとは
公式フォーラムで紹介されているコンテストです。Babylon.jsでGUIを作る仕組み、あるいは直感的操作でGUIを作ることができるBabylon.js GUI Editorを使って好きなGUIを披露してください、というものです。
2. Babylon.jsのGUIとGUI Editorとは
Babylon.jsではGUIを作る仕組みが準備されています。ボタン、テキスト、スクロールなどが実装できます。
詳しくはこちらに書いてあります。
GUI | Babylon.js Documentation
GUI Editorとは、コーディングを使わずにGUI画面を作ることができる仕組みです。
詳しくはこちらに書いてあります。
The GUI Editor | Babylon.js Documentation
また、GUI Editorについては以前使い方を書いたことがあるので、雰囲気や使い方はこちらをご参照ください。
3. 今回作ったもの
Playgroundにアップロードしました。
https://playground.babylonjs.com/#LQ6DS0
このままだと表示が崩れるので、開発者ツールで2100*1800などに調整し、できるだけ表示領域を増やしてください。
ディスプレイサイズによっては、さらに値を大きくする必要があるかもしれません。
ゲームタイトル風ですが、タイトル画面だけです。Settingというボタンを押すと、キャラクターの設定画面に切り替わります。
設定画面に切り替わった後、キーボードの左と右キーを押すと、キャラクターのタイプ (剣と銃) を切り替えできます。
OKボタンを押すとタイトル画面に戻ります。
使った3Dモデルです。キャラクターはReady Player Meというサービスで作りました。
■銃
https://www.turbosquid.com/3d-models/franchi-spas12-3d-model-1844597#
■建物
sketchfab.com"Christchurch Greyfriars Church Garden" (https://skfb.ly/osRVA) by artfletch is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
■ボスキャラ
"Strand_1" (https://skfb.ly/6WoqX) by Fredrick Nolting is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
■背景全体
これらの3Dモデルを配置して、画面キャプチャしたmp4動画を背景に貼りました。
カメラ視点がゆっくりと動くのは、ArcRotateCameraを使って以下の宣言をすることで実現しています。
camera.useAutoRotationBehavior = true;
■死神が上下に浮いている表現
このPlaygroundの処理を参考にして作りました。
https://playground.babylonjs.com/#7V0Y1I
■PhotonSword
Particle Editorで表現を作ってjson出力して、それを読み込みました。
これにより、垂直に光が噴き出るようなエフェクトを実現しています。
Particle Editorの概要や使い方は、こちらにまとめています。
この辺りの動画化した表現の実装方法は、以下のリポジトリのindex.htmlに書いてあります。
■ボタン
ブラウザで表示される文字は、ブラウザが動くコンピュータにインストールされているフォントに依存します。
他の記事で書いたように、ページを表示するときにインターネットで公開されているフォントを読み込む方法か、文字を画像化して表示させる方法があります。
今回は、Adobe Expressを使ってかっこいい文字を画像化して使ってみました。
Adobe Expressは、無償で各種デザインができるサービスです。
4. 入賞しました
コンテストの上位入賞５位には、Babylon.jsについて書かれた書籍 (英文) 「Going to distance with Babylon.js」がもらえます。なんと作者サイン付きです。
2023/1/5追記
物流混雑により遅れていたようですが、ついに受け取れました。Technical Expertsの方々のサインも入っており、大事にしたいと思います。
#babylonjs のGUIコンテスト入賞景品の書籍がついに届きました！ 年末の物流混雑でかなりかかったようです。
— Limes (@limes2018) 2023年1月5日
執筆に関わった方からのサイン付き。宝物にします！ pic.twitter.com/HB9B9PKJ82
5. おわりに
なんとなく面白そうという興味で作ったので、まさか入賞するとは思いませんでした。
また機会があればトライしてみたいと思います。
