UGUI特效层级和裁剪问题

1.介绍

特效在游戏中是不可缺少的，拥有好看的特效可以让游戏锦上添花。但在添加特效的时候，会出现各种各样的问题，比如特效层级显示问题，scrollview穿透等等。

2.特效显示优先级

1.sortingOrder

2.render Queue(同个sortingOrder下render Queue才生效)

 

3.特效需要了解的组件

1.canvas：需要勾选overrideSorting，然后填写order in layer 改变 sortingOrder的值

 2.Image：在没有material的情况下，默认的render Queue是3000且不能手动更改，添加material，shader选择UI/Default，就能保持原图片的样式且能手动修改render Queue

3.Sprite Mask：用来裁剪特效，alpha CutOff最好为0，不然有可能在范围内的特效显示不全

随便选择一个sprite然后需要改变scale来放大缩小区域

 4.Rect Mask2D:配合Sprite Mask在ScrollRect下使用，防止特效穿透

 

 5.Particle System：它的Render下的Masking有三种模式，No Masking任何场合都会播放，Visible Inside Mask只会在Sprite Mask内播放，Visible Outside Mask相反。填写order in layer 改变 sortingOrder的值，render Queue为第二层级排序。

 

4.特效使用常见问题

 1.不使用ScrollView的情况下：

当特效显示在图片的最上面，直接可以通过修改特效的sortingOrder或者renderQueue比图片的层级高即可。

当特效显示在两张图片的中间时，可以给两张图片添加canvas修改sortingOrder，特效的sortingOrder夹在中间即可（比较麻烦）。也可以通过给图片添加material修改renderQueue来实现。

2.使用ScrollView的情况下：

最常见的就是穿透问题，可以使用Sprite Mask，范围在scrollview上（配合Rect Mask2D），将特效的masking设置为Visible Inside Mask即可解决穿透问题。

特效显示在图片的最上面，方法同不使用ScrollView的时候一样。

当特效显示在两张图片的中间时，我们就不能通过添加canvas修改sortingOrder来实现，因为当图片order比界面高时，图片会穿透在ScrollView上面。可以可以通过给图片添加material修改renderQueue来实现。

5.代码示例

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class effectTest : MonoBehaviour
{
    public class ItemClass
    {
        public Image iconBg;
        public Image icon;
        public ParticleSystem effect1;
        public ParticleSystem effect2;
    }

    public Button playBtn;
    public RectTransform content;
    public List<ItemClass> itemList = new List<ItemClass>();
    void Start()
    {
        //获取所有Item组件
        for (int i = 0; i < content.childCount; i++)
        {
            Transform tran = content.GetChild(i);
            ItemClass item = new ItemClass();
            item.iconBg = tran.Find("iconBg").GetComponent<Image>();
            item.icon = tran.Find("icon").GetComponent<Image>();
            item.effect1 = tran.Find("effect1").GetComponent<ParticleSystem>();
            item.effect2 = tran.Find("effect2").GetComponent<ParticleSystem>();
            itemList.Add(item);
        }

        playBtn.onClick.AddListener(() =>
        {
            for (int i = 0; i < itemList.Count; i++)
            {
                //  图片的renderQueue是只读的，所以只能更改特效的renderQueue
                //itemList[i].icon.material.shader.renderQueue = 3101;
                //播放特效
                itemList[i].effect1.Play();
                //修改特效的sortingOrder
                itemList[i].effect1.GetComponent<Renderer>().sortingOrder = 1;
                //修改特效的renderQueue
                itemList[i].effect1.GetComponent<Renderer>().material.renderQueue = 3100;
            }
        });
    }
}