Unity3d：NGUI所见即所得之UIWidget , UIGeometry & UIDrawCall

转自：http://dsqiu.iteye.com/blog/1965340

NGUI所见即所得之UIWidget , UIGeometry & UIDrawCall

UIWidget是所有UI组件的抽象基类，作为基类当然定义了必须的成员变量和函数，接触过MFC或其他UI组件开发，想必都知道有一堆参数设置，尤其是Visual Studio的可视化界面，简直太丰富了，UIWidget要当UI组件的爹就必须得具备这些，下面就一一介绍：

Pivot

Pivot，这个枚举，其实定义了GameObject中心坐标在整个组件的位置，这个跟UIStretch很类似，只不过UIStretch说的是组件相对于屏幕的位置。

C#代码


public enum Pivot

{

TopLeft,

Top,

TopRight,

Left,

Center,

Right,

BottomLeft,

Bottom,

BottomRight,

}

Pivot可以提供开发者更多的定位模式，可以方便实现组件对齐，如对个UILabel组件的文本居中对齐。当然这样，在计算组件的四个角的顶点坐标（localCorners）就得考虑Pivot。

localCorners，worldCorners & innerWorldCorners

这三个变量都是四个角的顶点坐标，只是localCorners是计算局部的（相对gameObject的中心而言）坐标，worldCorners只是将localCorners作为世界坐标空间的坐标，innerWorlCorners则考虑了边框Border。

C#代码


public virtual Vector3[] localCorners

{

get

{

Vector2 offset = pivotOffset;

float x0 = -offset.x * mWidth;

float y0 = -offset.y * mHeight;

float x1 = x0 + mWidth;

float y1 = y0 + mHeight;

mCorners[0] = new Vector3(x0, y0, 0f);

mCorners[1] = new Vector3(x0, y1, 0f);

mCorners[2] = new Vector3(x1, y1, 0f);

mCorners[3] = new Vector3(x1, y0, 0f);

return mCorners;

}

}

上面代码中的pivotOffset的计算就考虑了Pivot：

C#代码


static public Vector2 GetPivotOffset (UIWidget.Pivot pv)

{

Vector2 v = Vector2.zero;

if (pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Bottom) v.x = 0.5f;

else if (pv == UIWidget.Pivot.TopRight || pv == UIWidget.Pivot.Right || pv == UIWidget.Pivot.BottomRight) v.x = 1f;

else v.x = 0f;

if (pv == UIWidget.Pivot.Left || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Right) v.y = 0.5f;

else if (pv == UIWidget.Pivot.TopLeft || pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.TopRight) v.y = 1f;

else v.y = 0f;

return v;

}

发现pivotOffset是一个由0,0.5,1组成的二维向量，所以前面计算localCorners的原理就可想而知了。

当然还有诸如width(minWidth),height(minHeight),depth(raycastDepth),alpha(finalAlpha)，看了代码就自然一目了然了。rayCastDepth和finalAlpha都考虑了UIPanel的因素，所以有时表层看着没问题，可能就要去看下底层的实现。

两大基石：UIDrawCall和UIGeometry

根据我有限的3D知识（其实没有学过），隐约觉得3D呈现出来的东西都是由顶点（vertice）构成的Mesh通过纹理贴图构成的材质渲染出来的。

但是NGUI所有组件都没有看到Mesh Render，只有transform信息和脚本，查看UIWidget：

C#代码


/// <summary>

/// Internal usage -- draw call that's drawing the widget.

/// </summary>

public UIDrawCall drawCall { get; set; }

// Widget's generated geometry

UIGeometry mGeom = new UIGeometry();

这就是UIDrawCall和UIGeometry神一般的存在。

UIGeometry

UIGeometry其实是UI组件的数据仓库，存储UI组件的Vertices，UVs和Colors，以及相对UIPanel的顶点Vertices，法向量和切线：

C#代码


/// <summary>

/// Widget's vertices (before they get transformed).

/// </summary>

public BetterList<Vector3> verts = new BetterList<Vector3>();

/// <summary>

/// Widget's texture coordinates for the geometry's vertices.

/// </summary>

public BetterList<Vector2> uvs = new BetterList<Vector2>();

/// <summary>

/// Array of colors for the geometry's vertices.

/// </summary>

public BetterList<Color32> cols = new BetterList<Color32>();

// Relative-to-panel vertices, normal, and tangent

BetterList<Vector3> mRtpVerts = new BetterList<Vector3>();

Vector3 mRtpNormal;

Vector4 mRtpTan;

UIGeometry为此提供了三个函数，也可以说是为渲染绘制做的三个步骤：

Step 1: Clear() 情况存储的信息

Step 2: ApplyTransform() 将verts转化为相对UIPanel的顶点坐标mRtpVerts

Step 3: WriteToBuffers() 将数据仓库缓存的数据添加到UIPanel的缓存数据队列中去。

UIWidget分别用UpdateGeometry和WriteToBuffers对UIGeometry的ApplyTransform和WriteToBuffers进行封装调用，ApplyTransform是根据UIPanel的坐标调整Vertices的坐标，WriteToBuffers将UIGeometry的Vertices，UVs和Colors添加进UIPanel的Vertices，UVs和Colors的BetterList中。

这里还有一个细节就是：UIGeometry中的Vertices，UVs和Colors的BetterList的buffer什么时候得到，因为这些都是UIWidget或其子类的信息，所以在UIWidget的子类UILabel，UISprite和UITexture中OnFill函数生成UIGeometry的BetterList的buffer。

UIDrawCall

如果是UIGeometry为了渲染绘制准备数据，那么UIDrawCall其实是定义了渲染绘制需要的基本组件。这里拿煮菜做个比喻帮助理解：UIGeometry好比为煮菜准备食材，UIDrawCall好比是煮菜的工具（锅，炉子等），UIPanel就是大厨了决定着什么时候该煮菜，UIWidget（UILabel，UISprite和UITexture）是这道菜怎么样的最终呈现。会不会很好理解呢？

下面就直接看下Set函数：

C#代码


if (mFilter == null) mFilter = gameObject.AddComponent<MeshFilter>();

if (mRen == null) mRen = gameObject.GetComponent<MeshRenderer>();

在Set函数中就给gameObjdect添加了MeshFilter和MeshRenderer组件，当然还做了其他辅助的工作。

此外，在UpdateMaterials惊奇的发现了UIPanel clipView的AlphaClip和SoftClip的实现，其实就是更换了Material的Shader，这也体现了Shader强大，不得不学呀，DSQiu在后面也会对Unity的Shader编程做一个整理。

回放细节，回笼锻造

看了上面就会觉得写得的确是所见即所得——D.S.Qiu好像都没有看到什么要害，都说学武功就要学习上次心法，一点皮毛总是会惹来耻笑。

还是回到UIWidget这个脚本中的两个函数：WriteToBuffers，OnFill，UpdateGeometry。

WriteToBuffers和OnFill这两个函数都是将Vertices，UVs和Colors等add进参数的List中去，查看WriteToBuffers的调用出发现其参数是UIPanel的Vertices，UVs和Colors，而OnFill的参数是UIGeometry的Vertices，UVs和Colors。

WriteToBuffers只是对UIGeometry的封装调用，也就是说将UIGeometry的Vertices，UVs和Colors等信息add进UIPanel的对应List中。

在看UIGeometry的脚本，一直有一个疑问：UIGeometry的Vertices，UVs和Colors的List没有看到add方法的执行，只有在WriteToBuffers被add。直到看到了OnFill才恍然大悟，虽然UIWidget的OnFill是虚函数，没有具体实现，看了下UISprite重写的OnFill函数，就是把Vertices，UVs和Colors 添加到UIGeometry的Vertices，UVs和Colors中。

转了一大圈，发现最后所有UI组件的Vertices，UVs和Colors都汇集到UIPanel的Vertices，UVs和Colors去了，然后UIPanel指定给UIDrawCall渲染就行了，具体细节还要等攻克UIPanel就明白了。

其他细节

到这里差不多把本文的内容都掏干净了，剩下的就是看下UIWidget的一些实现细节，MakePixelPerfect():对gameObject的localPosition和locaScale进行微调和纠正。

SetDirty():调用UIPanel的SetDirty()对组件的变更进行重建（rebuilt)。

CreatPanel():这个函数可以得知，所有UI组件一定是放在UIPanel的子节点上的，从前面的分析也可以知道：因为是UIPanel对统一对组件进行渲染绘制的，所以如果没有UIPanel有点“皮之不存，毛将附焉”的意思。

这也越发激发D.S.Qiu 去啃UIPanel这个主心骨。

小结：

总算对UIWidget，UIGeomerty 和UIDrawCall有了一个清晰的认识，这三个组件可以说是NGUI的背后无名英雄（平时使用都不会接触者三个脚本），功能很强大但很简单，真的很佩服NGUI的设计思路。

但我也有点小微词：UIWidget都被定义成长方形的，要是能提供自定义UI的接口（如我想画一个圆形UI），那将会更强大；底层缓存了很多数据，这个是内存和开发者的代码逻辑也是要考虑到的。

最后附上①画的NGUI框架图：



如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（gd.s.qiu@gmail.com)交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。

转载请在文首注明出处：http://dsqiu.iteye.com/blog/1965340

更多精彩请关注D.S.Qiu的博客和微博（ID：静水逐风）

参考：

①dujimache：http://www.unitymanual.com/forum.php?mod=viewthread&tid=5579&highlight=NGUI%E6%A1%86%E6%9E%B6