Photo by Jens Müller / Unsplash

How to render Particle System OVER UI Canvas

Particle system component is used to simulating fluid elements like liquids, flames and clouds by generating and animating large quantities of small 2D images in the scene. In game development it often used to create fancy effects like explosions or sparklings. During development of King of Solitaire we had encountered a significant problem — we couldn’t project particles on screen because we were using Screen Space — Overlay canvas. Particles weren’t visible because there were beneath canvas. How to handle it?

Particles on top of overlay canvas — is it possible?

Fortunately we found 2 solutions how to approach this problem.

1st solution

First solution we found on Unity forum (https://forum.unity.com/threads/free-script-particle-systems-in-ui-screen-space-overlay.406862/). User glennpow introduced free awesome script which allows to use particles in overlay canvas. You can find this script in Unity-UI-Extensions repository — https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/src/d3671c3711b8e4078fdb271a91fc14e84c363611/Scripts/Effects/UIParticleSystem.cs?at=master&fileviewer=file-view-default. How exactly is this solution work?

The class inherit from Unity’s MaskableGraphic — behaviour for a graphic which is capable of being masked out. UIParticleSystem overides OnPopulateMesh method which is a callback function when a UI element needs to generate vertices. In this method script iterates through all particles from particle system and for each particle it gets its properties: position, rotation, color and size. We are able to apply custom scale to particles too. Then script applies texture sprite sheet animation if particle system uses this type of animation. Next step is to prepare verticles and transfer particle’s properties to UIVertex _quad array.

To apply this system you need to create a Particle System on an empty RectTransform gameObject in UI hierarchy. Remember to set this gameObject to UI Layer. Then attach this script to this object — it should initialize itself automatically. If you want to hide your particles in scene view apply “UI/Particles/Hidden” shader to it.

And how it is looking in action:

King of Solitaire

2nd solution

In King of Solitaire we are using solution above. However I found another interesting aproach to showing particles in Screen Space — Overlay canvas. The solution was described by Luke Jackson from King company (https://techblog.king.com/showing-particles-in-a-screen-space-overlay-canvas/).

To implement this solution we need to create second camera — a special one which is projects only Particles layer and has Particles Render Texture as Target Texture. This camera need to have depth value higher tan main camera.

You also need an UI Raw Image component with used by camera Particle Render Texture.

To steer this behaviour you also need 3 simple scripts:

1. ParticlesPlayer — for steering emission of particles
2. ParticlesDisplayer — for showing particles in specific positions
3. OverlayParticles — static helper class with ShowParticles() method

All those classes you can find at Luke’s github: https://github.com/ljackso/ParticlesInAnOverlayCanvas.

Conclusion

Basic Unity’s API doesn’t allow to use particles with Screen Space — Overlay canvas. However Unity engine has a great community which is always helpful and often provides solutions for various problems.

Now if you meet similar particle’s issues during development of your game, you will know that you can use one of above solutions. Or maybe even you will create your own?

I hope it’s useful for you. If you have any comments or questions, please write them here!

To help us create more free stuff, consider leaving a donation through Patreon where you can vote for the next asset pack and get access to future packs & articles earlier. Sharing knowledge is our passion. Unfortunately, keeping a team of professionals costs a lot that’s why we are constantly taking on new opportunities.
​
​We’ll be publishing any news on the following outlets:

• Patreon
• Twitter
• Instagram

Thanks for reading!