Particle system sorting between and above UI objects

Unity Engine
1

This is in Unity 5.3.4p1

I’m trying to set up a UI with multiple particle systems at different depths. Using multiple canvases (as referenced in several threads such as this one), I’m able to get part of the way there. Something like this works great:
- UI Panel with canvas

  • Particle System
  • UI Panel with canvas at higher sort order

The particles render in front of the first panel and behind the second. The trouble arises when I want to add a second particle system in front of the second panel. This could be from either stacked sprites, or a second menu on top of the first. For example:
- UI Panel with canvas

  • Particle System 1
  • UI Panel with canvas at higher sort order
    - Particle System 2

The second particle system always renders behind the second panel. The only thing I can think of is that the render queue assigned to the particle system by its shader (Transparent+1) leaves it rendering behind the second panel. However, the render queue on the particular Image that is obscuring the particle is Transparent (or 3000). I did a little checking, and particles are obscured by any canvas with a sort order greater than zero.

Is there some way to get particles to sort based on canvas sort order? Or some change I can make to the shader to ensure that it renders after a canvas at a given sort order? Thus far, I haven’t been able to turn up anything dealing with this specific issue. Everything I found stopped at a single layer of particles.

2

I guess the problem is in the sorting layers.

You should try changing the sorting layer in the Renderer option of the particle systems in the inspector.
Use two different sorting layers; one for {particle system-1 and canvas-1}, another for {particle system-2 and canvas-2}

Try this, it worked for me:

  • Create the 1st panel canvas, with Canvas-Render Mode as "WorldSpace". Now adjust the RectTransform (i.e., x,y,z) of the canvas so that it can fit in the screen. And also set the sorting layer (which is initially in “default” option) You can leave it in the default option itself, for panel1 and particle system1.

  • Now create your particle system1, and in the Renderer option in the inspector, change the Sorting Layer to the same value as set in the panel1 canvas

  • Create the 2nd panel canvas, with Canvas-Render Mode as “WorldSpace”. Now adjust the RectTransform (i.e., x,y,z) of the canvas so that it can fit in the screen. And also set the sorting layer (which is initially in “default” option)

  • Create a new sorting layer if not available, say "layer123"

  • Now create your particle system2, and in the Renderer option in the inspector, change the Sorting Layer to the same value as set in the panel2 canvas

3

Hi, maybe this will interest you: I’ve released new plugin for Unity on Asset Store, which allows handle Particle System in GUI. It allows to use particles like on 3D so you can make particles moving around GUI elements and make them cut in scroll views etc. It’s much more efficient and easier to setup than multi canvas with multiple sorting layers.
More you can find at forum thread: UI Particle System: advanced plugin for particles in GUI [RELEASED]
And of course on Asset Store: https://www.assetstore.unity3d.com/en/#!/content/108285

1 Like