【KMCAdventCalendar2016】アプリ・ゲーム制作者のためのエフェクト制作入門(Effekseer)
この記事は KMC Advent Calender 2016 8日目の記事です。
7日目の記事はid:yu3marsさんのアニメ系新番組や単発番組の情報をカレンダーにするプログラム「しょぼかるフィルター」を作った - yu3mars’ diaryでした。
私たちを取り囲むあらゆるプロダクト。
例えばユーザーの入力を受け取るボタン一つとっても、
入力に対してインタラクティブなエフェクトが現れると、それだけでもユーザーエクスペリエンスの向上に繋がります。
些細な体験の違いが、大きな体験の違いをもたらします。
このようなエフェクトをアプリ・ゲームクリエイターがクリエイトするツールの入門としては、フリーでオープンソースとして提供されており、UnityやDirectXでの簡単な利用へのサポートも備えるEffekseerは最も美しいソリューションのうちの一つでしょう。
導入
Effekseer公式サイトのダウンロードから最新版のEffekseerをダウンロードし解凍すれば、あとはeffekseer122/toolからEffekseer.exeを起動するだけで、必要なものはあなたの手元に揃います。
インストール不要で軽量なEffekseerは現代のアジャイルな開発の要請にもよくマッチした優れたツールです。
入門
今回はこのようなエフェクトを作ってみましょう。
Effekseer.exeを起動するとこのようなウィンドウが立ち上がります。項目の配置などは画像と違うかもしれませんが、「ウィンドウ」タブからそれぞれの項目を呼び出すことができます。
画面左下の再生ボタン（三角のボタン）を押してみましょう。無駄のない洗練されたデザインのスクエアがあなたの目の前に現れます。
ビュー画面では右クリック→ドラッグで視点の角度変更、マウスホイールで視点の遠近の変更と直感的な操作が可能です。
次に、ウィンドウ中央上部のノードツリーと対話してみましょう。
ノードツリーの項目が無い場合は「ウィンドウ」から「ノードツリー」を開いてください（以下項目が見当たらない場合は同様の操作で開いてください）。
ノードツリー内には"Root","Node"が存在しているはずです。"Node"をクリックしてみましょう。世界が広がります。
右下の"描画共通"をクリックしてみましょう。
描画に用いる画像が設定されていないのがわかります。
画像が設定されない場合、デフォルトで白い正方形が描画されます。
つまり現在の"Node"の設定は「デフォルトの正方形を描画するノードを座標(0,0,0)に生成する」になっているのです。
画像を差し替えてみましょう。
例えばこのような羽根のようなテクスチャです。加算ブレンドを前提とするので背景は黒あるいは透過色が望ましいです。テクスチャの入手は作る*1のもインターネットで探すのも貴方次第です*2。
画像を差し替えると洗練された白い正方形が羽根のテクスチャに姿を変えます。ブレンドを「通常」から「加算」にすると、黒い背景が透明になるのがわかるはずです。
色を重ね合わせる際に色情報を「加算」することで#000000の黒は無視され、重なった部分は白に近づき、光のような表現を実現します。
エフェクトを作っていきます。実現したいエフェクトをイメージしましょう。クリエイティヴなアクティビティーにイメージは欠かせません。
先ほどの例を見ると
「たくさん」の"粒"が「周囲」から"生成"されて「中心」に”移動”して"消えている"
のがわかります。これを一つ一つ実現していきましょう。
「たくさん」の"粒"
「共通」の項目を眺めてみましょう。
まずNodeにあなたの好きな名前を与えましょう。集まるイメージから"gether"とするのも1つの選択肢です。
"生成数"の項目を見ると生成数の入力欄の横にチェックボックスが見えます。
横にスクロールすると確認できますが、これは生成数を無限にするためのチェックボックスです。
今回は「たくさん」作りたいので、無限にしてしまいましょう。チェックします。
たくさんの羽根が重なり、羽根の画像が白く光ったような変化が見て取れるはずです。
これで、「たくさん」の"粒"の準備が整いました。
「周囲」から"生成"
「生成位置」の項目を選択します。プルダウンメニューを[点]から[球]に変更し、【半径】の[中心]を3とします。これだけでは、半径3の球面上の一点からしか生成されません。【X軸角度】【Y軸角度】の[振幅]を180とします。これによって、球面上のあらゆる点からランダムに羽根が生成されるようになります。
羽根がすべて同じ方向を向いていることに気が付きます。このようなエフェクトの場合、羽根の先が中心を向いているのがグローバルスタンダードです。「生成位置」の【生成角度に影響】にチェックを入れます。これによって羽根の画像の角度が生成位置に依存するようになります。
もしかするとここで落胆するかもしれません。羽根の角度は変わらないためです。でも大丈夫。
「描画」の項目を眺めましょう。【配置方法】が[ビルボード]になっているのがわかります。これは粒の角度情報によらず、画像を正立方向で描画するという設定です。これを[Y軸固定]にしましょう。あなたの眼前に新たな世界が開けているはずです。
「中心」に"移動"
「ふるまい」の項目の一番下の【ターゲット】を確認します。x,y,zの値がすべて0であることを確認します。そうでない場合、0に変更します。これは、移動先を指定する１つの手段です。
次に「絶対位置」の項目を開き、プルダウンメニューから[引力]を指定し、[引力]の値を0.03程度に設定します。
これによって、ターゲットで指定した座標に向かって羽根が移動するようになります。
"消える"
羽根が中心で渦巻いているのが確認できます。これは羽根の生存時間が長すぎるためです。「共通」の項目から[生存時間]を調節します。15程度が良いでしょう。
ことがうまく進んでいれば、このような状態になっているはずです。
イメージから列挙した要素は実現しましたが、物足りなさがあります。もう少しナウいエフェクトにするためには何が必要でしょうか。
色をつける
「描画」の項目から色をRGBAで指定できます。あなたのイメージをここに映しましょう。
数を増やす
「共通」の項目を見に行きます。ここで設定した[生成数:無限]は生成数上限であって生成の頻度ではありませんでした。生成の周期である[生成時間]を調整します。0.3程度がいいでしょう。
羽根が中心に近づくにつれて小さくなるようにする。
「拡大」の項目を開き、プルダウンメニュー[イージング]を設定します。イージングとは、粒の生成時と消滅時の状態を指定することで、その間をなめらかに変化させる設定です。画像のように設定してみましょう。
羽根が細く変化する様子が確認できます。また、ここで最初に設定したテクスチャがそれほど重要でないことも理解できます。
ただしもちろんデフォルトの正方形や純粋な円などでは厳しいものがあります。
完全に余談ですが、記事をここまで書いた時点でブラウザがクラッシュして、運悪くバックアップも拾えなかったので書き直しがありました。悲しみに包まれています。
まだ物足りないと思いませんか。
よりエクストラな要素を加えていきましょう！
細かな羽根を追加する
「ノードツリー」の項目から"gether(あるいはあなたがつけた名前)"を右クリックしコピー、"Root"をクリックして右クリックし貼り付けを行いましょう。
getherが複製され羽根の数が倍になりました。
新しく生まれたgetherに以下の変更を行いましょう。すべてこれまでの手順に含まれるので簡潔にとどめます。復習も兼ねて確認してみましょう。
- 生成される球面の半径を4に
- 拡大率が[x:0.3,y:0.5,z:0,5]→[x:0.1,y:0.5,z:0.5]と変化するように
- 生存時間を10に
- 色をわずかに違うものにする
ここで新たなノードを生成します。ノードツリー上から"Root"を選択し右クリックメニューから[ノードの追加]を選択すると、新たなノードが生成されます。
テクスチャを以下の画像に変更します。
ブレンドを加算にし、あなたの好みのカラーに変更します。3倍ほどの大きさに変更します。これらの手順について、あなたはもう馴染みがあるはずです。
完成は近いです！
最後に、よく見ると作例には周囲からうっすらと衝撃波のようなものが中央に向かって集まっているのがわかるはずです。
例えばこのようなテクスチャを使います。
しかしながら、あなたはもうここまでの知識で十分に作れるはずです。
ぜひ挑戦してみてください。
エフェクトの利用を通してコンペティターとの差別化を図り、グローバルに活躍できるユニークな人材を目指しましょう。
このブログで用いている所謂"ビジネス語"はなんとなくで書いています。参考にしないようお願いします。
明日はhatsusatoさんの記事です。
宣伝①
KMCではお絵かきAdventCalendarも同時進行で進められています。
1日目、15日目に僕も参加しているのでぜひご覧ください。
宣伝②
KMCでは多種多様なモノづくりや勉強・娯楽・研究が行われています。
誰でも参加可能！詳細はホームページをご覧ください。
ここでは書ききれなかったエフェクトの制作講座も実施予定です。
