【Unity】UI上にパーティクルを表示する方法と注意点

Unityで開発をしていると、UI上にParticle Systemによるエフェクトを表示したい場面がそこそこあります。

しかし、UIは2Dオブジェクトなのに対して、Particle Systemは3Dオブジェクトのため、設定によってはパーティクルがうまく表示されないという場面に出会います。

その解決策として、Layerを分けて表示させる方法、Render Textureを使って表示する方法などがありますが、今回はLayerを分けて上手く表示させる方法について説明していこうと思います。

Render Textureを使って表示させたい場合はこちらの記事を参考にしてみてください！

環境

Unity2022.3.18f1

背面にポップアップのImageがあり、
前面にアイテムの3DモデルをRender Textureで出力したRaw Image、
その間にParticle Systemのエフェクトを表示しています。

今回の例では背面、中間、前面の3つで表示が分けられています。
そのため、まずはその3つの表示を分けるために「Sorting Layers」を設定します。
(Sorting Layersを使わずにOrder in Layerで表示を分けることも可能です)

画面右上のLayers > Edit LayersからLayerの編集画面を開いて、

Sorting Layersの欄に

の3つを追加します。
Sorting Layersは番号が低いほど画面の奥、番号が高いほど画面手前側に表示されます。

今回は

UI (Emptyオブジェクト)
∟ Back Canvas (Canvasコンポーネント)
∟ Particle System (Particle Systemコンポーネント)
∟ Front Canvas (Canvasコンポーネント)

という構造で作っていきます。

Canvasの設定では「Render Mode」を「Screen Space – Camera」か「World Space」に設定します。
基本的には「Screen Space – Camera」を使うと思います！

「Screen Space – Overlay」は画面の最前面に来てしまうため、今回のように間に3Dオブジェクトを表示したいケースでは使えません。

「Render Mode」を設定したら、カメラをアタッチして、
背面用のCanvasには「Sorting Layer」を「Back」に設定し、
前面用のCanvasには「Sorting Layer」を「Front」に設定します。

あとはCanvas内に表示したいUI要素をそれぞれ配置します。
自分の方では「Back Canvas」内にポップアップ画像、
「Front Canvas」内にリンゴのRenderer Texture画像を配置しています。

Particle Systemでは「Renderer」内の「Sorting Layer ID」に「Middle」を設定します。
Order in Layerで表示分けをする場合は1個下の「Order in Layer」の数値を調整しましょう。

ここまで設定すれば、
背面に「Back Canvas」に配置したUIオブジェクト
前面に「Front Canvas」に配置したUIオブジェクト
その間にParticle System
が表示されると思います。

もしカメラの設定で「Perspective」を使っている場合は、少しUIとParticle Systemの扱いの違いで戸惑うかもしれませんので補足です。

今回はCanvasの設定として「Screen Space – Camera」を使用しています。
これはCanvasのスクリーン上でのサイズが変化しないようにカメラからの相対位置を保つようになる設定です。

そのため、
Canvasの親オブジェクトのPositionを変えてもCanvasには影響しませんが、
Particle Systemは3Dオブジェクトのため影響をうけます。

もしCanvas配下にParticle Systemを置いている場合は、
Canvasの「Plane Distance」の影響も受けるため注意しましょう！