23日目：花火から学ぶエフェクト作成(Effekseer編)

この記事はアドベントカレンダー「【VCI】テーマパークを作ろう 」の23日目の記事です。

今回の内容

最後に花火を作成していきたいと思います。前後篇の2回となります。
今回学ぶ技術は以下のとおりです
　・ Effekseer(エフェクト作成ソフト)でのエフェクト作成

エフェクト作成ソフトを導入する

エフェクトの作成は「Effekseer」というソフトを使用します。
以下のページが参考になるかと思います。
　・Effekseer (VCI対応)
　・Effekseer公式ドキュメント

effectの作成

Effekseerを起動すると1つだけNodeというものが作成されている画面になっているかと思います。この状態で左下の方にある再生ボタンを押して見てください。するとエフェクトが再生されます。
(最初ははただ四角が現れるだけです。)

この四角い画像の形や色を変えたり、数を増やしたり位置を変えたりしてエフェクトを作成します。

今回は以下の手順で修正していきます
　・画像＆色の変更
　・球状に配置されるように変更
　・爆発の動き(真ん中→外側へ移動)を作成
　・フェードアウトの設定＆調整

画像＆色の変更

まずは画像を変更します。描画共通>色歪み画像の読み込みより以下のような画像を読み込みます。(黒い部分は透過です。)
Effekseerのチュートリアルにも画像はありますが今回は自分で作成しました。
(Unityへ持っていく際に画像の相対パスが維持されている必要があるため、画像はプロジェクトフォルダの配下においてください)

次に色を変更します。描画タブ>全体色から色を黄色に変更します。
すると以下の様な黄色い光りが出来上がります。

球状に配置

花火の光は球状に広がっているため、先程作成した光を球状に配置します。

位置情報は位置タブ及び観点タブでいじることができます。
今回は球状に配置したいので角度の値を設定したいのですが、このままでは角度が変わっても原点から動かないので何も変わりません。
そのため、Unityで子オブジェクトを回転させたときと同じように、空っぽのNodeを作成してその下に先程のオブジェクトを移動し、位置をずらします。
(空Nodeは描画タブの一番上の項目を「無し」にすることで実現できます。)

次に回転タブより角度の設定をします。今回はランダムに配置されるようにしたいと思います。
親オブジェクトを選択肢、角度タブの一番上の項目を「角度・速度・加速度」に変更します。
すると先程までなかった振幅という項目が出てくるかと思います。こちらはランダムの幅をどれくらい持たせるかという値になります。

今回はx,y,zともに360度全てカバーする必要があるため180を指定します。
(振幅なので180を設定すると-180～180が入るようになります。)
この状態でエフェクトを再生すると火花ランダムに配置されているのがわかるかと思います

最後に共通タブ>生成数の部分の値を増やします。これでたくさんの火花が出現するようになります。
このままだとぽぱらぱらと順番に出てきてしまうので生成時間を小さい値にします。

すると以下の画像のように球状に配置されるようになります。

これで球状にする作業は完了です。

爆発の動き(真ん中→外側へ移動)を作成

花火は火花は通常真ん中から外側へ移動するため、その動きの設定をします。今回は子オブジェクトの設定となります。

まず位置タブの一番上の項目を「イージング」に替えます。こちらは始点と修正を設定できる機能となります。
先程入力していた移動量を今度は終点の部分に入力します。
これで完了でもいいのですが、実際には爆発のはじめは速く、終わりは遅く動くので、下の始点速度・終点速度を設定します。
完了すると以下のようになります。

フェードアウトの設定＆調整

花火の消え際をきれいに見せるためフェードアウトの設定をします。
描写>共通のところからウェードアウトの項目を指定します。今回は15としました。
ついでに再生時間が短かったため共通タブの生存時間の部分を増やし、消えるタイミングにばらつきを持たせるために振幅も設定しました。
結果、以下のような表示となりました。

最後に作成したNodeを複製して、外側の火花を作成したら完了です。
(外側の火花は大きさや数を変えています)

完了したらファイル＞出力＞標準形式で出力します。
[2020/12/19 追記]
Effexseer公式からv1.5以降であればエクスポートしなくてもプロジェクトファイルであるefkefcをそのままD&Dでも行けるというリプをいただきました。

実はEffekseer1.5のefkefcファイルならそのままUnityにD&Dできます

— Effekseer (@Effekseer) December 28, 2020

終わりに

いかがでしたでしょうか？
今回は使いませんでしたが、奇跡を描くようなエフェクトなども作れるため、うまく作成すればEffekseerで空中に書けるペンなども作ることができます
次回は作成したeffectをUnityに取り込み、スクリプトで再生していきたいと思います。