UGUI基础理解 — 绘制、重绘、事件系统

1. 如何绘制

将顶点数据填充到Mesh,再将Mesh设置到Mesh filter。

  1. 基础组件:
    1. Mesh filter 网格
    2. Mesh Render 渲染
  2. 核心概念
    1. Mesh-网格: 决定物体的形状
         var mesh = new Mesh();
           m_VertexHelper.AddVert(new Vector2(0, 0),color, new Vector2(0, 0.5f));
           m_VertexHelper.AddVert(new Vector2(0, 1),color, new Vector2(0, 1));
           m_VertexHelper.AddVert(new Vector2(1, 1),color, new Vector2(1, 1));
           m_VertexHelper.AddVert(new Vector2(1, 0),color, new Vector2(1, 0));
           m_VertexHelper.AddTriangle(0, 1, 2);
           m_VertexHelper.AddTriangle(3,0, 2);
           m_VertexHelper.FillMesh(mesh);
      
    2. Vertext-顶点: 组成Mesh的元素
       
           m_VertexHelper.AddVert(new Vector2(0, 0),color, new Vector2(0, 0.5f));
           m_VertexHelper.AddVert(new Vector2(0, 1),color, new Vector2(0, 1));
           m_VertexHelper.AddVert(new Vector2(1, 1),color, new Vector2(1, 1));
           m_VertexHelper.AddVert(new Vector2(1, 0),color, new Vector2(1, 0));
      
    3. Triangle-三角形: 决定顶点的顺序
            
          m_VertexHelper.AddTriangle(0, 1, 2);
           m_VertexHelper.AddTriangle(3,0, 2);
      
    4. UV-纹理坐标
          
          m_MeshRenderer.material.color = color;
           m_MeshRenderer.material.mainTexture = texture2D;
      
  3. 与组件结合使用
    m_MeshFilter.mesh = mesh;
    m_MeshRenderer.material.color = color;
    m_MeshRenderer.material.mainTexture = texture2D;
    

2. 如何响应点击

2.1 获取点中的UI元素: GraphicRaycaster

在GraphicRaycaster中调用Raycast:

Perform a raycast into the screen and collect all graphics underneath it.

  1. 获取当前canvas下的所有Graphic :
    var foundGraphics = GraphicRegistry.GetGraphicsForCanvas(canvas);
  2. 遍历Graphic,判断Graphic 的raycastTarget,是否可以响应点击
  3. 判断触摸点是否在Graphic的范围内(推测RectangleContainsScreenPoint函数中使用射线检测):
    RectTransformUtility.RectangleContainsScreenPoint(graphic.rectTransform, pointerPosition, eventCamera)

注意事项:不需要响应点击的Graphic 不勾选

Raycast Target

,提高性能

    private static void Raycast(Canvas canvas, Camera eventCamera, Vector2 pointerPosition, List results)
    {
        // Necessary for the event system
        var foundGraphics = GraphicRegistry.GetGraphicsForCanvas(canvas);
        for (int i = 0; i < foundGraphics.Count;   i)
        {
            Graphic graphic = foundGraphics[i];

            // -1 means it hasn\\\\'t been processed by the canvas, which means it isn\\\\'t actually drawn
            if (graphic.depth == -1 || !graphic.raycastTarget)
                continue;

            if (!RectTransformUtility.RectangleContainsScreenPoint(graphic.rectTransform, pointerPosition, eventCamera))
                continue;

            if (graphic.Raycast(pointerPosition, eventCamera))
            {
                s_SortedGraphics.Add(graphic);
            }
        }
    ...
    }
2.2 事件触发过程

ExecuteEvents:Execute、EventFunction

Button Click触发过程.png

射线检测鼠标位置下的Graphic.png

事件触发-EventTrigger中的事件.png

3. 如何重绘

  1. UI发生变动时,会将发生变动的元素加入渲染队列(CanvasUpdateRegistry)
  2. 注册Canvas.WillRenderCanvases事件,UI发生变动,该事件触发。

在CanvasUpdateRegistry内部,需要关注的方法是PerformUpdate。当Canvas组件触发WillRenderCanvases事件时都会调用这个方法。这个事件每一帧都会执行一次。

  1. 该事件从渲染队列中获取元素,分别调用ReBuild方法
  2. ReBuild方法中完成网格、材质等更新

1.绘制过程.png

2.图形绘制调用图.png

3.PerformUpdate.png

 

一、动态合批

  1. 要求相同材质,图集
  2. 注意sprite穿插,影响合批。

为什么sprite层级会影响合批?

这关联到渲染顺序。UI元素的默认Render Queue是3000 (UI-Default.shader),即

"Queue"="Transparent"

,半透明对象,没有开启深度写入

ZWrite Off

,要得到正确的的渲染效果,就必须从后向前渲染(相对于相机)。
若sprite穿插,只能从后向前渲染,无法合批成1次渲染。

 
UI元素的默认Render Queue.png

UI-Default.shader节选:

SubShader
{
    Tags
    {
        "Queue"="Transparent"
        "IgnoreProjector"="True"
        "RenderType"="Transparent"
        "PreviewType"="Plane"
        "CanUseSpriteAtlas"="True"
    }
    ...
    ZWrite Off
    ZTest [unity_GUIZTestMode]
    ...
}
  1. 注意Mask组件,Mask使用了模板缓冲区,内部子节点不能和外部合批.

Masking is implemented using the stencil buffer of the GPU.

二、空Sprite响应点击,替代透明Image,无DrawCall方案

使用透明Image作为响应点击的Graphic会增加一个DrawCall,如何实现一个无DrawCall方案呢?

关键有2点:

  1. 继承Graphic,override OnPopulateMesh方法
    toFill.Clear();
  2. 实现ICanvasRaycastFilter,将 Raycast Target置为true,这样才能响应点击。

示例:

public class XXX: Graphic, ICanvasRaycastFilter {

    protected override void Awake() {
        base.Awake();
        color = new Color(1.0f, 1.0f, 1.0f, 0.0f);
    }

    protected override void OnPopulateMesh(VertexHelper toFill) {
        toFill.Clear();
    }

    public virtual bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera) {
        return true;
    }
}

三、圆形或多边形图片,替代Mask,无DrawCall方案

与上面空sprite原理类似,都是对OnPopulateMesh方法的重写

  1. 改写入圆形顶点数据–已知半径;
  2. 设置uv等信息;

丢掉Mask遮罩,更好的圆形Image组件[Unity]

发表评论