この記事のターゲット
- 未経験で Unity のパーティクルを触る方
- パーティクルで何が出来るかを知り合い方
- 2D（UI）の演出が作りたい方
- 良い演出にするアプローチや小ネタを知りたい方
はじめに
株式会社 Graffity で Unity エンジニア兼テクニカルアーティストとして働いている Muraishi です。
今回は、会社の学習用の資料として作成した Unity2D・UI 用パーティクル作成法を Qiita 向けに展開いたしました。
ぜひよろしければ、ご自身や会社での学習用教材としてご活用いただければと思います！
まずは、2D 演出をやってみることのススメ
大きな理由としては、こちらで学んでいただいた方が 2D のクリエイティブに強い方が多かったため、2D・UI向けとして作成したという経緯があります。
しかし、最初に 2D から始めることには、以下のようなメリットがあります。
-
学習コストが少なくて済む
- 学習と実践を同時に行えるくらいにはコストを安くスキル習得できる
-
そのまま3Dへの移行がしやすい
- 今まで学習した内容が無駄にならない
-
意外と扱えると便利なケースが多い
- 3Dゲームでも2D演出は結構使用する
最終的な成果物
最終的には、以下のような演出が作成できることを目標にしています。
2Dゲームの各種エフェクト
例）タップエフェクト
2DUI演出
例）クリア演出
前準備
Unityエディタは、なるべく最新のものをご用意ください。
UI Particle について
- UI（Canvas）用のパーティクル作成には必須のアセット
- 使い方
- Package Manager から Add Package from Git URL を選び、以下のアドレスを入力
https://github.com/mob-sakai/ParticleEffectForUGUI.git
ファイルのダウンロード
この記事を確認する場合、以下の Unity 用パッケージファイルを同時に確認してください。
- 対応Unityバージョン … * 2022.03.44f1 以上
- 確認方法 … 上記、unitypackage ファイルを Unity にドラッグしてインポートする。追加された各シーンの内容を再生する
シーンの用意
- 基本的には、追加したい箇所のシーンを複製して、エフェクト制作用のデバッグシーンとする（今回は、上記でインポートしたファイルのシーンの複製でOK）
- 特になければ、新規シーンを用意し、ヒエラルキーから右クリック → UI → Canvas を追加する
UI（Canvas）の Hierarchy について
- UI上でのエフェクト作業は基本的に Canvas 内で行う
- Hierarchy 内のオブジェクトの表示順については、Hierarchy ****内の下段にあるものほど、手前に表示される
UI（Canvas）で制作するときの注意点（UI Particle）
- Canvas でのパーティクル制作については、デフォルトだと行うことができないため、UI Particle のアセットを導入する必要がある
- もし導入されてない場合は説明に従いインポートする。または、エンジニアに導入を依頼する
パーティクルの追加方法
- Hierarchy で追加したいCanavas内の親オブジェクトを右クリック → Create Empty で空の GameObject を追加
- Inspector から、「Add Component」ボタンを押し、Particle System を追加（文字列で検索可能）
- Particle System を追加後、UI（Canvas）で作成する場合は、UI Particle を追加
- Scene ビュー上で、デフォルトのパーティクルが再生されるのを確認できる。できなければスケール値などの確認をする
2D で作業する場合の Tips
- Scene ビュー上部の「2D」ボタンにチェックを入れると Scene ビューが 2D 表示となる。表示が簡略化されるため、作業がしやすくなる
最低限、これだけ覚えればいい パーティクルの共通設定
- Particle System のコンポーネント全体。これらの値を変更しながら機能を確認していく
- わからない場合は、サンプルのデータの値を変更しながら色々試していく
上部設定
-
Duration … パーティクル再生時間
複数のパーティクルを同時に再生する場合は全ての値を合わせて作業したほうが演出の同期がとれて都合がいい - Looping … ループするか。ワンショット再生の場合はチェックを外す（作業時はチェックを入れてたほうが作業しやすい）
- Start Lifetime … 各パーティクルの個別の生存時間
-
Start Speed … パーティクルの速度
2D演出では基本使わないケースが多い＆挙動に問題が発生しがちなので、初期化時必ず0にしておく - 3D Start Size … 各パーティクルの初期サイズ
- Start Rotation … 初期の回転角度
- Start Color … 初期のカラー（カラーは乗算で載る）
-
Scaling Mode … スケール設定
Hierarchy に設定しておくと大元の Transform の Scale が効くようになるため、Hierarchy に設定しておくと良い -
Play On Awake … 表示時にそのまま再生させるか？
チェックを入れておけば、オブジェクトを表示した瞬間再生されるようになる
Emittion
パーティクルの粒をどのように表示させるか？
-
Rate over Time … 一定時間ごとに表示する粒の量
ループのエフェクトなどでよく利用する -
Bursts … 一定のタイミングでまとめて表示する粒の量
ワンショットのエフェクトなどでよく利用する
Shape
パーティクルの粒を表示する範囲を設定する
チェックを外すと該当ポジションの位置に表示されるため、位置を固定したい場合はチェックを外す
-
Shape … パーティクルを表示する範囲の形状
2D パーティクルの場合は Box（範囲）か、Circle（円形）を最も利用しやすい
Velocity over Lifetime
パーティクルの粒ごとの移動方向を設定する
Color over Lifetime
パーティクルの粒ごとのカラー（＆透明度）の変化を設定する
Size over Lifetime
パーティクルの粒ごとのサイズの変化を設定する
Rotation over Lifetime
パーティクルの粒ごとの回転方向の変化を設定する
Renderer
パーティクルの粒描画方法を設定する
UI（Canvas）での描画は UI Particle が行うためチェックを外す
-
Material … パーティクルの描画を行うマテリアルを設定する
ここを設定しないとそもそも表示されない -
Max Particle Size … パーティクルの最大サイズ
大きく表示したパーティクルの描画サイズがおかしい場合はこの値を大きくする
UI Particle コンポーネント（Canvas に表示する場合）
Canvas に設置するパーティクルの場合は必ず一緒に設定する
-
Material … パーティクルの描画を行うマテリアルを設定する
Canvas の場合は必ずここにマテリアルを設定する
マテリアルの設定（URP）
- UI （Canvas）に配置したい場合は UI カテゴリのものを利用する。
- 加算 … UI/Additive
- 通常 … UI/Unit/Transparent
- マテリアルを新規で作成し、メイン表示するテクスチャに、表示したい該当テクスチャをドラッグして設定する
- 通常のパーティクル（3D/2D）については、Univarsal Render Pipeline/Particles/Unilit 利用する
- 加算 … Surface Type を Transparent、Blending Mode を Additive に
- 通常 … Surface Type を Transparent、Blending Mode を Alpha に
- 以下、加算の場合のマテリアル設定
最後に
ここまでは、Unity のセットアップと、パーティクルの基礎的な機能の説明を行いました。
次回は、実際の作例とそのポイントについてご説明します。
後半、Unity2D・UI パーティクル完全習得マニュアル（実制作編）はこちら。