これは
昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。
今日の参照
Particle
今日もパーティクルです。
昨日は基本的なパーティクルを作って再生させてみました。
今日はパーティクルが持っているパラメータを見ていくことにします。
Life time
Unityでもおなじみのライフタイムです。
パーティクルが生成されて消えるまでの時間を定義することができます。
// パーティクルのライフタイムを定義。min/maxで最小最大を決めらる particleSystem.minLifeTime = 1 particleSystem.maxLifeTime = 10;
Size
パーティクルの一つ一つの粒子のサイズをどのくらいにするかて定義できます
// パーティクルのサイズも定義可能 particleSystem.minSize = 0.1; // max/minスケールを定義している場合下のほうが優先される particleSystem.maxSize = 3;
全体のスケールだけでなくxyを定義することもできます
// パーティクルのサイズも変更可能 particleSystem.minScaleX = 0.1; particleSystem.maxScaleX = 3; particleSystem.minScaleY = 0.2; particleSystem.maxScaleY = 3;
Color
もちろんパーティクル自体の色の変更も可能です。
パーティクル生成時からブレンドされる2色と消える直前に変化する3つを定義できます。
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
カラーグラデーションの定義も可能です。
カラーグラデーションを使うと上で指定した3つの色の定義は無視されます。
// addColorGradient(0or1,色定義) // 0or1はこの間であれば自由にグラデーションカラーを設定できる。 //0は始まり1は終了を意味する particleSystem.addColorGradient(0, new BABYLON.Color4(1, 1, 1, 0), new BABYLON.Color4(1, 0, 1, 0)); particleSystem.addColorGradient(1.0, new BABYLON.Color4(1, 1, 1, 1)new BABYLON.Color4(1, 0, 1, 1));
BlendMode
ブレンドは以下のデモが良くできていたのでそちらを参考にします。
・BLENDMODE_ONEONE デフォルト設定。単純に色が追加される
・BLENDMODE_STANDARD パーティクルのアルファを使用する
・BLENDMODE_ADD color + particleColor * alphaで生成される
・BLENDMODE_MULTIPLY 乗算した色を追加
・BLENDMODE_MULTIPLYADD マルチパスレンダラー
emitRate
1秒間に放出するパーティクル量を設定することができます。
particleSystem.emitRate = 1000;
Direction
パーティクルを放出する方向を2方向設定することができます
また、パーティクル自体に重力を適用することができるので
Directionと合わせると紙吹雪を投げたような動きになる
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3); particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3); // パーティクルに重力を適用 particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
Rotation
パーティクルの回転速度や角度の定義もできます
// 回転の設定 particleSystem.minAngularSpeed = 100; particleSystem.maxAngularSpeed = Math.PI; particleSystem.minInitialRotation = 0; particleSystem.maxInitialRotation = Math.PI; particleSystem.addAngularSpeedGradient(0, 1.5);
作ってみたパーティクルはこんな感じになりました。
今日はここまで
次はParticleの続きをやります。