先日書いたように、Babylon.js Editorがv5になって色々と操作感が変わりました。
実はv4だったとき、簡単なブロック崩しを作ったことがあります。今回はそのときのコードとブログ記事をみながらv5で動くようにしてみました。
複数の記事に分けて書きます。
環境
Babylon.js Editor v5.1.3
- 1. 前提：v4につくったゲームの概要やソースコード
- 2. 新規プロジェクトを作る
- 3. ステージを作るため、メッシュを配置する
- 4. マテリアルを設定する
- 5. キーボード入力でPlayerのブロックを左右に動かす
- 6. おわりに
1. 前提：v4につくったゲームの概要やソースコード
以前はこういうものを作りました。
GitHubのリポジトリです。しかし、v5になってプロジェクトファイルの構成が変わったため、Babylon.js Editor v4系でないと開くことができません。
GitHub - flushpot1125/pingponggame_from_bjseditorv4beta2
そこで、当時のソースコードも参考にしつつ、このゲームをv5の環境で動くようにしていきます。
2. 新規プロジェクトを作る
まずは.exeまたは.appを開き、このような画面が出ることを確認します。
ここでNew Projectを押す>プロジェクトの作成フォルダを選択>実行すると、メインの画面が表示されます。
package managerをnpm or yarn、templateをnext.js, solid.js, vanilla.jsから選択できます。私はnpm, next.jsを選択しました。
なお、どのようなものがあるかは公式ドキュメントに記載されています。
npm: comes preinstalled with Node.js. Stable, reliable, and widely supported.
yarn: a popular alternative to npm, known for its speed and reliability.
pnpm: uses a clever content-addressable store to save space and speed up installs. Strict and deterministic.
bun: selecting bun means that the bun runtime is used instead of Node.js.
Next.js: a minimal template preconfigured to use Next.js. It includes a minimal setup with a single page and a simple scene.
SolidJS: a minimal template preconfigured to use SolidJS. It includes a minimal setup with a single page and a simple scene.
Vanilla: a basic template suitable for custom setups.
Babylon.js Editor Documentation
開くとこのような画面になります。左側のGraphと書かれているエリアは、現在のシーンに表示されているオブジェクトの一覧です。
3. ステージを作るため、メッシュを配置する
先ほどの画面から開始します。Graph Viewの中にある"box"を削除し、Add > Box Meshで新しいBoxを追加してWallLeftとします。
v5.1.3時点ではGizmoがないため、配置には思ったよりも時間がかかりました。（製作者の方にIssueとして相談したところ、そのうち対応いただけそうな感じでした）
参考のため、今回の配置場所のTransform情報は以下の通りです。
Wall Left
position x:-2.53, y:0, z:249.7
scaling x:5.05, y:0.1, z:0.39Wall Right
position x:0.16, y:0, z:-243.16
scaling x:5.05, y:0.1, z:0.39Wall Up
position x:232, y:0, z:9.76
scaling x:5.05, y:0.1, z:0.39Ground
x:0, y:0, z:0
scaling x:1, y:1, z:1
Width : 512, Height: 512
カメラの場合、位置だけでなく焦点距離とか色々と調整が必要です。このように設定しました。
このようにステージを上から見下ろす形にしています。ただ、前述のように今のEditorだと調整が難しく時間がかかりました。
なお、今回は最初から表示されていたFree Cameraを使っています。AddメニューからはArcRotateCameraも選べます。これは対象物を指定し、その周りを衛星のように回るカメラです。FreeCameraは空間内を自由に移動するカメラです。
今回はカメラが移動することはないのでどちらでもよかったのですが、最初から表示されている方を選びました。
4. マテリアルを設定する
次にWallとGroundにマテリアルを設定します。
Wallの１つを選択してInspectorのMaterialというカテゴリを表示します。"No Material"とある箇所に"+"ボタンがあるのでそこを選択して、Materialの種類を選択します。今回はStandard Materialを選択しました。
するとMaterialの設定情報が表示されるので、colorというカテゴリを選んで適当に色を調整します。
理由不明ですが、WallLeftをコピーしてWallRightとWallUpを作ったためか、WallLeftにマテリアルを設定したら他２つも同じマテリアルが割り当たっていました。
なお、今見ている時点では自分で作ったマテリアルを指定する処理はありませんでした。
(例：この後説明するGroundのMaterialをWallに指定することができない)
さらに、Groundにはマテリアルがすでに当たっています。テクスチャも割り当てられているので、これを変更してみます。
前回同様に、このテクスチャを使用させていただきました。
Editorの画面で"Import”というボタンを押してテクスチャをプロジェクトの中に取り込みます。
続けて、このテクスチャをGroundオブジェクトにドラッグします。
すると、どんなテクスチャとして割り当てるかを選択する画面が出ます。今回は基本であるAlbedo Textureにしました。
ここまですすめることで、ステージが完成しました。
5. キーボード入力でPlayerのブロックを左右に動かす
Project Viewの中でsrcフォルダを表示し、ここで右クリック > Add > Scripts > Class based を選択してtsスクリプトを新規作成します。ここではPlayer.tsとしました。
このPlayer.tsファイルをダブルクリックするとVisual Studio Codeで開きます。(VSCodeを入れていない場合は、別のエディタが開くのかもしれません）
開いたら、以下のコードを貼り付けます。
v4のときは "@onKeyboardEvent([65], KeyboardEventTypes.KEYDOWN)" のような専用の？処理があったのですが、今回は見つかりませんでした。そこでaddEventListenerを使って登録しました。
-186や204は現在のWallLeft、WallRightとPlayerが設置するギリギリの値です。環境によって変わります。
Editor上の▶︎ボタンを押すと、プロジェクトを実行できます。ここまで作るとこのような動きになります。
6. おわりに
実際に試してみると、思ったよりもv4で作ったものが活用できないことが多くて、この処理を作るだけでも思ったより時間がかかりました。
ただ、ある程度はつかめてきたので、このまま続けてみたいとおもいます。
