Particles in the UI
Using particles in UI is a hot topic. It seems like nearly every mobile game with loot boxes uses particles, but there is no standardized way to implement them. The problem with trying to use participles in the UI is that particles render behind UI on canvases that have theirRender Mode
set to Screen Space - Overlay
:

The preceding screenshot shows two UI canvases from our working examples and a particle system (the white dots). The pink background is on the Background Canvas
, which renders with Screen Space - Camera
. The circular meter and the panel with the cat are on the HUD Canvas
, which renders with Screen Space - Overlay
. The particles are rendering in front of the Background Canvas
and behind the HUD Canvas
. However, I want the particles to be displayed also in front of the HUD Canvas
.
There are a few solutions to this problem. My two preferred solutions are as follows:
- Change the
Render Mode
onHUD Canvas
toScreen Space - Camera
and adjust the sorting order of it...