株式会社ICSEffekseer5013エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第3弾です。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。前回のエフェクトと同様に、作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。今回のお題:Fカーブを使った吹雪エフェクトやってみよう:吹雪エフェクトの作成エフェクトの構成図です。今回は大きく5つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメーター設定値などはサンプルファイルを直接ご覧ください。制作の流れ各パーツ毎に制作の流れを解説します。※背景パーティクルはサンプルファイルを直接ご覧ください。GitHubGitHub(ics-creative/150916_effect_samples)Step1:吹雪の軌跡(A)を作成まず「軌跡描画機能」を用いて吹雪の軌跡を作成します。軌跡にバリエーションを出すための空のノード「variation」を作成後、子ノードとして軌跡の各頂点を設定するためのノード「move_curve」を作成します。リング描画を使った乱れ斬りエフェクトの作成」でも解説していますので合わせてご覧ください。次に今回のメインテーマである「Fカーブ」機能を用いて、軌跡を描くための曲線を作成します。「Fカーブ」(ファンクションカーブ)とは、アニメーションさせるパラメーターをベジェ曲線などを用いて視覚的に操作する機能のことです。Professionalのような直感的な操作でアニメーションを編集できます。Effekseerでは、アニメーションを再生中に「Fカーブ」のグラフを編集すると、エフェクトのモーション・形状などがリアルタイムに反映されます。軌跡ノード「move_curve」に子ノード「random」を追加後、さらに位置をランダムに設定することで軌跡上にパーティクルが配置される効果を得ることができます。軌跡を作成した後、子ノードを作成するテクニックは覚えておくと色んな所で使えるでしょう。ノードエディターの特徴的な動作の1つです。ランダム加減の設定です。「位置」に対して「加速度」を設定していないのは、パーティクルがバラバラになりすぎて煩雑になり、結果的によくわからないエフェクトになってしまうためです。「拡大率」にバリエーションを持たせ、新雪のパウダーのような雰囲気を演出します。ここまででこのようなアニメーションが作成できます。軌跡(B)については、軌跡(A)を複製することで作成します。Step1で作成した「variation」ノードを複製し、さらに「Fカーブ」を編集して異なる動きを作成します。軌跡(B)の方は、軌跡(A)より緩やかな動きを設定します。吹雪(B)のアニメーションの様子です。今回のエフェクトは真横から見ることを想定していますが、このGIFアニメーションを見てわかるように、奥行きを設定することで曲線の動きが同一視されないようにしています。最終的なノードツリーはこのような構成となります。※背景のパーティクルはシンプルな作りとなっているため割愛します。終わりに某映画に登場する雪の女王が繰り出すの吹雪のモーションエフェクトを作成しました。吹雪のエフェクトはパーティクルのシミュレーションソフトを使うとより高品質なものを作成できると思いますが、狙った通りの動きをするエフェクトを作るには時間と手間がかかると思います。Effekseerは「Fカーブ」機能を使うことで狙った通りのエフェクトを簡単に作成できるため短時間でのエフェクト作成に向いています。次回もエフェクト作成や演出作成の記事を投稿する予定ですのでぜひお楽しみに。平成31年2月19日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。