エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第3弾です。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。前回のエフェクトと同様に、作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

今回のお題:Fカーブを使った吹雪エフェクト

やってみよう:吹雪エフェクトの作成

エフェクトの構成図

エフェクトの構成図です。今回は大きく5つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

制作の流れ

各パーツ毎に制作の流れを解説していきます。

  1. 吹雪の軌跡(A)を作成
  2. 吹雪のパーティクル(A)を作成
  3. 吹雪の軌跡(B)を作成
  4. 吹雪のパーティクル(B)を作成
  5. 背景パーティクルを作成 ※背景パーティクルはサンプルファイルを直接ご覧ください。

Step1:吹雪の軌跡(A)を作成

吹雪の軌跡のノードツリー

まず「軌跡描画機能」を用いて吹雪の軌跡を作成していきます。軌跡にバリエーションを出すための空のノード「variation」を作成後、子ノードとして軌跡の各頂点を設定するためのノード「move_curve」を作成します。この「move_curve」に対して軌跡描画を行います。
※「軌跡描画機能」については第2弾の記事「エフェクト作成入門講座 Effekseer編 リング描画を使った乱れ斬りエフェクトの作成」でも解説していますので合わせてご覧ください。

吹雪の軌跡のFカーブ
次に今回のメインテーマである「Fカーブ」機能を用いて、軌跡を描くための曲線を作成していきます。「Fカーブ」(ファンクションカーブ)とは、アニメーションさせるパラメーターをベジェ曲線などを用いて視覚的に操作する機能のことです。Flash Professionalのような直感的な操作でアニメーションを編集できます。さらにEffekseerでは、アニメーションを再生中に「Fカーブ」のグラフを編集すると、エフェクトのモーション・形状などがリアルタイムに反映されます。

Step2:吹雪のパーティクル(A)を作成

吹雪のノードツリー

軌跡ノード「move_curve」に子ノード「random」を追加後、さらに位置をランダムに設定することで軌跡上にパーティクルが配置される効果を得ることができます。軌跡を作成した後、子ノードを作成するテクニックは覚えておくと色んな所で使えるでしょう。ノードエディターの特徴的な動作の1つです。

吹雪パーティクルのパラメータ
ランダム加減の設定です。「位置」に対して「加速度」を設定していないのは、パーティクルがバラバラになりすぎて煩雑になり、結果的によくわからないエフェクトになってしまうためです。「拡大率」にバリエーションを持たせ、新雪のパウダーのような雰囲気を演出します。ここまででこのようなアニメーションが作成できます。

吹雪のアニメーションテスト

Step3:吹雪の軌跡(B)を作成

軌跡のFカーブの違い

軌跡(B)については、軌跡(A)を複製することで作成します。Step1で作成した「variation」ノードを複製し、さらに「Fカーブ」を編集して異なる動きを作成します。軌跡(B)の方は、軌跡(A)より緩やかな動きを設定します。

Step4:吹雪のパーティクル(B)を作成

吹雪(B)のアニメーションテスト

吹雪(B)のアニメーションの様子です。今回のエフェクトは真横から見ることを想定していますが、このGIFアニメーションを見てわかるように、奥行きを設定することで曲線の動きが同一視されないようにしています。

Step5:背景パーティクルを作成

完成品のノードツリー

最終的なノードツリーはこのような構成となります。※背景のパーティクルはシンプルな作りとなっているため割愛します。

終わりに

完成

某映画に登場する雪の女王が繰り出すの吹雪のモーションエフェクトを作成しました。吹雪のエフェクトはパーティクルのシミュレーションソフトを使うとより高品質なものを作成できると思いますが、狙った通りの動きをするエフェクトを作るには時間と手間がかかると思います。Effekseerは「Fカーブ」機能を使うことで狙った通りのエフェクトを簡単に作成できるため短時間でのエフェクト作成に向いています。次回もエフェクト作成や演出作成の記事を投稿する予定ですのでぜひお楽しみに。

参考動画