Babylon.js Editorでスクリプトからオブジェクトを制御する方法

Babylon.js EditorはGUIベースでオブジェクトの配置ができます。また、スクリプトを追加してソースコードでも制御できます。

しかし、公式HPにはごく簡単な例しか書いてなかったので、今回はスクリプト制御したときに使いたい例をいくつか紹介します。

動作確認環境は下記の通りです。

• Mac OS 10.14.1

• Babylon.js Editor 2.5.0

1. スクリプトを新しく設定する

Babylon.js Editorを開き、Tools / Code Editorを選択します。次に、Graph View(UnityのHierarchy Viewに相当)でスクリプトをアタッチしたいオブジェクトを選択します。

次に、Editor下部に表示されているCode Editorのウインドウで「Add New Script」をクリックします。

新しいスクリプトの名前を設定する画面が出るので、適当に名前をつけます。上の画像ではParticleという名前をつけたファイルが追加されています。

ここで、スクリプト名をクリックしてから、「Open Code Editor」をクリックすると、Editorが開きます。

2. Babylon.js Editorで追加したオブジェクトをスクリプトから取得する

Unityで言う "GameObject.Find"です。これがないとスクリプト制御はほとんどできません。オブジェクトを取得するには、Babylon.jsの APIである"getMeshByName"を使います。

例えば、前回も使ったswordモデルの柄の部分のオブジェクトを取得する例です。オブジェクトの名称はGardeなので、このように書きます。

export default class Script implements IScript {
    // Public members
    public blackColor = new Color4(1, 1, 0, 1);
    public gardemesh;
}
//省略
    public start (): void {
       this.gardemesh = scene.getMeshByName("Garde");
    }
   public update (): void {
       this.gardemesh.rotation.z +=0.01;
    }
//省略

start()とupdate()は Unity C#と同じ使い方です。これで、下記の動画のように、柄が刃と同じ軸方向に回転します。

3. Babylon.js Editorで追加したParticleSystemをスクリプトから取得する

本当はUnityのGetComponentに相当する仕組みを見つけたかったのですが、今のところ見つかってません。PartcleSystemについては個別に方法を見つけたので記載します。

Babylon.js EditorでParticleSystemを追加すると、そこにはIDが振られます。getParticleSystemByIDメソッドを使うと、指定したIDのParticleSystemを取得することができます。

例えば、以下のように書きます。ここでは、swordから出ている炎のParticleSystemのIDを"flareId-1"と変更しています。

    public start (): void {
      var particleFlare = scene.getParticleSystemByID("flareId-1");
       particleFlare.stop();
    }

IDはParticleSystemのInspectorを見ると上の方に書いてあります。最初はgofi1f9rhgb-fedhjgirのようなランダムな文字列が設定されています。最初は、これをコードにコピペしようと思ったのですが、なぜかctrl+Pしてもペーストされなかったので、わかりやすい文字列に変えました。

下記の動画では、stop()を呼ぶことでParticleSystemをスクリプトから停止させています。

4. 補足

4.1 Play and Debugで再生すると、Google Developer Tool相当が表示されるのでDebugができる

動画の中でも使っていますが、console.logを表示させたり、エラーが出た場合の詳細をみられるので、Play and Debugを使うとよいです。

4.2 スクリプトをアタッチされたオブジェクト自身を制御したい場合、"mesh"を使うことができる

公式HPではSphereにスクリプトをアタッチして、update()の中で以下を呼ぶことで、Sphereを回転させていました。meshという言葉がUnityのthis.gameObjectに相当しているようです。

mesh.rotation.y+=0.1;

4.3 関数をまたがって変数を宣言するには、publicをつける

また、同じスクリプトの中で使用するときは、thisをつけます。そうしないと、Code Editorでエラーが出ます。

5. 終わりに

今回の内容は、UnityでのGameObject.FindとGetComponentに近いので基本的な内容です。ただ、これらがうまく見つけられなかったので整理してみました。Unityに慣れているともどかしいことも多いですが、新しい技術を探索するのは楽しいものですね。

実はBabylon.js EditorのCode Editorで書くスクリプトの書式は、普通にindex.htmlなどに書くときの書式と異なっています。この辺り、どういうやり方であればよいかがまだ理解できてないので引き続き調べてみようと思っています。