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

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

博客分类： 
• Unity
• NGUI
• 源码分析

unityNGUI 

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

 

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

 

Pivot

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

C#代码  

1. public enum Pivot  
2.     {  
3.         TopLeft,  
4.         Top,  
5.         TopRight,  
6.         Left,  
7.         Center,  
8.         Right,  
9.         BottomLeft,  
10.         Bottom,  
11.         BottomRight,  
12.     }  

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

 

localCorners，worldCorners & innerWorldCorners

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

C#代码  

1. public virtual Vector3[] localCorners  
2. {  
3.     get  
4.     {  
5.         Vector2 offset = pivotOffset;  
6.   
7.         float x0 = -offset.x * mWidth;  
8.         float y0 = -offset.y * mHeight;  
9.         float x1 = x0 + mWidth;  
10.         float y1 = y0 + mHeight;  
11.   
12.         mCorners[0] = new Vector3(x0, y0, 0f);  
13.         mCorners[1] = new Vector3(x0, y1, 0f);  
14.         mCorners[2] = new Vector3(x1, y1, 0f);  
15.         mCorners[3] = new Vector3(x1, y0, 0f);  
16.   
17.         return mCorners;  
18.     }  
19. }  

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

C#代码  

1. static public Vector2 GetPivotOffset (UIWidget.Pivot pv)  
2.     {  
3.         Vector2 v = Vector2.zero;  
4.   
5.         if (pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Bottom) v.x = 0.5f;  
6.         else if (pv == UIWidget.Pivot.TopRight || pv == UIWidget.Pivot.Right || pv == UIWidget.Pivot.BottomRight) v.x = 1f;  
7.         else v.x = 0f;  
8.   
9.         if (pv == UIWidget.Pivot.Left || pv == UIWidget.Pivot.Center || pv == UIWidget.Pivot.Right) v.y = 0.5f;  
10.         else if (pv == UIWidget.Pivot.TopLeft || pv == UIWidget.Pivot.Top || pv == UIWidget.Pivot.TopRight) v.y = 1f;  
11.         else v.y = 0f;  
12.   
13.         return v;  
14.     }  

         发现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#代码  

1.         /// <summary>  
2. /// Internal usage -- draw call that's drawing the widget.  
3. /// </summary>  
4.   
5. public UIDrawCall drawCall { get; set; }  
6.   
7. // Widget's generated geometry  
8. UIGeometry mGeom = new UIGeometry();  

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

 

UIGeometry

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

C#代码  

1. /// <summary>  
2. /// Widget's vertices (before they get transformed).  
3. /// </summary>  
4.   
5. public BetterList<Vector3> verts = new BetterList<Vector3>();  
6.   
7. /// <summary>  
8. /// Widget's texture coordinates for the geometry's vertices.  
9. /// </summary>  
10.   
11. public BetterList<Vector2> uvs = new BetterList<Vector2>();  
12.   
13. /// <summary>  
14. /// Array of colors for the geometry's vertices.  
15. /// </summary>  
16.   
17. public BetterList<Color32> cols = new BetterList<Color32>();  
18.   
19. // Relative-to-panel vertices, normal, and tangent  
20. BetterList<Vector3> mRtpVerts = new BetterList<Vector3>();  
21. Vector3 mRtpNormal;  
22. 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#代码  

1. if (mFilter == null) mFilter = gameObject.AddComponent<MeshFilter>();  
2. 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有任何建议或意见可以在文章后面评论，或者发邮件（[e-mail])交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。

        转载请在文首注明出处：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