はじめに
株式会社 Graffity で Unity エンジニア兼テクニカルアーティストとして働いている Muraishi です。
今回は、会社の学習用の資料として作成した Unity2D・UI 用パーティクル作成法を Qiita 向けに展開いたしました。
ぜひよろしければ、ご自身や会社での学習用教材としてご活用いただければと思います！
後半は、Unity2D・UI パーティルの実際の作例とそのポイントについてご説明します。
前半、Unity2D・UI パーティクル完全習得マニュアル（基礎編）はこちら。
演出は以下のパターンに分けて説明していきます。
- ループ演出 ... 繰り返し再生される演出で、途切れなく継続する動きや効果を指します
- ワンショット演出 ... 一度だけ再生される演出で、特定のタイミングやイベントに合わせて表示されます
2Dパーティクルのアプローチサンプル … ループ演出
共通の設定
- ループ可能な状態に（Looping のチェックを入れる）
- パーティクルの粒は継続して表示されるように（Emmition の Rate over Time に数値を入れる）
- 粒ごとのサイズ差やカラー差などは各項目のプルダウンから「Random Between Two Constants」などで数値差を用意することで表示差が発生する
- 全体画面に表示させたい場合は、Shape で Box を選び、一定サイズに伸ばす
01_KirakiraEffect （キラキラ（星））
作成時の補足
- 星の粒のフェードを拡大・縮小を行う（Size over Lifetime の Size をプルダウンでカーブにし、下記のように調整する）
02_CircleEffect（キラキラ（丸））
作成時の補足
- 丸を左右に動かす（Velocity over Lifetime の Linear をランダムにし、x軸に対して任意の値を入れる）
- 丸のフェードをアルファで行う（Color over Lifetime のカラー設定のアルファ部分の両サイドを0にする）
03_MovingLIneEffect（移動線（横））
作成時の補足
- 大きさについてを元のテクスチャのサイズより横長にし、大きさをランダムにする（3D Start Size にチェック入れ、項目のプルダウンでランダムにし、X軸を長めにする）
- パーティクルの発生元（Shape）を画面外左側に移動し、右側にランダムに移動（Velocity over Lifetime）させる
04_SparksEffect（火の粉）
作成時の補足
- 動きにランダムな挙動（Noise）を追加する
05_ConcentrationLineEffect（集中線）
作成時の補足
- 円形のライン上からパーティクルの粒を表示し、速度をマイナスにすることで円形の内側に動くパーティクルを作る
- ParticleSystemの粒子を進行方向へ向ける の記事を参考にパーティクルの向きを移動方法に変更する（UI Particle を使用している場合は、設定の変更後、有効のチェックを外す）
2Dパーティクルのアプローチサンプル … ワンショット演出
共通の設定
- パーティクルの粒の発生方法（Emission）継続して表示するもの（Rate over Lifetime）からを Bursts に変更
- 再生位置を固定したい場合は Shape のチェックを外す
06_ScaleEffect（拡大）
作成時の補足
- パーティクルの粒を1つに（Emmision の Bursts の Count を 1 に）
- スケールの設定を時間軸のカーブ（Size over Lifetime）で調整
- アルファフェードを時間軸の色変化（Color over Lifetime）で調整
07_RotateEffect（回転）
作成時の補足
- パーティクルの粒を1つに（Emmision の Bursts の Count を 1 に）
- 回転の設定を時間軸のカーブ（Rotation over Lifetime）で調整
08_MoveEffect（移動）
作成時の補足
- パーティクルの粒を1つに（Emmision の Bursts の Count を 1 に）
- 移動の設定を時間軸のカーブ（Velocity over Lifetime）で調整
09_EmittingEffect（発散）
作成時の補足
- パーティクルの粒を大量に（Emmision の Bursts の Count を 300 に）
- Shape を Circle にしつつ、Speed を変更することで放射状にパーティクルを飛ばす
- Limit Velocity over Lifetime で、最初と最後のスピードに緩急をつける
10_MixedEffect（複合例）
作成時の補足
- 上記のワンショットエフェクト（拡大・移動・回転）をランダムに設定し、ランダムな位置から粒を表示させる
2Dパーティクルのアプローチサンプル … 組み合わせ
ここからは、各種パーティクルを同時に組み合わせて使用する方法を記載します。
パーティクルを同時に複数利用する場合
- Hierarchy 上で親オブジェクトに Particle System （空でも可）を追加することで、同時にまとめて再生が可能
- ワンショット再生の場合は、Duration の値を合わせて Looping をオンにすることで全体を繰り返し再生しながら調整が可能
11_TapEffect（タップ演出）
作成時の補足
- ワンショットの拡大・放射のエフェクトを組みあせて調整する
12_StageClearEffect（クリア演出）
作成時の補足
- ワンショットの拡大・移動・回転・放射などのエフェクトを複合して調整する
最後に
今回ご紹介した内容は、Unity 2D や UI 上でのパーティクル演出に特化した具体的なアプローチをまとめたものです。ループ系やワンショット系の演出をベースに、自分のプロジェクトや用途に合わせてアレンジしていただければ、よりリッチで魅力的な演出が可能になると思います。
演出の再現やカスタマイズを通して、Unity のパーティクルシステムへの理解を深めていただけると嬉しいです。ご不明点やご質問などあれば、コメントなどでお気軽にご連絡ください！
今後も UI や演出まわりに関する Tips や実践例を共有していきますので、ぜひフォローもよろしくお願いいたします！