前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。
今回は、飛ばしたボールがブロックとぶつかったとき、ブロックが消えるまでを作ります。
使用した環境
・Mac OS 10.15.5
・Node.js 12.16.3
・Visual Studio Code 1.47.1
・Babylon.js Editor v4.0.0 beta2
1. ブロックを並べる
今回はEditor上でAdd Mesh、cubeを表示、cubeのposition、scalingを調整、を繰り返して８個並べました。もちろんUnityのInstantiate相当を使って、for文などで繰り返して生成させることはできます。しかし、私の調べた限りではソースコードから生成したオブジェクトはゲーム開始時に検索できなかったため、今回は直接並べました。
上側のウインドウがEditor上での編集用です。下側のウインドウは実行させたときの画面です。
2. 個別のブロックに物理エンジンと衝突判定をつける
block.tsというスクリプトを作って、このように書きました。
独特の書き方が多いですが、それぞれコメントを書いたのでご参考ください。Babylon.js Editorからは、８個のblockに個別に同じスクリプトをアタッチしました。
このスクリプトでは、blockからballを呼んでいます。Unityではpublic GameObject ball; とするか、GameObject.Find("ball")とすればよいのですが、Babylon.js Editorでは @fromSceneを使います。
まだこの書き方の仕組みがわかっていませんが、
@fromScene("Sceneの中に存在しているオブジェクト名称") _mesh : Mesh;
のように、@fromSceneの次の行に連続して変数宣言をすると、宣言された変数にSceneの対象オブジェクトがセットされます。
ここまで作って動かすと、このようになります。
3. おわりに
結果だけ書くとあっさりしているのですが、今回の「オブジェクトから別のオブジェクトを呼ぶ」、「特定のオブジェクトとの衝突を検知する」など、ゲームを作る時にやりたいことの情報がなくて、Babylon.js Editor自体のコードを見ながら試行錯誤してたので、時間がかかりました。
それっぽくなってきたので、次回は開始画面とかスコアとか作ってみようと思います。
