• 2015/08/20 エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成
エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成

エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成

どうもこんにちは、ICSの鈴木です。普段はエフェクト作成やアニメーション演出作成、ゲーム開発などの仕事をしています。

先月(7月15日)にバージョン1.0が公開され、同日開催された第1回ゲームエフェクト勉強会(株式会社さくらソフト主催。参加者108名)でも話題になった、エフェクトツール「Effekseer」(エフェクシアー)を使ったエフェクトの作成方法を紹介します。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。

今回使うエフェクトツール 「Effekseer」

150818_effect_logo

Effekseerは簡単に綺麗なビジュアルエフェクトを制作できるツールです。
Effekseerはゲーム向けの爆発やヒットエフェクトなど様々なエフェクトを制作できるフリーでオープンソースなツールです。 制作したエフェクトは2Dのアニメーションとして出力したり、3Dのエフェクトとしてゲームに組み込んで再生できます。
ランタイムを組み込むことでDirectXやOpenGLを用いたC++のゲームでエフェクトを再生できます。 それだけでなく、UnityPackageによりUnityでも再生できます。 また、Windowsだけでなく、Mac OS XやLinux、iOS、Android、Emscriptenといった様々な環境に対応しています。

エフェクト制作ツール「Effekseer」

Effekseerを使ったエフェクト制作の流れ

150818_effect_flow

こちらはEffekseerのエディターの画面です。エフェクトの調整をするためのインターフェースが複数並んでいますが、おおよそ次の手順でエフェクトを作成していきます。

  1. ノードツリーでパーティクルノードを作成する (※後に解説する各パーツのそれぞれが1ノードとなります。)
  2. 位置・角度・大きさ・移動速度などを設定する。
  3. 発生タイミング・生存時間などを設定する。
  4. テクスチャーや色、ブレンドモードなどを設定する。
  5. ビュワーで動きをチェックしながらパラメータの調整をする。 (2,3,4の操作をする。)
  6. Unityなどのランタイムに読み込む場合は、エディターから「標準形式(.efk)」に書き出す。
  7. Effekseerから直接スプライトシート画像に出力したり、GIFアニメーションや連番画像に出力することもできます。

スプライトシート画像出力を使って、HTML5 CanvasやWebGLの表現作成に利用してもいいでしょう。具体例な操作については、公式のチュートリアルとリファレンスありますので、そちらも合わせてご覧ください。

今回のお題：UVスクロールアニメーションによるマグマとフレアエフェクト

エフェクトのコンセプト

あなたは魔王を倒すために冒険をする世界の勇者です。ついにボスキャラとの対戦まで辿り着きました。ボスが必殺技を繰り出そうと周りのエネルギーを集め始めると、エネルギーは勢い良く一箇所に引き寄せられ、強大なマグマのパワーとなって燃え盛ります。マグマからは熱気(フレア)があふれ怪しい光を放っています…(続く)

そんなシーンで使われるエフェクトをイメージしました。マグマの熱気(フレア)をあえて青白い炎とすることで非日常の魔法っぽさを演出してみました。アニメーションやエフェクトを作るとき、コンセプトを考えることはとても楽しい作業です。

技術解説：UVスクロールアニメーション

エフェクトと3Dレンダリング

UVスクロールアニメーションの解説をする前に、エフェクトと3Dレンダリングの関係について触れておきます。エフェクトは一般的には3Dレンダリングによって描画されています。なぜかというと、

  1. 大量にエフェクトを描画してもパフォーマンスが落ちないようにするため。(3DレンダリングはGPUを使って描画するため。)
  2. 実際のゲームでは、エフェクト以外にも画面にキャラクターや背景を表示したり、物理演算などの処理をするため、エフェクトの処理はなるべく負荷のかからないようにしたいため。

このようにエフェクトと3Dレンダリングには密接な関係があります。続いて3Dレンダリングの仕組みを見て行きましょう。

3Dレンダリングの仕組み

150818_effect_uv

詳しく解説するととても奥が深いので、今回必要になる大事な部分だけにしぼってみていきましょう。画面に3Dモデルを表示するためには、必要な3つの要素は以下の3つです。

  1. 頂点データ：どんな形状をしているか。3Dモデルの各頂点の座標のデータです。
  2. テクスチャー画像：どんな模様をしているか。一般的には画像ファイルのことをさします。
  3. UVデータ(UV座標)：どの模様を3Dモデルのどの部分に描画するか。各頂点の座標と、テクスチャー画像上の位置(UV座標)がペアになったデータです。

UVスクロールアニメーションとは？

3Dレンダリングの要素の1つとして、「UVデータ」という要素が出てきました。このUV座標を動かすことによって、3Dモデルの模様を変化させるテクニックをUVスクロールアニメーションといいます。(「UVスクロール」「UVアニメーション」「UV流し」などということもあります)

UV座標のVの位置(縦位置)を動かすと縦方向にアニメーションされます。(左図)
UV座標のUの位置(横位置)を動かすと横方向にアニメーションされます。(右図)
150819_effect_uv_scroll 150819_effect_uv_scroll2

リング(円盤型のオブジェクト)にUVスクロールアニメーションを適用したところ。(左図)
さらにテクスチャーを変更するとゆらめく光のようなエフェクトができあがります。(右図) 今回はこのテクニックを多用しています。
150819_effect_uv_scroll3 150819_effect_uv_scroll4

UVスクロールアニメーションの仕組みをつかんでもらえましたか？　Effekseerを使えば、簡単にこのテクニックを使うことができます。

やってみよう：デモエフェクトの作成

デモエフェクトの構成

150818_effect_parts

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

デモエフェクトのダウンロード

制作の流れ

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

  1. スパークの作成 (パーティクルを利用)
  2. フレアの作成 (リング型モデルとUVスクロールアニメーションを利用)
  3. うねる光の作成 (3DモデルとUVスクロールアニメーションを利用)
  4. マグマの作成 (3DモデルとUVスクロールアニメーションを利用)
    ※輪郭グローと背景グローについてはサンプルファイルを直接ご覧くださいませ。

Step1：スパークの作成

150818_effect_step1

  1. パーティクルのテクスチャーに[もみじ型の形状]を利用し、動きの勢いを演出します。
  2. 仮想の球の表面上にパーティクルをランダムに配置します。
    ※Y軸固定のビルボードとすると、球の中心に角度が揃うようになります。
  3. [引力]機能を利用して中央に集まる動きを表現します。

150818_effect_spark3150818_Burst01

Step2：フレアの作成

150818_effect_step2

  1. After Effects CCを使ってフラクタルノイズテクスチャーを作成します。
    ※After Effects CCは一般的には動画を作成するソフトウェアですが、今回は静止画のテクスチャー画像を作成するために使っています。
  2. リング状のオブジェクトにフラクタルテクスチャーを適用します。
  3. テクスチャーのUVスクロールアニメーションを適用することで炎のゆらめきを表現します。
  4. 複数のリングをランダムな角度で配置して、もやもや感を表現します。

150818_effect_flare_mini150818_effect_texture1

Step3：うねる光の作成

150818_effect_step3

  1. 3Dモデルリングソフトウェア(※1)を使って球の3Dモデルを作成。球にフラクタルテクスチャーを適用し、球体の見え方を確認します。ここではStep2で使ったテクスチャーをそのまま再利用しています。
  2. メタセコイアの標準形式である mqoファイルをmqoToEffekseerModelConverter.exeを使ってEffekseer用モデルファイル(.efkmodel)に変換します。
  3. Effekseerに3Dモデルをインポートし、テクスチャーのUVスクロールアニメーションを適用します。
  4. 同じ球体を2つずらして配置し、スクロールの速度と方向をずらすことで表面のうねりを表現します。
  5. 描画のカリングを[両面表示]、ブレンドモードを[加算]とすることで、光が重なった部分にメタボール的な表現(※2)を演出できます。
    ※1. Metasequoia(メタセコイア)を利用。
    ※2. 複数の物体の重なったときにお互いが引き合うようにくっつき、滑らかなに繋がること。

150818_effect_cloud2150818_effect_texture1

Step4：マグマの作成

150818_effect_step4

  1. After Effects CCを使って燃え盛るマグマのフラクタルテクスチャーを作成します。
  2. Step3の流体エフェクトで使った球体の3Dモデルを複製し、マグマのフラクタルテクスチャーを適用します。
  3. UVスクロールアニメーションを適用し、動きを調整します。ここではUVの動きと回転の動きを組み合わせています。

150818_effect_magmamagma_mini

おわりに

今回、EffekseerでUVスクロールアニメーションの手法を用いて様々なエフェクトパーツを作りました。UVスクロールアニメーションは、簡単なステップで目を引く演出効果が得られるため、エフェクトの定番技として様々なゲームに利用されています。水面の揺らめきを表現する際によく使われるStep4のエフェクトが個人的には好みです。エフェクトツール「Effekseer」が気になった方は、アニメーションや演出力UPのきっかけとしてチャレンジしてみてはいかがでしょうか？　今後、ICS LABにてエフェクトや演出作成の記事を連載していく予定ですので、ぜひチェックしていただけると嬉しいです。

おまけ：Unityとの連携

今回のエフェクトはEffekseer上で作成し、Unityにインポートをしています。Unityへの読み込み方法はいたってシンプルです。公式サイトにUnityとの連携方法が記載されていますので合わせてご覧ください。

150818_effect_all3
※Unityにインポートして再生したところ

GIFアニメ―ションのキャプチャ

Unityの画面をキャプチャーしてGIFアニメーションにする際、TweetMediaというプラグインを使用しました。制作したエフェクトをTwitterなどで使いたいときに大変便利なのでおすすめです。(Effekseerからも直接GIFアニメーションに出力できます。)

参考サイト

著者紹介

鈴木 克史

ICS取締役。千葉大学理学部化学科卒。新潟県出身。インタラクティブディレクターとしてゲーム制作に携わる。得意分野は3Dを使ったプロモーションサイト制作、エフェクト演出、最適化等。 1児の父。最近の趣味は週末子どもと遊ぶこと。特技はジャグリング。

著者をフォローしよう！

関連記事

いつもご覧頂きありがとうございます

ICS LABの更新情報はFacebookやRSSで配信しています。よければフォローしてみませんか？

ICS INC.