【Roblox】ParticleEmitterでフリップブックを使ってエフェクトを作る

はじめに

このページでは、Robloxのエフェクト機能「ParticleEmitter」内の機能「フリップブック」の使用方法と、それを使ったエフェクト制作について簡単に解説します。

こちらはRobloxのエフェクトを少し触ったことがある方向けのページとなっています。そのため、ParticleEmitterの基本的機能や全パラメータは解説していません。

Robloxバージョン：0.625.0.6250509

ParticleEmitterでのフリップブックの使い方

フリップブックとは

RobloxStudioに限った機能ではありませんが、一つのテクスチャにアニメーションの1コマを分割して配置し、それをシステム上で連番再生させて表示する機能です。
単純なサイズの伸縮などでは表現しきれないエフェクトの細かな動きをアニメーションで表現することができます。

エフェクトの歪みやちぎれ表現など、他のゲームエンジンではシェーダーなどで設定できることもありますが、RobloxStudioではシェーダーの作成などを行うことができないので、そういった細かな表現を行いたい場合はこちらの機能を使用することになるかと思います。

テクスチャの作成

作成の手順として、最初に連番アニメーション用のテクスチャを作成します。
連番に並べられれば使用するソフトは問いませんが、筆者はPhotoshopとAfterEffectを併用して作成しています。

※今回は参考に下記のようなHitエフェクト用の衝撃波のようなテクスチャを作成しました。

最初にAfterEffectで大まかな動きを作成して連番で吐き出し、必要な枚数（今回は4x4の16枚）を抽出します。

そこからPhotoshopに連番画像を持っていき、動きを見ながらエフェクトの形状を整えていきます。

最後に整えた画像を最終的なテクスチャサイズに合わせて連番になるように左上から順に並べます。

ParticleEmitter内でテクスチャの設定

作成したテクスチャをRobloxへインポートします。
Robloxへの画像アップロード後は基本的に画像の更新や削除を行うことができず、更新のたびに不要なデータが増えていってしまうので、アップロード後の調整等はできるだけ控えるようにしておいた方がよいかと思います。

エクスプローラからParticleEmitterを作成し、テクスチャを設定します。
次に作成したParticleEmitterのプロパティからフリップブックの項目にある以下の項目を設定します。

「FlipbookLayout」
再生するアニメーションのテクスチャのレイアウトを指定します。
テクスチャ内に並べている1コマを1フレームとして指定し、テクスチャに合った分割数を指定してください。
Grid2x2 – 4フレームのアニメーション用の 2×2 フレーム。
Grid4x4 – 16フレームのアニメーション用の 4×4 フレーム。
Grid8x8 – 64フレームのアニメーションの場合は 8×8 フレーム。

「FlipbookMode」
Flipbookのアニメーションのタイプを選択する項目です。
以下の4つからエフェクトに合った形式を選択できます。

• Loop
  最後のフレームを再生した後、最初のフレームに戻りループするようになります。
• OneShot
  パーティクルのLifetimeの最初から終わりまでの時間で1回だけ最初のフレームから最後のフレームまでアニメーションが再生されます。
• PingPong
  パーティクルのLifetimeの最初から終わりまでの時間で、最初のフレームから最後のフレームまで再生後、最後のフレームから最初のフレームへ折り返して再生されます。
• Random
  フレームをランダムな順序で再生し続けます。アニメーションの順番を気にしない、不規則な動きが欲しいときに使用します。

「FlipbookStartRandom」
チェックをオンにすることで、アニメーションが開始される最初のフレームをランダムにすることができます。

設定完了
今回は「4x4」「Loop」「FlipbookStartRandomのチェックはオフ」とします。

上記で基本的な設定完了です。
後はエフェクトに合わせて適切な色やサイズ、LifeTimeなどを設定してください。

実際の使用例

上記で作成した衝撃波のようなアニメーションを使用して攻撃時のHitエフェクトを作成しました。
複数の衝撃波のアニメーションを重ねることでより魅力的なエフェクト作成することができるかと思います。

まとめ

フリップブックを使用することで、ParticleEmitterだけでは表現の難しいエフェクトの表現も可能になります。
AfterEffectで作成したエフェクトアニメーションをそのまま連番で並べたり、自作の手書きアニメーションを作成したりと自由度も高く、
フレームの数（テクスチャ分割の枚数　最大8ｘ8）を増やすことでより滑らかなアニメーションの作成もできますが、その分テクスチャのサイズも大きくなっていくのでその点だけご注意ください。

ご愛読ありがとうございました。