UGUI源码试探究 (一) 图形绘制

UGUI源码试探究 (一)

1. 前言

1.1 UGUI是什么

• UGUI是Unity官方推出的UI系统, 集成了所见即所得的UI解决方案, 其功能丰富并且使用简单, 同时其部分源代码也是开放的

• 下载地址：https://bitbucket.org/Unity-Technologies/ui/src

2. 图形绘制

2.1 绘制基础

Mesh：

• 通俗的讲, Mesh是指模型的网格, 3D模型是由多边形拼接而成, 而一个复杂的多边形, 实际上是由多个三角形拼接而成. 所以一个3D模型的表面是由多个彼此相连的三角形构成. 三维空间中, 构成这些三角形的点以及三角形的边的集合就是Mesh. 如下图所示：

Vertex：

• 顶点, 组成Mesh的元素. 一个三角面有3个顶点, 如下图:

Triangle:

• 三角形, 通过指定顶点索引顺序来构成三角形

• 三角形的顶点顺序为顺时针

• 在下图中, 构成M和N的顶点顺序可以为: (A, B, C), (C, D A)

UV：

• 纹理贴图坐标

• 顶点属性中储存UV坐标, 指的是该点对应纹理的位置

• UV的坐标轴值范围为(0, 1), 与纹理的大小比例无关

VertexHelper:

• 一个Unity提供的帮助类, 用于帮助生成Mesh

• 主要方法说明:

  • AddVert: 向顶点缓冲流中加入一个顶点, 包括顶点的属性(位置, 颜色, UV坐标等)

  • AddTriangle: 向索引缓冲流中加入一个三角形, 参数为构成三角形的顶点的索引(注意顺序为顺时针)

  • FillMesh: 将VertexHelper中的缓存数据填入到指定的Mesh网格中

2.2 绘制基础实例

下面通过使用VertexHelper和射线检测来实现可动态变化的简易Image

最终效果如图: