Unity优化全屏UI的Overdraw之ImageBox

我们在Unity下面做UI的时候需要给每个界面放一个背景图，这个背景图有的时候是以弹窗的形式出现，我们不需要看到这个背景，只需要让其能够响应raycastTarget，也就是希望该背景能够阻挡住鼠标点击弹窗下面的按钮。通常的做法是加一个空的Image如下所示。

我们修改这个Image的Alpha值为0，表示透明；同时勾选RaycastTarget表明阻挡鼠标点击。但是我们看看这张全屏的图片的Overdraw

可以看到全屏下虽然图片设置了透明，但是Unity却绘制了该Image。我们复制10个Alpha为0的Image，观察如下

Overdraw很明显。

下面我们看下UGUI的源码发现Image继承自MaskableGraphic[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9mPBwui-1575638077864)

MaskableGraphic又继承自Graphic

我们在Graphic里面找到了raycastTarget变量。那么我们就可以自定义一个Image组件即ImageBox，直接继承自Graphic，然后将Rebuild函数置空即可。

那么完整代码就出现了。

namespace UnityEngine.UI
{
    public class ImageBox : Graphic
    {  
        public override void Rebuild(CanvasUpdate update)
        {
            
        }
    }
}

接下来我们同样复制10份ImageBox，观察Overdraw如下

Overdraw完全消失了。