2013年3月26日(水)に弊社が開催したWebGL & Stage3D 勉強会 (第5回)にてパーティクルエフェクトツールの「Sparticle」についてのデモをさせていただきました。今回はそのフォローアップ記事になります。

1. Sparticleの紹介

Sparticleは、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作が特徴です。ツールで作成したエフェクトは、Away3Dライブラリを使用したコンテンツにに取り込むことができるため、3Dの展示デモや、ゲームコンテンツ、モバイルアプリなどの開発に利用できます。(SparticleはCheng Liao氏による実験的プロジェクトです。)

2. 本記事のゴール

energy3
Sparticleの肝である様々なビヘイビア(パーティクルに動きを与えるオブジェクト)に焦点を当て、アニメーションGIFとともに解説します。ビヘイビアをマスターすることで思うようにツールが操れるようになるでしょう。エフェクト作成の際の参考にしてもらえると嬉しいです。(画像はSparticleを利用していくつかのパーティクルを組み合わせて作成したエフェクトです。)

3. ビヘイビアについて

Sparticleでは1つのエミッターに様々な振る舞い(以下ビヘイビア)を追加しアニメーションを作りこんでいきます。各ビヘイビアにはプロパティが存在し、その値を調整していくことでモーションを調整していくという流れになります。Sparticleに用意されている17個のビヘイビアを解説していきます。

3-1 時間(Time)

最初から設定されている必須ビヘイビアです。設定項目は4つの項目があります。

  • パーティクルが発生する開始時間(startTime)
  • パーティクルの生存時間(duration)
  • ループの有無
  • 延滞時間(delay)

値の設定方法は3通りです。

  • 固定値
  • 範囲付きランダム
  • カーブ値 (設定した範囲の中で一様に分布する値)

time0

デフォルト設定 (開始時間ランダム、生存時間ランダム) 常に発生し続けるパーティクルになります。

time1

開始時間、生存時間を固定にした場合の例。同時に発生させ、同時に消滅させることができます。

pinTips

  • 車の排気ガスのようなエフェクトを作成する場合はループをオン、エフェクトの表示時間が決まっているものを作成する場合はオフにするとよいでしょう。
  • エフェクト作成の序盤では、ランダムは多用せずに大枠から作っていくとよいでしょう。

3-2 速度(Velocity)

パーティクルの速度(単位時間あたりの移動量)を設定します。 タイプによって様々な動きを作成できます。

タイプ1. 定数:ThreeDConst

velocity_const

X, Y, Z,の3方向の移動量を固定値で設定する方法です。全てのパーティクルが同じ方向に移動することになります。

タイプ2. コンポジット:ThreeDComposite

velocity_composit

X, Y, Zの3方向に対し、それぞれ独立の移動量を設定する方法です。設定方法は、固定値、範囲付きランダム、カーブ値(設定した範囲の中で一様に分布する値)を選択しそれぞれ設定する方法。動きを細かく設定する場合に用います。

タイプ3. 球体:ThreeDSphere

velocity_sphere

球体の中心から外側に向かって移動させる方法です。速度ビヘイビアの中では1番使いやすいと思います。原点プロパティ(center)を操作することで一定方向に噴射するようなエフェクトが作成できます。

タイプ4. シリンダー:ThreeDCylinder

velocity_cylinder

円柱の底面の中心から外側に向かって移動させる方法です。

pinTips

  • 速度を決めるということは、単位時間あたりの移動ベクトルを決めるということです。その移動ベクトルを様々な方法で決定するということが重要なポイントです。
  • 「球体」では、仮想球体の表面へのベクトルをランダムに抽出するという方法で速度(移動ベクトル)を設定します。そのため仮想球体の中心(center)をワールド座標の原点からずらすことで、例えば消火器からパーティクルが噴射するような動きなど(円錐のイメージ)、様々な効果を演出できます。
  • 内側半径(inner radius)外側半径(outer radius)を設定すると、移動量をランダムに抽出する際に、仮想球体の中身をどの程度含むかを細かく設定することができます。
  • このようなベクトルの指定方法は、他のビヘイビアでも頻繁に出てくる方法になります。

3-3 加速度 (Acceleration)

acceleration

パーティクルの加速度を設定します。速度ビヘイビアと同様にタイプを設定することで、様々な方法で加速度を設定できます。基本的な考え方は速度ビヘイビアと同様です。サンプルは、速度をシリンダーでY方向に、加速度を-Y方向に設定した例です。

3-4 位置 (Positoin)

position

パーティクルの1つ1つの初期位置を設定します。 こちらも速度ビヘイビアの決定方法と同様に、4つのタイプから選択し設定していきます。 例えば、球体を選択した場合、球体の内部の点からランダムに抽出し初期値位置を決定します。サンプルはパーティクルの発生位置をY方向にずらした例です。

pinTips

  • 内側半径(inner radius)、外側半径(outer radius)を近づけて設定すると球体の表面を覆い尽くすようにパーティクルを配置できます。(皮の部分にだけ残るという意味です)

3-5 ビルボード (Billboard)

パーティクルの向きを常にカメラ方向に向くように設定します。 ジオメトリータイプに平面(Plane)を設定したときに威力を発揮します。

pinTips

  • 軸使用(uses axis)をオンにすると、カメラ方向に向く際のプリミティブの回転を設定した軸固定で行うようになります。
  • X軸固定の場合、例えばプリミティブをX軸方向から串刺しにしてその軸を固定してカメラを向くといったことになります。そのためプリミティブを真横から見たとき(X軸から見たとき)カメラの方向を向きません。
  • 特に必要がない場合は軸使用はオフで良いでしょう。

3-6 追尾 (Follow)

follow2

パーティクルのエミッターを移動させた際に、各パーティクルをその場に留まらせるような効果を追加できます。ツール上で動作を確認したい場合は、タイムラインのmoveボタンを有効にすると確認できます。流れ星からこぼれる光の粒子のような表現を作成できます。

3-7 スケールトゥイーン (Scale Tween)

拡縮アニメーションを設定できます。 初期スケール、終了スケールを設定しアニメーションさせます。

pinTips

  • 位相(phase)を設定することで初期値にばらつきを加えることができます。拡大アニメーションが三角関数を用いて計算されているため、位相をランダムな角度値(0~360)にセットすることで、モーションにランダムさを加えることができます。(After Effectsなどのソフトではよく使われる手法です。)

位相あり

scale_tween_phase

位相なし

scale_tween_no_phase

3-8 セグメントスケール (Segment Scale)

segment_scale

キーフレーム毎に設定した値で拡縮アニメーションが設定できます。このビヘイビアをうまく使うことで好みのイージングを演出できます。エフェクト作成の終盤に使うとよいでしょう。

3-9 初期カラー (Initial Color)

パーティクルの初期カラーを設定できます。

  • 強度(multiplier):マテリアルのそのものが持つ色の強度を0~1の間で設定します。RGBの全てを0にすると真っ黒になり、すべて1にするとマテリアル本来の色になります。
  • オフセット(offset):マテリアルそのものが持つ色に対して、色を乗せるまたは減色させることができます。こちらは-255~255の間で設定するので注意が必要です。

3-10 カラートゥイーン (Color Tween)

color_tween

色変化するアニメーションを設定できます。 初期カラーの項目と同様に、強度オフセットをそれぞれ設定できます。

3-11 セグメントカラー (Segment Color)

セグメントスケールと同様に、キーフレーム毎に設定した値でカラーアニメーションが設定できます。

3-12 振動 (Oscillator)

oscillator

各パーティクルそれぞれに振動するアニメーションを設定できます。 振動する量として、オフセット(振動移動量)を3次元ベクトルとして設定します。設定方法は速度ビヘイビアの設定タイプと同様に定数、コンポジット、球体、シリンダーから選択できます。振動する方向を決めるというところがポイントです。

pinTips

  • 激しく震えるような効果を加えたいときには、長さ(duration)のプロパティに小さな値を設定し、単純な動きに自然なランダム加減を加えたいときは、長さに大きな値を設定するとよいでしょう。

3-13 回転トゥイーン (Rotation Tween)

rotate_tween

パーティクルに回転アニメーションを設定できます。

pinTips

  • ビルボードビヘイビアを設定している場合、Z軸のみ回転させるとよいでしょう。
  • 長さ(duration)ランダム(OneDRandom)に設定することでランダム加減を調整できます。

3-14 軌道 (Orbit)

orbit

パーティクルに弧を描くようなアニメーションを設定できます。半径(radius)は孤の大きさ、長さ(duration)には1周する時間を設定します。 pinTips

  • 長さ(duration)をランダムに設定すると渦のような効果を作成できます。
  • オイラー(eulers)を設定すると軌道の向きを設定できます。

3-15 二次ベジェ曲線 (Quadratic Bezier Curve)

quadratic_bezier

終点(end point)と、コントロールポイント(control point)を用いてパーティクルを曲線的にアニメーションさせることができます。サンプルは終点を定数に、コントロールポイントをSphereに設定した例です。

3-16 スプライトシートアニメーション (Sprite Sheet animation)

sprite_sheet

行数、列数を指定することで現在設定しているマテリアルをスプライトシートとして使用できます。サンプルはスプライトシート画像を使った炎エフェクトです。スプライトシート画像として作成していない画像でも使用することができるため、様々な用途に使うことができます。 Clouds8x8

各パーティクルにこちらのスプライトシート画像を使用し、カラートゥイーン、速度、加算を設定しています。

3-17 Rotate To Heading

rotate_to_heading

パーティクルそれぞれを原点を向くように回転させる効果を設定できます。ビルボードとの違いに注意するとよいでしょう。

4. エクステンション (Extensions)

Away3Dでの表示には対応していないSparticle独自のエフェクトです。現状2つのモードが用意されています。

4-1 陽炎エフェクト(heat haze effect)

extensions_heat2

適用したエミッターの背景に対して陽炎効果を追加できます。 現在設定できるプロパティありません。 サンプルは先ほど作成した炎のエフェクトに対して陽炎エフェクトを適用した例です。 レースゲームなどでカートの排気口部分に使うと良さそうです。

4-2 幻影エフェクト(phantom effect)

extensions_phantom2

適用したエミッターに残像効果を追加できます。 現在設定できるプロパティありません。流れ星や花火などを作る際に重宝するかもしれません。

おわりに

エフェクトツールには様々なアプローチが存在します。どういう仕組みで動いているのかを理解すると、思うようにツールを操れるようになると思います。パーティクルが動く仕組みをもっと知りたい方はAway3Dソースコードを追ってみるとよいでしょう。質問などありましたら、コメント欄またはTwitterで直接お返事いただけると嬉しいです。