Babylon.js Editor v4.2.0で魔法剣エフェクトを表示させる方法

今度はBabylon.js Editorで炎の剣を作ってみます。

なお、以前も似たようなことを試したことがあります。

この時の違いは、以下の通りです。
・Babylon.js Editor v2.5 → v4.2 に変更

・作った炎の剣をキャラクタと一緒に動かしている

環境
・Babylon.js Editor v4.2.0

使用させていただいた3DCGモデルの剣

1. Babylon.js EditorにはParticle Systemがあるが、v4.2.0では動かない

以前の記事と同様にBabylon.js EditorにはParticleオブジェクトをViewの中にドラッグ&ドロップすると、Particleが調整できます。

そのはずなのですが、実行すると画面が真っ暗になってしまって動きませんでした。

ログをみるためにブラウザ起動させてDeveloper Toolで見ると、エラーログが出ています。

こちらについてはEditorのエラーと思われます。

ということで、今回はParticle Editorでエフェクトを作りました。Particle EditorとはPlaygroundから実行できる機能で、GUI上でParticleを調整し、出来上がったparticleはjson形式で出力することができます。

使い方については以前書いたこちらを参考にしてください。

参考までに、今回作った炎エフェクトです。長い１行になっていますが、このjsonを後述のParticleSystem.Parseで読むと、炎を表示させることができます。

一部ですが個別の説明です。
■剣のローカル座標に対してparticleを発生させる

"isLocal":true,

■発生方向(今回の剣の刃が-z方向のため)

"gravity":[0,0,-50]

■サイズ

    "minSize": 0.05,
    "maxSize": 0.2,

■発生する時間

    "minLifeTime": 0.1,
    "maxLifeTime": 0.7,

名前はなんでも良いですが、今回はflame.tsとして新しくスクリプトを作ります。flame.tsにはこのように記述します。

onUpdateでthis.particleSource.position = this.Sword.absolutePosition;とすることで、キャラクターが移動してもparticleの発生場所が常にSwordの刃の根元になるようにしています。

あとはBabylon.js Editorで実行するとこのようになります。

色々手探りが続きますが、次はキャラクタの腕に剣を持たせて振るところを作ろうと思います。