Effekseerで少しエフェクトを作ってみた

この記事はCCS Advent Calendar 2018の2日目の記事です。
昨日の記事：CODE THANKS FESTIVAL 2018 参加記 by kakira(@kakira9618)

はじめに

こんにちは、まっそうめん(@massoumen)です。
今年もCCSアドベントカレンダーがあるという事で、せっかくなので記事を書きます。
内容はEffekseerというソフトウェアを用いた簡単なエフェクト制作の話です。

この記事の流れ

• エフェクトとは
• Effekseerとは
• 作ってみた1：風魔法っぽいの
• 作ってみた2：たまに見かける気がするアレ
• 出力について

エフェクトとは

この記事で言うエフェクトというのはゲーム内で用いられる演出の事で、例えば攻撃が当たった時に出る光とか、魔法を使うと出てくる雷とか、画面がきらきらぴかぴかする何かとかそういう奴全般を指します。

趣味のゲーム制作において「なんか地味だな…」って思う時の理由の8割は演出不足が原因で(要出典)、そういう時にはとにかくエフェクトや効果音を盛ると解決する場合があります。¹

例えば敵を倒した時、敵画像の描画をやめる事になると思いますが、単に描画をやめるだけだと非常に味気ない感じがします。

ここでちょっとしたエフェクトを足す事で、見栄えが良くなります。(良くなったと信じてる)

もちろんどんなエフェクトを足すかで結構印象は変わると思います。
さっきのは単に小さな円がたくさん出現した後少しずつ透明になり消えるという非常にシンプルなものですが、これだけでもあるのとないのとではだいぶ変わると思います。

シンプルなものならゲーム制作用のライブラリの描画機能を利用したりすればプログラム上でエフェクトを作ったりもできる(乱数や透明度あたり?)と思いますが、この記事ではEffekseerというエフェクト制作用のソフトウェアを紹介します。

Effekseerとは

Effekseerはエフェクト制作ツールの1つです。無料で使う事ができ、Unity上などで作成したエフェクトを再生するプライグインなども用意されています。

他のエフェクト制作ツールを全然触ってないのでなんとも言えないのですが、機能がシンプルなのでエフェクト作りちょっと試してみたい的な人にはちょうどいい気がします。

使い方に関しては公式チュートリアルを1周するのと付属してるサンプルエフェクトの値をいじったりすれば多分大丈夫です。(当たって砕けろ精神)
サンプルエフェクトを眺めてるだけでも結構楽しいです。

作ったみた1：風魔法っぽいの

ここからは試しに作ってみた奴を紹介します。
僕自身は特に絵とか描けないタイプの人なので、「絵とか描けなくてもこれくらいのエフェクトなら作れるんだな」くらいに思っといてください。

1つ目は風魔法っぽいのをイメージして作った奴です。

制作したゲーム内だとこんな感じになります。

処理の内容としては、様々な角度のリングを生成し拡大しながらフェードアウトさせています。
(あと、各リングが回転しています)

ノード構造は以下のような親子関係になっていて、親ノード1つに対しリングが1つ生成されます。
親ノードを30個生成するようになってるので、リングも30個生成されます。

親ノードは生成時の角度がランダムになっていて、これにより様々な角度のリングが生成されます。
また、親ノードは時間の経過に合わせて拡大し、これに合わせてリングも拡大されます。
親ノード自体は描画しないので、結果的に様々な角度のリングが生成後拡大していきます。

細かいパラメータは以下のようになります。(変えた記憶のないものは省略)

• parent

ウインドウ	値の名称	値
共通	生成数	30
共通	生存時間(中心, 振幅)	35, 5
共通	生成時間(中心, 振幅)	0.5, 0
回転	(一番上のリスト)	角度・速度・加速度
回転	角度(中心, 振幅)	(0, 0, 0), (180, 180, 180)
拡大	(一番上のリスト)	イージング
拡大	始点(中心, 振幅)	(0.5, 0.5, 0.5), (0.125, 0.125, 0.125)
拡大	終点(中心, 振幅)	(1.5, 1.5, 1.5), (0.25, 0.25, 0.25)
拡大	始点速度	高速2
拡大	終点速度	低速3
描画	(一番上のリスト)	無し

• ring

ウインドウ	値の名称	値
共通	生成数	1
共通	生存時間(中心, 振幅)	30, 0
回転	(一番上のリスト)	イージング
回転	始点(中心, 振幅)	(0, 0, 0), (0, 0, 0)
回転	終点(中心, 振幅)	(0, 0, 270), (0, 0, 90)
回転	始点速度	高速2
回転	終点速度	低速3
描画共通	色/歪み画像	Particle02.png2
描画共通	ブレンド	加算
描画共通	フェードイン	有り
描画共通	フレーム数	10
描画	(一番上のリスト)	リング
描画	頂点数	64
描画	表示角度(中心, 振幅)	ランダム(210, 0)
描画	外輪	イージング
描画	始点(中心, 振幅)	(1.75, 0), (0, 0)
描画	終点(中心, 振幅)	(1.5, 0), (0, 0)
描画	始点速度	高速2
描画	終点速度	低速3
描画	内輪	イージング
描画	始点(中心, 振幅)	(1.25, 0), (0, 0)
描画	終点(中心, 振幅)	(1.5, 0), (0, 0)
描画	始点速度	高速2
描画	終点速度	低速3
描画	外輪色(R, G, B, A)	(0, 255, 0, 0)
描画	中心色(R, G, B, A)	(0, 0, 0, 0)
描画	内輪色(R, G, B, A)	(0, 255, 0, 0)

地味に設定項目が多いですが、だいたいの値は最終的に好みの問題かと。

作ってみた2：たまに見かける気がするアレ

次は以下のような奴を紹介します。

動画とか見てるとたまに見かける気がするんですが、何て呼べばいいのか分からない奴です。
名前が付いているかどうか定かではないんですが、知っている人がいたら教えてください(

制作したゲーム内だとこんな感じになります。

このエフェクトもリングによる描画が中心のエフェクトとなっています。
(リングを回す以外何もしていないような…?)
1つ目のエフェクトと違い親子関係は使っていませんが、地味にノード数が多いです。

各ノードと実際の描画の対応は以下のようになってます。

今回はサンプルのテクスチャではなく、以下の円画像を用いました。
(単純な白い円で、背景が透明化されているだけですが…)

↓背景が白くて何も見えないと思います

↓保存すればわかると思いますけどこんな感じです

パラメータについてですが、center, sub_circle, main_circleはそれぞれ一部の値を除き共通の値を用いているので、それぞれ1つ作った後コピペしてから一部の値を変えて作成します。
また、今回は視点を指定します。ウインドウ->視点操作からx軸回転とy軸回転の値をそれぞれ90と0に設定して下さい。

• center(共通の値)

ウインドウ	値の名称	値
共通	生成数	1
共通	生存時間(中心, 振幅)	180, 0
共通	生成時間(中心, 振幅)	1, 0
拡大	(一番上のリスト)	拡大率
描画共通	色/歪み画像	(用意した円画像)
描画共通	フェードイン	有り
描画共通	フレーム数	15
描画共通	フェードアウト	有り
描画共通	フレーム数	15

• center(異なる値)

ウインドウ	値の名称	1の値	2の値
拡大	拡大率	(10.5, 10.5, 10.5)	(3, 3, 3)
描画	全体色(R, G, B, A)	(103, 255, 250, 120)	(255, 255, 255,255)

• sub_circle(共通の値)

ウインドウ	値の名称	値
共通	生成数	1
共通	生存時間(中心, 振幅)	180, 0
共通	生成時間(中心, 振幅)	1, 0
回転	(一番上のリスト)	角度・速度・加速度
描画共通	フェードイン	有り
描画共通	フレーム数	15
描画共通	フェードアウト	有り
描画共通	フレーム数	15
描画	(一番上のリスト)	リング
描画	配置方法	固定
描画	頂点数	64

• sub_circle(異なる値)

ウインドウ	値の名称	1の値	2の値	3の値
回転	角度(中心)	(-25, 45, 0)	(-45, 135, 0)	(90, 135, 0)
回転	角速度(中心)	(0.1, 0, 0)	(0.05, 0, 0)	(0, 0, 0)
描画	外輪(位置)	(6, 0)	(4, 0)	(4.6, 0)
描画	内輪(位置)	(5.8, 0)	(3.8, 0)	(4.5, 0)
描画	外輪色(R, G, B, A)	(255, 255, 255, 0)	(255, 255, 255, 0)	(103, 255, 250, 100)
描画	中心色(R, G, B, A)	(103, 255, 250, 225)	(103, 255, 250, 225)	(103, 255, 250, 150)
描画	内輪色(R, G, B, A)	(255, 255, 255, 0)	(255, 255, 255, 0)	(103, 255, 250, 100)

• main_circle(共通の値)

ウインドウ	値の名称	値
共通	生成数	1
共通	生存時間(中心, 振幅)	180, 0
共通	生成時間(中心, 振幅)	1, 0
回転	(一番上のリスト)	角度・速度・加速度
描画共通	フェードイン	有り
描画共通	フレーム数	15
描画共通	フェードアウト	有り
描画共通	フレーム数	15
描画	(一番上のリスト)	リング
描画	配置方法	固定
描画	頂点数	64
描画	外輪色(R, G, B, A)	(255, 255, 255, 225)
描画	中心色(R, G, B, A)	(255, 255, 255, 225)
描画	内輪色(R, G, B, A)	(255, 255, 255, 225)

※main_circle4のみ色のAの値が175

• main_circle(異なる値)

ウインドウ	値の名称	1の値	2の値	3の値	4の値	5の値
回転	角度(中心)	(90, 0, 0)	(90, 180, 0)	(90, 90, 0)	(90, 270, 0)	(90, 45, 0)
回転	角速度(中心)	(0, -4, 0)	(0, 4, 0)	(0, -3, 0)	(0, -3, 0)	(0, -3, 0)
描画	外輪(位置)	(2.4, 0)	(1.65, 0)	(1.05, 0)	(3.45, 0)	(4.6, 0)
描画	内輪(位置)	(2, 0)	(1.35, 0)	(0.95, 0)	(3.35, 0)	(4.4, 0)

ひたすら用いたパラメータを書き連ねましたが、色とか大きさとかだいたいの値はお好みで大丈夫かと。

出力について

Effekseerでは完成したエフェクトの出力の仕方がいくつかあります。
プラグインを使ってUnity上で再生したりする場合は標準形式(.efk)で出力する事になると思います。
また、プラグインで再生するのではなく連続した画像(.png)として出力し利用する場合はウインドウ->録画を選択し、位置や保存形式を決めます。

おわりに

Effekseerというエフェクト制作用のソフトウェアがあって、活用すると制作するゲームの見栄えが良くなるかもという紹介でした。

明日はとっちーさん(@yoooomaruuuu)の記事です。
よろしくおねがいします。

1. ゲーム速度を5倍速にすると解決する説もある。 ↩

2. Sample(00_Basic)フォルダ内のTextureフォルダ内にある画像 ↩