3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Unity uGUI(UI)のCanvas上でParticleSystemでEffectを表示する.

Posted at

こんにちは.
Unityでかっこいいエフェクトを気軽に付けれるParticleSystemはとても便利ですね.uGUIではなく普通のゲームオブジェクトではそのまま指定した位置にParticleが表示されますが,uGUIの要素(Image,ButtonやText)にParticleSystemをつける時の設定についての記事です.

uGUIにParticle付けてSceneViewには表示されるけど,GameViewには表示されないという問題を解決します.

環境

Unity 2020.3.30f1
macOS Big Sur ver 11.4
MacBook Pro (13-inch, M1, 2020)

画像にParticleSystemをつける.

中心付近が透過されている画像を使いたかったので適当に変なキャラの画像を生成しました.(カワイイ.かわいい?.)

tramaru

CanvasのImageとしてこの画像を中心に配置します.

tramaru

配置したCanvas/Imageに対してParticleSystemのコンポーネントをアタッチします.ParticleのサイズとスタートスピードをSceneViewを見ながら以下のように調整しました.

Inspector.png

この状態ではSceneViewではImage中心にParticleが描画されていますが,GameViewで見ると右上から降ってきてしまっています.この問題を解決するために設定を行いいます.

original.gif

Canvasの設定

Canvasの設定を以下のように変更します.

  • RenderMode : Screen Space - Overlay
  • RenderMode : Screen Space - Camera
    MainCameraをアタッチする.
    Canvas.png

この状態でSceneViewとGameViewを見てみるとParticleの位置は一致したものの.サイズ感が崩れてしまいました...

Lergeparticle.gif

ParticleSystemの設定

最後にScaleの設定を以下のように行います.

  • Scaling Mode : Hierarchy

Prticle.png

以上で設定の終了です.

最終的な表示

SceneViewで作業した通りにGameViewで表示することができました!

result.gif

最後に

UnityのuGUiで描画しているボタンやテキストに対してもParticleが使えるので演出の幅が広がりそうです.
SortOrderやz座標を設定することで画像の前にParticleを表示したり調整していくと面白そうです.

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?