NGUI所见即所得之UISprite & UILabel

 NGUI所见即所得之UISprite & UILabel

        UISprite UILabel是NGUI最基础的组件，是UIWidget的子类，之前写过NGUI所见即所得之UIWidget , UIGeometry & UIDrawCall UIWidget,UIGeometry & UIDrawCall是NGUI的UI组件绘制的底层实现，UISprite，UILabel就把要绘制的材料——顶点，纹理，纹理UV，颜色值等传给底层，底层负责协调绘制渲染。

 

UISprite

        NGUI3.0.3d版本已经将UISprite,UIFillSprite,UISliceSprite,UITiledSprite整合在一个UISprite中，用Type来区分：

C#代码  

1. public enum Type  
2.     {  
3.         Simple,  
4.         Sliced,  
5.         Tiled,  
6.         Filled,  
7.     }  

        UISprite主要是重写（override)OnFill函数——把Vertices，UVs和Colors添加进UIGeometry中。在分析OnFill之前，先看下drawingDimensions的实现：

C#代码  

1.        /// <summary>  
2. /// Sprite's dimensions used for drawing. X = left, Y = bottom, Z = right, W = top.  
3. /// This function automatically adds 1 pixel on the edge if the sprite's dimensions are not even.  
4. /// It's used to achieve pixel-perfect sprites even when an odd dimension sprite happens to be centered.  
5. /// </summary>  
6.   
7. Vector4 drawingDimensions  
8. {  
9.     get  
10.     {  
11.         if (mSprite == null)  
12.         {  
13.             return new Vector4(0f, 0f, mWidth, mHeight);  
14.         }  
15.   
16.         int padLeft = mSprite.paddingLeft;  
17.         int padBottom = mSprite.paddingBottom;  
18.         int padRight = mSprite.paddingRight;  
19.         int padTop = mSprite.paddingTop;  
20.   
21.         Vector2 pv = pivotOffset;  
22.   
23.         int w = mSprite.width + mSprite.paddingLeft + mSprite.paddingRight;  
24.         int h = mSprite.height + mSprite.paddingBottom + mSprite.paddingTop;  
25.   
26.         if ((w & 1) == 1) ++padRight;  
27.         if ((h & 1) == 1) ++padTop;  
28.   
29.         float invW = 1f / w;  
30.         float invH = 1f / h;  
31.         Vector4 v = new Vector4(padLeft * invW, padBottom * invH, (w - padRight) * invW, (h - padTop) * invH);  
32.   
33.         v.x -= pv.x;  
34.         v.y -= pv.y;  
35.         v.z -= pv.x;  
36.         v.w -= pv.y;  
37.   
38.         v.x *= mWidth;  
39.         v.y *= mHeight;  
40.         v.z *= mWidth;  
41.         v.w *= mHeight;  
42.   
43.         return v;  
44.     }  
45. }  

        其实drawingDimensions可以看成纹理贴图的x,y轴的区间，也就是说纹理在x轴区间为（v.x, v.z)，y轴区间为(v.y,v.w)的矩形。注释中，说道如果drawingDimension不是偶数，则会添加一个像素，这个处理导致UISprite的类型是Tiled，有可能出现间隙，网上也有人通过设置一个像素的Border来解决这个问题，当然最本质就是纹理贴图像素是偶数的。

 

        下面给出OnFill函数，在代码中给出注释：

 

C#代码  

1. public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)  
2.     {  
3.         Texture tex = mainTexture;  
4.   
5.         if (tex != null)  
6.         {  
7.             if (mSprite == null) mSprite = atlas.GetSprite(spriteName);  
8.             if (mSprite == null) return;  
9.   
10.             mOuterUV.Set(mSprite.x, mSprite.y, mSprite.width, mSprite.height);  
11.             mInnerUV.Set(mSprite.x + mSprite.borderLeft, mSprite.y + mSprite.borderTop,  
12.                 mSprite.width - mSprite.borderLeft - mSprite.borderRight,  
13.                 mSprite.height - mSprite.borderBottom - mSprite.borderTop);  
14.   
15.             mOuterUV = NGUIMath.ConvertToTexCoords(mOuterUV, tex.width, tex.height);      // Convert from top-left based pixel coordinates to bottom-left based UV coordinates.  
16.             mInnerUV = NGUIMath.ConvertToTexCoords(mInnerUV, tex.width, tex.height);  
17.         }  
18.   
19.         switch (type)  
20.         {  
21.             case Type.Simple:  
22.             SimpleFill(verts, uvs, cols);  
23.             break;  
24.   
25.             case Type.Sliced:  
26.             SlicedFill(verts, uvs, cols);  
27.             break;  
28.   
29.             case Type.Filled:  
30.             FilledFill(verts, uvs, cols);  
31.             break;  
32.   
33.             case Type.Tiled:  
34.             TiledFill(verts, uvs, cols);  
35.             break;  
36.         }  
37.     }  

      SimpleFill最简单了，直接添加Verts，UVs，Colors，SimpleFill就只有四个顶点绘制贴图，SliceFill，TiledFill，FiledFill都是转换为SimpleFill的情况来绘制的。

 

C#代码  

1. protected void SimpleFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)  
2.     {  
3.         Vector2 uv0 = new Vector2(mOuterUV.xMin, mOuterUV.yMin);  
4.         Vector2 uv1 = new Vector2(mOuterUV.xMax, mOuterUV.yMax);  
5.   
6.         Vector4 v = drawingDimensions;  
7.   
8.         verts.Add(new Vector3(v.x, v.y));  
9.         verts.Add(new Vector3(v.x, v.w));  
10.         verts.Add(new Vector3(v.z, v.w));  
11.         verts.Add(new Vector3(v.z, v.y));  
12.   
13.         uvs.Add(uv0);  
14.         uvs.Add(new Vector2(uv0.x, uv1.y));  
15.         uvs.Add(uv1);  
16.         uvs.Add(new Vector2(uv1.x, uv0.y));  
17.   
18.         Color colF = color;  
19.         colF.a *= mPanel.alpha;  
20.         Color32 col = atlas.premultipliedAlpha ? NGUITools.ApplyPMA(colF) : colF;  
21.           
22.         cols.Add(col);  
23.         cols.Add(col);  
24.         cols.Add(col);  
25.         cols.Add(col);  
26.     }  

      SliceFill其实就是把矩形纹理切成九宫格，就是九个SimpleFill，贴出注释，详细看源码：

                                           Sliced sprite fill function is more complicated as it generates 9 quads instead of 1.

      TiledFill可以简单的看成：（组件面积/纹理贴图面积 ）个SimpleFill

       FilledFill代码是很复杂，但是其实也是把扇形切割成四边形来SimpleFill

       这种解决问题的方法很值得借鉴，记得高中的时候解数学难题一般都是将复杂问题分解成多个简单的问题，SimpleFill相当于是一个子问题，Slice，Tiled，Filed都是转化为Simple的情况来解决，这个点推到动态规划算法的方程一样，如果对问题理解好了，自然就迎刃而解。

 

 UILabel

       UILabel的样式越来越多了，和UISprite一样一个脚本充当多种角色（UISprite,UIFilledSprite,UISlicedSprite），由于UIFont有使用ttf 的Font的动态字体，还有使用BMFont等软件编辑生成的Bitmap字体，所以成员变量比较多。mFont就是当前UILabel使用的字体，如果是动态字体的话，trueTypeFont(ttf的缩写）就是Font，字体的大小就是mFont的defaultSize。

       supportEncoding： 是否支持颜色和换行

       大多数属性改变都会调用到ProcessText():

C#代码  

1.          /// <summary>  
2.     /// Process the raw text, called when something changes.  
3.     /// </summary>  
4.   
5.     void ProcessText (bool legacyMode)  
6.     {  
7.         if (!isValid) return;  
8.   
9.         mChanged = true;  
10.         hasChanged = false;  
11.   
12.         int fs = fontSize;  //字体大小  
13.         float ps = pixelSize;   //UIFont的像素大小  
14.         float invSize = 1f / ps;  
15.           
16.         mPrintedSize = Mathf.Abs(legacyMode ? Mathf.RoundToInt(cachedTransform.localScale.x) : fs);  
17.           
18.         float lw = legacyMode ? (mMaxLineWidth != 0 ? mMaxLineWidth * invSize : 1000000) : width * invSize;  
19.         float lh = legacyMode ? (mMaxLineHeight != 0 ? mMaxLineHeight * invSize : 1000000) : height * invSize;  
20.   
21.         if (mPrintedSize > 0)  
22.         {  
23.             for (;;)  
24.             {  
25.                 mScale = (float)mPrintedSize / fs;  //计算出放缩比  
26.   
27.                 bool fits = true;  
28.   
29.                 int pw = (mOverflow == Overflow.ResizeFreely) ? 100000 : Mathf.RoundToInt(lw / mScale);  
30.                 int ph = (mOverflow == Overflow.ResizeFreely || mOverflow == Overflow.ResizeHeight) ?  
31.                     100000 : Mathf.RoundToInt(lh / mScale);  
32.   
33.                 if (lw > 0f || lh > 0f)  
34.                 {  
35.                     if (mFont != null) fits = mFont.WrapText(mText, fs, out mProcessedText, pw, ph, mMaxLineCount, mEncoding, mSymbols);  
36. #if DYNAMIC_FONT  
37.                     else fits = NGUIText.WrapText(mText, mTrueTypeFont, fs, mFontStyle, pw, ph, mMaxLineCount, mEncoding, out mProcessedText);  
38. #endif  
39.                 }  
40.                 else mProcessedText = mText;  
41.   
42.                 // Remember the final printed size  
43.                 if (!string.IsNullOrEmpty(mProcessedText))  
44.                 {  
45.                     if (mFont != null) mCalculatedSize = mFont.CalculatePrintedSize(mProcessedText, fs, mEncoding, mSymbols);  
46. #if DYNAMIC_FONT  
47.                     else mCalculatedSize = NGUIText.CalculatePrintedSize(mProcessedText, mTrueTypeFont, fs, mFontStyle, mEncoding);  
48. #endif  
49.                 }  
50.                 else mCalculatedSize = Vector2.zero;  
51.                                 //根据不同overflowMethod调整文字显示  
52.                 if (mOverflow == Overflow.ResizeFreely)  
53.                 {  
54.                     mWidth = Mathf.RoundToInt(mCalculatedSize.x * ps);  
55.                     mHeight = Mathf.RoundToInt(mCalculatedSize.y * ps);  
56.                 }  
57.                 else if (mOverflow == Overflow.ResizeHeight)  
58.                 {  
59.                     mHeight = Mathf.RoundToInt(mCalculatedSize.y * ps);  
60.                 }  
61.                                   
62.                 else if (mOverflow == Overflow.ShrinkContent && !fits)  
63.                 {  
64.                     if (--mPrintedSize > 1) continue;  
65.                 }  
66.   
67.                 // Upgrade to the new system  
68.                 if (legacyMode)  
69.                 {  
70.                     width = Mathf.RoundToInt(mCalculatedSize.x * ps);  
71.                     height = Mathf.RoundToInt(mCalculatedSize.y * ps);  
72.                     cachedTransform.localScale = Vector3.one;  
73.                 }  
74.                 break;  
75.             }  
76.         }  
77.         else  
78.         {  
79.             cachedTransform.localScale = Vector3.one;  
80.             mProcessedText = "";  
81.             mScale = 1f;  
82.         }  
83.     }  

       这里涉及的变量比较多，做下简单的列举：

C#代码  

1. int fs = fontSize;  //字体大小  
2. float ps = pixelSize;  //一个像素的大小  
3. float invSize = 1f/ps;     可以认为unity单位1的距离有多少个像素  
4. mPritedSize;  可以认为等同 fs，即字体大小  
5. float lw 和 float lh;   //长和宽各有多少个像素  
6. mScale;   就是transfrom的放缩比  
7. int pw 和 int ph;   //在不同overflowMethod下的像素个数，考虑放缩mScale  
8.   
9. mCalculatedSize;   //文字一共占用多少个像素面积  
10. mWidth = mCalculatedSize * ps;     
11.   
12. 两个函数：  
13. mFont.WrapText;   //根据当前参数调整文字显示  
14. mCalculatedSize;    //计算当前显示的文字的像素面积  

          ProcessText的目的就是通过当前设置的参数去调整文字的显示以及长宽等……

          UIWidget的子类都有一个必可少的函数OnFill，因为整个函数是虚函数，函数的作用在前面都以及讲过，这里主要是调用UIFont的Print函数对Verts，UVs，Colors进行填充，就不贴代码了，有需求可以仔细研究下……

 

『文本缩放样式：

C#代码  

1. public enum Overflow  
2. {  
3.     ShrinkContent,  
4.     ClampContent,  
5.     ResizeFreely,  
6.     ResizeHeight,  
7. }  
8.   
9. public enum Crispness  
10. {  
11.     Never,  
12.     OnDesktop,  
13.     Always,  
14. }  

       UILabel现在支持四种文本样式，这里做下简单的解释：

                 1.ShrinkContent，总是显示所有文字，根据当前的width和height进行缩放

                 2.ClampContent，一看到Clamp就想起Clamp函数，也就是不管文本多少个字，根据当前的width和height来显示，超出部分不显示

                 3.ResizeFreely，会对当前的文字长度和行数来调整，UILabel的width和height

                 4.ResizeHeight，如果UILabel的width不够就会调整height值，进行多行显示，即保持宽度不变，更加文本长度调整height

      除了第一种会对文字的大小进行放缩，其他三个样式都不会对文字本身的大小进行调整。』

 

                                                                                                                                                                                              增补于 2013,12,23 下午 16:38

 

『Bug修复：                                                                                                                                                             

      更新了NGUI到版本3.0.7f3，发现使用动态字体时，多行文字总是向上增长（而且只有动态字体才出现，Bitmap没有这个问题，后面测试了才发现的），然后只有比对UILabel和NGUIText的代码：

C#代码  

1. v0.x = x + mTempChar.vert.xMin;  
2. v0.y = y + mTempChar.vert.yMax - baseline;  

 只要细致的，都能看出有问题，x和y都是绝对值（正），所以如果x方向是 + ，那么 y方向就应该是 -。

       然后又去看了之前的版本发现：

C#代码  

1. v0.x =  (x + mTempChar.vert.xMin);  
2. r.vert.yMax + baseline);  

 看到这里就应该恍然大悟了，NGUI的技术太不认真了哈。

这样也推荐下文件比较工具Beyound Compare软件，还是很容易两个文件不同的地方。』

                                                                                              最近没有时间写博客了，只有利用写时间进行修修补补                     增补于：2014,1,3:14:00

小结：

        其实，UISprite很简单，不难，只是之前一直对Filed ，Slice，Tiled的实现很好奇，感觉很神奇，当然D.S.Qiu还有很多没有弄明白的：

                1.UVs是的作用是？

                2.在哪里指定材质Material或纹理

                3.Unity单位和屏幕分辨率以及像素大小的关系，现在感觉挺混乱的。

      

还是尽早去琢磨UIPanel吧。

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

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

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

 

 

        本来按到原来本来想另起一篇写UILabel的，但是感觉目前的写不到很长和耐人寻味的篇幅，所以只有接在这篇写下去，改了个题目。

        然后上面的疑问，也有了点理解：1.Verts是渲染的位置的顶点，而且是相对于UIPanel，UVs就是纹理上的坐标，如果说Verts是画板，UVs就是颜色板上的颜色；2.Material就是UIAtlas和UIFont中的Material。

        2013.11.5 凌晨   增补