Accelerate Video Game Development

How to render Particle System OVER UI Canvas

Leszek Król

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 ( User glennpow introduced free awesome script which allows to use particles in overlay canvas. You can find this script in Unity-UI-Extensions repository - 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.

This post is for paying subscribers only

Sign up now and upgrade your account to read the post and get access to the full library of posts for paying subscribers only.

Sign up now Already have an account? Sign in
Your link has expired
Success! Check your email for magic link to sign-in.
Please enter at least 3 characters 0 Results for your search

May we suggest an author?

Leszek Król