CODEWITHSUNDEEP
user-interfaceunity-game-enginecanvas
Payton Dugas
Payton Dugas

Reputation: 117

Unity Particle Effects On Canvas

Is is possible to use the particle effects system on your UI elements. For instance on the Canvas? I'd like to make some animations and whatnot for my UI elements and the particle system would be nice, but it doesn't seem to support this. Am I correct in assuming this? Is there another solution?

Upvotes: 10

Views: 32664

Answers (3)

Lanyard
Lanyard

Reputation: 1

I just have to add one thing.

Built-In Pipeline, LTS 2021. I followed these instructions, then added the Particle Material to the RawImage in the canvas. Then in the particles camera, I set the Solid Color to pure black and the alpha to 0. This removed all the bleed effect and got things looking just how I wanted. Then I just set the width and height in the Rect Transform of the RawImage to scale the particle effect how I wanted. This took some trial and error, so I thought I'd hope to save someone else the pain.

Thanks for the great guide, Hugo!

Upvotes: 0

derHugo
derHugo

Reputation: 90779

Well what you could do would be letting a Camera render the Particle effects on a different layer to a RenderTexture and show it in a RawImage in your UI.

Combined with a hint from this answer: By default RenderTexture has only a colordepth of 24-bit but we need 32-bit for alpha the simplest way is just generating one via code:

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Camera))]
public class RenderParticlesEffect : MonoBehaviour
{
    // Here reference the camera component of the particles camera
    [SerializeField] private Camera particlesCamera;

    // Adjust the resolution in pixels
    [SerializeField] private Vector2Int imageResolution = new Vector2Int(256, 256);

    // Reference the RawImage in your UI
    [SerializeField] private RawImage targetImage;

    private RenderTexture renderTexture;

    private void Awake()
    {
        if (!particlesCamera) particlesCamera = GetComponent<Camera>();

        renderTexture = new RenderTexture(imageResolution.x, imageResolution.y, 32);
        particlesCamera.targetTexture = renderTexture;

        targetImage.texture = renderTexture;
    }
}

My example Hierachy looks like this:

enter image description here

  • Add a new Layer ParticleEffect for the particles.

    enter image description here

  • The ParticleCamera is a new Camera. Here

    • remove the AudioListener component since there may only be one in the Scene.

    • Set ClearFlag to Solid Color and set a desired color. Particles won't be completely transparent but always bloat a bit the background color of this camera on the edges. Make sure the alpha is set to 0.

    • Set Culling Mask to only ParticleEffect so this camera renders nothing else from the scene

      enter image description here

    • And the RenderParticleseffect component

  • On the normal MainCamera remove ParticleEffect from the Culling Mask

    enter image description here

  • Set the Particles to the layer ParticleEffect so now it will only be rendered by the ParticleCamera

    enter image description here

  • Finally reference the target particleImage from the UI in the RenderParticlesEffect component on the ParticlesCamera

    enter image description here

Result:

enter image description here

It doesn't matter if the Canvas is Screenspace Overlay or not.

Upvotes: 15

Deekshith Hegde
Deekshith Hegde

Reputation: 1548

By default the render mode setting is selected as Screen Space- Overlay. This render mode places UI elements on the screen rendered on top of the scene due to which the particle effects are not visible.

You have to change the render mode setting of Canvas in the inspector to Screen Space- Camera and also give reference of camera in the scene to render camera property of canvas. In this render mode the Canvas is placed a given distance in front of a specified Camera.

Upvotes: 5

Related Questions