Particle System in front of UI

Unity Engine
1

Hello, please how can i Intantiate Particle System in front of UI? I have a panel in the scene and it hides them. I have read everything what i have found and tried everything, but nothing work. It is possible?

1 Like
2

I’m no expert in this area, but as far as I know to make this work you need a “Screen Space - Camera” or “World Space” Canvas. Furthermore, you have to set up a Sorting Layer for the particle effect that renders after “Default”.

Here is what I found:

Not for UnityUI, but I believe still useful:
Video

https://www.youtube.com/watch?v=472fnjZDzvM

Hope it helps you further!

3 Likes
3

When i set Scree space -camera or World space, my all UI elements disappear.

4

If you’re using the LWRP you can’t use other camera pass UI options. At least until 2019.2 I think where they are reworking the camera layer concepts.

5

Here’s my solution, you can seperate the UI and Effect into 2 camera, look for the ClearFlags field in the Camera Component and set that to DepthOnly for both 2 camera, for the effect, etc: Particle System, you set the layer to the name you want, etc: Effect, for the UI camera, set the CullingMask to UI, for the effect camera, set the CullingMask to Effect.
If you want effect in front of UI, simply set the Depth field in the UI camera smaller than the Depth field of effect Camera

2 Likes
6

How would you have some particles in-front of an UI element and some particles behind another UI element?

7

Ahh, the age old question of how to sandwich particles in UnityUI. Here are some solutions I’ve found in my experience.

  • If you can use a camera space UI (aka non-LWRP) you can use the Z-Depth to render that with multiple canvases with different Z-Depths. However, this can be difficult to split up your UI canvases to support this behavior.

  • You can also output the particle system to a render texture assuming the particle area is small enough (such as a highlight on a button). However, this can increase your memory footprint considerably, and limits the effect’s area to the render texture bounds. You can then apply this to a RawImage UI component and the sorting will work inline.

  • The UI also supports custom meshes. You can create your own UIParticleSystem (that inherits from UnityUI.Graphic) that simulates a particle system and every frame bakes a mesh that you can then output to the UI canvas by setting itself dirty every frame. You will also need to handle the material property.

  • ParticleSystem - BakeMesh (https://docs.unity3d.com/ScriptReference/ParticleSystemRenderer.BakeMesh.html)

  • UI PopulateMesh - https://bitbucket.org/Unity-Technologies/ui/src/31cbc456efd5ed74cba398ec1a101a31f66716db/UnityEngine.UI/UI/Core/Graphic.cs#lines-689

  • In my opinion the best answer is depending on your needs to create use a shader for simulating a particle effect as mentioned in this thread: https://discussions.unity.com/t/682250/2 . You you can then apply to a UIGraphic’s material and keep the sorting as needed. You will likely need to generate motion maps and use some creative UV manipulation, but ShaderGraph should be able to help you out with that.

3 Likes
8

I just found this reply in another thread:

6 Likes
9

Hi, I was looking to do something similar, but I didn’t want to use any custom scripts or shaders, It took me a while to get it working, but I’ve found you can do this with just the in-built camera stacks in Unity’s URP. I’ve written a blog post on how to do it without 3rd party custom scripts or shaders: Unity UI Particles in URP using Overlay Cameras and Camera Stacks - Bedford Digital Technology Solutions
I hope it saves someone the few hours I spent trying to work it all out! :slight_smile:

3 Likes
10

Thank you very much! You just saved my time:)

11

Thanks This Works

12

For me it works so simple
in particle:
renderer tab =>
sorting Layer ID = UI (for example)
Order in layer = try 2 or 3 or above (just put ui order number).

13 Likes
13

Magnificent :stuck_out_tongue:

2 Likes
14

I’m using 2019.4.18f1 and none of these solutions work for me / I’m too stupid.
I tried the git Project from Peter77 and the demo scene works, but that scene uses Screen Space camera. When I copy the whole scene into my project, I’m at the same spot as before. When dragging the one UI element that is totally in the way into the Screen Space Camera Canvas, it doesn’t display at all.
Every element I have under Screen Space Overlay will overlap the particles. I can adjust every sorting layer, sorting group, Z-pos, whatever… overlay will always overlay and I even if my particle effects are in that layer it doesn’t change the fact that the UI elements overlap the particles.
Does this have anything to do with the Unity version maybe?
Why did it work so easily for waverz?

I have a World Space and an Overlay canvas. Ideas?

edit: I found this thread (again ^^) and it works but not perfectly for me.

15

You need 3 things

1- A camera (a new camera, not the Main Camera)
2- A Raw Image
3- A Render Texture
4- (Optional) a new Layer, for example UIParticles or something like that

  • If you created a layer, select your main camera, an deselect the layer inside the “culling mask” option
  • Create a new camera, if you created a new layer, choose it in the culling mask option of this camera
  • Create a Raw Image inside your canvas (Screen Overlay, yes)
  • Create a Render Texture inside your project

Now you must reference the render texture in the camera on “Target Texture” and at the Raw Image in “Texture”

Finally, create your particle system and put it in front of the new camera, all the camera render will be showed inside the raw image.

16

Hi there,

I created the Canvas Particle System, an asset that can create UI particles fully compatible with Unity’s UI Render Pipeline.

Within this asset you can:

  • Use sibling index to control particles z position
  • Add particles in front, behind, or between any UI element
  • Emit particles from: point, directional, line, rect, and circular or using any recttransform in the scene
  • Works on all canvas types:
  • Works on all platforms: mobile, desktop, or console
  • Control all emitter attributes programmatically
  • Animate any emitter or particle attributes
  • Add multi-texture particles
  • Particles with animates sprites
  • Emit particles from images
  • Use UI masks
  • Emit from local or world spaces
  • Render Shuriken particle on UI
  • And more
17

Looks great! Does this work with Screen Space Overlay or is that just impossible?
I’m debating between yours and this one: https://assetstore.unity.com/packages/tools/gui/ui-particle-system-108285#

18

Hi LilGames,

Yes, it does.
My plugin works with all canvas types on all platforms!

19

I just bought your asset. Maybe you can renew your website domain name now. :smile:

Seriously though, how do I get support? Your package is the ONLY one that does UI Particles regardless of camera type, so it’s a fantastic asset you should keep updating/refining it.

20

Tnx !!! it really helped me !!

2 Likes