1枚のイラストからメッシュを生成し、豪華なエフェクトを利かせたスプライトアニメーションをつくる！ | 特集

作業手順1：SPARK GEARでのエフェクトの組み上げ

本ツールはアセットライブラリと呼ばれる大量のテクスチャやモデルデータ、エフェクトパーツがライブラリになっています。これらを組み合わせて調整していくだけでも高品質なエフェクトを制作することが可能です。

1 Spineデータのアニメーション再生

Spineのデータを読み込む際には、プレビューウインドウの設定からSpineのデータを設定することで【画像左】、アニメーションを再生させることができます【画像右】。いくつかモーションが入っている場合はアニメーション名から再生させたいモーションを選択します。SpriteStudioのデータを再生する場合も上記と同じ手順です

2 アセットライブラリからパーツデータのインポート

アセットライブラリからドラッグ＆ドロップすることでパッケージ内に読み込むことができます。最初に使うエフェクトデータを選択し、右クリックから読み込みを行います

パッケージ内に他のアセットを読み込みたい場合は「インポート」で実行することが可能です。パーツを読み込むとプレビューにデータが反映されます

3 タイムラインウインドウの確認

タイムラインウインドウにユニットを配置することによってエフェクトを構成していきます。After Effectsに近い感覚で作業することが可能です。配置ユニットをダブルクリックすることでユニットウインドウに素早くアクセスすることができ、多くのユニットを制作する局面でもスムーズに作業できる設計になっています

4 配置ユニットの確認

ユニットはパーティクルやエミッタ、ライト等で構成されます。配置ユニットの種別は、アイコンでわかるようになっています。また、アニメーションには、ファンクションカーブのほかにイージングと呼ばれる簡単なアニメーションを付けるコントローラがあります

位置はイージング【画像左】で設定を行い、拡縮はキーフレーム【画像右】でそれぞれ設定しました

調整した結果がこちらです

5 アセットの組み立てとリソース調整

アセットライブラリから表現したいデザインに合わせてインポートを行い、タイムラインにユニットを配置し修正をくり返すことでエフェクトを組み立てます

パーツを組み合わせて形になったら、リソースの最適化と未使用リソースの削除を行います。これによって、同名リソースの削除や不必要なデータをクリーンアップすることが可能です

まずリソースがどのユニットに使われているのか確認し、ダブルクリックすることで該当ユニットを調整します。似たようなテクスチャがあれば、テクスチャの差し替え機能を使ってまとめます

最後に解像度を調整してパッケージを保存したら、データ制作は完了です

作業手順2：Unityでの設定と確認

SPARK GEARから出力したUnity用バイナリファイルをUnityのAssetsに入れた後、シーンにエフェクトを表示して確認するまでのながれを解説します。

1 バイナリファイルの出力とプロジェクトへのSPARK GEARの組み込み

SPARK GEAR上からバイナリファイルの出力を行います

メニューの［ファイル→バイナリ保存設定］からUnity用バイナリのチェックを入れ、［ファイル→バイナリ保存］でUnity用の.bytes化されたファイルを出力することができます

Unity版のSPARK GEARはunitypackage形式【画像左】で提供されていますので、プロジェクトへの組み込みはunitypackageをインポートするだけで完了します【画像右】

2 Prefabの生成

SPARK GEARエディタから出力したUnity用バイナリファイルを、Unity上でGameObjectとして利用できるようにするために、Prefabの生成を行います

VFXのバイナリファイルを右クリックし、コンテキストメニューから［SPARK GEAR→Create Prefab］を選択します【画像左】。すると、Prefabsフォルダ下にバイナリファイルと同名のSPARK GEAR用Prefabが生成されます【画像右】

3 カメラの設定

SPARK GEARのプラグインはUnityのNative Plugin機能を利用しているので、描画のタイミングをスクリプトから指定する必要があります。そのためにSPARK GEARではVFXの描画を行いたいカメラごとにスクリプトを使って描画するようになっています。Assets\SPARK GEAR\Scripts 下にある「SPFXCamera.cs」をシーンのカメラに設定します

4 Prefabの配置

カメラの設定が完了してシーン内でVFXが描画される準備が整ったので、先ほど生成したPrefabをシーン上に配置します。配置するとシーンビュー上でギズモが表示されます。SPARK GEARでは、ギズモでGameObjectごとのステートを識別することができるようになっています

5 再生して確認

ここまでの設定が問題なければ、Unityを再生することで配置したVFXが表示されます。Unity用のSPARK GEARプラグインではCulling Maskのしくみにも対応しているため、カメラごとに異なるエフェクトを表示するなどもでき、コリジョンを利用してパーティクルを地面に沿って移動させたり、壁で反射させたりといったこともできるようになっています。ほかにもライトの色をエフェクトに乗せてライトの変化にエフェクトを追従させたり、フォグによる色の変化、ソフトパーティクル表現、プロジェクションマッピング処理をすることも可能です

まだまだ伝えきれない強力な機能

本ツールはUnityやビルドされた端末のアプリに実行されているエフェクトとランタイムでダイレクトにリンクして作業することで、実際の解像度や付加処理を考えながらリアルタイム編集を可能としているところが非常に強力です。今回、アセットを組み合わせて制作している部分を動画にしたので、観ていただけると作業イメージと速度感を理解していただけると思います。

TEXT＿岡村雄一郎（SPARK）
ゲームリパブリック、スクウェア・エニックスなどでVFXアーティストとして経験を積み、2015年に株式会社SPARKを創業。現在も数社のVFXアートのコンサルティングを行いながら、自らも制作を行いつつ、SPARK GEARの普及に努める

TEXT＿広本則行（SPARK）
スクウェア・エニックスでグラフィックスエンジニアとしてオンラインゲーム開発に従事した後、株式会社SPARKに参画。SPARK GEARの開発サポートを行いつつ、採用会社でエフェクトの組み込みやグラフィックス周りのコンサルティングと開発業務を担う