UGUI深度学习（二）-- 浅谈特效穿层问题

一个老生常谈的问题，只不过之前一直没有自己处理过，正好有机会自己去研究了一下。

问题：particle在UI面板中的渲染顺序问题。由于UI渲染和Particle渲染是分为2个大组进行分别渲染，所以会出现特效渲染穿层或者被遮盖等问题。

 简单理解一下：

 图示显示为particle和UI并不处于同一渲染队列中，整体是分开渲染的。

---

处理方案：让二者处于同一渲染队列中进行统一渲染管理

测试：

public class APIS : MaskableGraphic
{
    Mesh mesh;
    // Start is called before the first frame update
    void OnEnable()
    {
        ParticleSystemRenderer render = GetComponent<ParticleSystemRenderer>();
        render.enabled = false;
        mesh = new Mesh();
        var cam = canvas.worldCamera ?? Camera.main;
        render.BakeMesh(mesh, cam, true);

        Canvas.willRenderCanvases += UpdateMeshes;
    }

    // Update is called once per frame
    void UpdateMeshes()
    {
        List<Vector3> s_Vertices = new List<Vector3>();
        List<Color32> s_Colors = new List<Color32>();
        s_Colors.Add(Color.blue);
        mesh.GetColors(s_Colors);
        mesh.GetVertices(s_Vertices);
        mesh.SetVertices(s_Vertices);
        mesh.RecalculateBounds();
        
        canvasRenderer.SetTexture(mainTexture); 
        canvasRenderer.SetMesh(mesh);
    }
}

最终结果：

---

只要把UI和Particle的渲染合并成同一个渲染组之后，在渲染过程中就会按照Unity的渲染顺序进行渲染，此时渲染顺序也变成了我们可控的了。

Github有个不错的插件：GitHub - mob-sakai/ParticleEffectForUGUI: Render particle effect in UnityUI(uGUI). Maskable, sortable, and no extra Camera/RenderTexture/Canvas.

Over！