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 particles in the UI is that particles render behind UI on Canvases that have their Render Mode set to Screen Space - Overlay.

Figure 15.1: Particles rendering behind a Canvas

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 either of the following...