在画布上使用Unity粒子效果

Question

是否可以在UI元素上使用粒子效果系统，例如在画布(Canvas)上？我想为我的UI元素创建一些动画效果，但似乎粒子系统不支持这个。我是否正确地认为如此？还有其他的解决方案吗？

- Payton Dugas

Answer 1

你可以让相机在不同的图层上渲染粒子效果，然后在UI中使用RawImage显示RenderTexture。结合这个答案的提示：默认情况下，RenderTexture只有24位的颜色深度，但我们需要32位的alpha通道，最简单的方法就是通过代码生成一个：

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;
    }
}

---

我的示例层次结构如下：

• 添加一个新的图层ParticleEffect来渲染粒子效果。

  

• ParticleCamera是一个新的Camera。在这里：

  • 移除AudioListener组件，因为场景中只能有一个。

  • 将ClearFlag设置为Solid Color并设置所需颜色。粒子不会完全透明，但总是会在边缘膨胀一些该摄像机背景颜色。确保alpha设置为0。

  • 将Culling Mask设置为仅ParticleEffect，以便该相机不渲染场景中的其他任何物体。

    

  • 还有RenderParticleseffect组件

• 在普通的MainCamera上，从Culling Mask中移除ParticleEffect

  

• 将Particles设置为图层ParticleEffect，这样它现在只会由ParticleCamera渲染。

  

• 最后，在ParticlesCamera上的RenderParticlesEffect组件中引用UI中的目标particleImage。

  

结果：

Canvas是Screenspace Overlay或不是都无所谓。

- derHugo

---

这对我在Unity 2020中不使用URP很有帮助。 - dubezOniner

Answer 2

默认情况下，渲染模式设置为屏幕空间-覆盖。此渲染模式将UI元素放置在屏幕上，并呈现在场景之上，因此粒子效果不可见。

您需要更改检查器中Canvas的渲染模式设置为屏幕空间 - 摄像机，并在场景中给出相机的引用以将其渲染到画布的渲染摄像机属性中。在这种渲染模式下，Canvas位于指定相机的前方一定距离处。

- Deekshith Hegde

---

我知道这个问题。我尝试了一下，它起作用了，但我的对象穿过了我的用户界面。我想我必须设法让它正常工作。谢谢！ - Payton Dugas

Answer 3

我只需要补充一件事情。

内置管线，LTS 2021。我按照这些说明操作，然后将粒子材质添加到画布中的RawImage中。然后在粒子相机中，我将纯色设置为纯黑色，透明度设置为0。这样就消除了所有的渗透效果，并使事物看起来正好符合我的要求。然后我只需在RawImage的Rect Transform中设置宽度和高度，以按照自己的想法缩放粒子效果。这需要一些试错，所以我希望能够帮助其他人避免痛苦。

感谢Hugo提供的出色指南！

- Lanyard