NGUI所见即所得之UISprite & UILabel

kiki的号 2017-03-20

展开全文

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

public enum Type
{
Simple,
Sliced,
Tiled,
Filled,
}

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

C#代码

/// <summary>
/// Sprite's dimensions used for drawing. X = left, Y = bottom, Z = right, W = top.
/// This function automatically adds 1 pixel on the edge if the sprite's dimensions are not even.
/// It's used to achieve pixel-perfect sprites even when an odd dimension sprite happens to be centered.
/// </summary>
Vector4 drawingDimensions
{
get
{
if (mSprite == null)
{
return new Vector4(0f, 0f, mWidth, mHeight);
}
int padLeft = mSprite.paddingLeft;
int padBottom = mSprite.paddingBottom;
int padRight = mSprite.paddingRight;
int padTop = mSprite.paddingTop;
Vector2 pv = pivotOffset;
int w = mSprite.width + mSprite.paddingLeft + mSprite.paddingRight;
int h = mSprite.height + mSprite.paddingBottom + mSprite.paddingTop;
if ((w & 1) == 1) ++padRight;
if ((h & 1) == 1) ++padTop;
float invW = 1f / w;
float invH = 1f / h;
Vector4 v = new Vector4(padLeft * invW, padBottom * invH, (w - padRight) * invW, (h - padTop) * invH);
v.x -= pv.x;
v.y -= pv.y;
v.z -= pv.x;
v.w -= pv.y;
v.x *= mWidth;
v.y *= mHeight;
v.z *= mWidth;
v.w *= mHeight;
return v;
}
}

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

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

C#代码

public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
{
Texture tex = mainTexture;
if (tex != null)
{
if (mSprite == null) mSprite = atlas.GetSprite(spriteName);
if (mSprite == null) return;
mOuterUV.Set(mSprite.x, mSprite.y, mSprite.width, mSprite.height);
mInnerUV.Set(mSprite.x + mSprite.borderLeft, mSprite.y + mSprite.borderTop,
mSprite.width - mSprite.borderLeft - mSprite.borderRight,
mSprite.height - mSprite.borderBottom - mSprite.borderTop);
mOuterUV = NGUIMath.ConvertToTexCoords(mOuterUV, tex.width, tex.height); // Convert from top-left based pixel coordinates to bottom-left based UV coordinates.
mInnerUV = NGUIMath.ConvertToTexCoords(mInnerUV, tex.width, tex.height);
}
switch (type)
{
case Type.Simple:
SimpleFill(verts, uvs, cols);
break;
case Type.Sliced:
SlicedFill(verts, uvs, cols);
break;
case Type.Filled:
FilledFill(verts, uvs, cols);
break;
case Type.Tiled:
TiledFill(verts, uvs, cols);
break;
}
}

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

C#代码

protected void SimpleFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
{
Vector2 uv0 = new Vector2(mOuterUV.xMin, mOuterUV.yMin);
Vector2 uv1 = new Vector2(mOuterUV.xMax, mOuterUV.yMax);
Vector4 v = drawingDimensions;
verts.Add(new Vector3(v.x, v.y));
verts.Add(new Vector3(v.x, v.w));
verts.Add(new Vector3(v.z, v.w));
verts.Add(new Vector3(v.z, v.y));
uvs.Add(uv0);
uvs.Add(new Vector2(uv0.x, uv1.y));
uvs.Add(uv1);
uvs.Add(new Vector2(uv1.x, uv0.y));
Color colF = color;
colF.a *= mPanel.alpha;
Color32 col = atlas.premultipliedAlpha ? NGUITools.ApplyPMA(colF) : colF;
cols.Add(col);
cols.Add(col);
cols.Add(col);
cols.Add(col);
}

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

/// <summary>
/// Process the raw text, called when something changes.
/// </summary>
void ProcessText (bool legacyMode)
{
if (!isValid) return;
mChanged = true;
hasChanged = false;
int fs = fontSize; //字体大小
float ps = pixelSize; //UIFont的像素大小
float invSize = 1f / ps;
mPrintedSize = Mathf.Abs(legacyMode ? Mathf.RoundToInt(cachedTransform.localScale.x) : fs);
float lw = legacyMode ? (mMaxLineWidth != 0 ? mMaxLineWidth * invSize : 1000000) : width * invSize;
float lh = legacyMode ? (mMaxLineHeight != 0 ? mMaxLineHeight * invSize : 1000000) : height * invSize;
if (mPrintedSize > 0)
{
for (;;)
{
mScale = (float)mPrintedSize / fs; //计算出放缩比
bool fits = true;
int pw = (mOverflow == Overflow.ResizeFreely) ? 100000 : Mathf.RoundToInt(lw / mScale);
int ph = (mOverflow == Overflow.ResizeFreely || mOverflow == Overflow.ResizeHeight) ?
100000 : Mathf.RoundToInt(lh / mScale);
if (lw > 0f || lh > 0f)
{
if (mFont != null) fits = mFont.WrapText(mText, fs, out mProcessedText, pw, ph, mMaxLineCount, mEncoding, mSymbols);
#if DYNAMIC_FONT
else fits = NGUIText.WrapText(mText, mTrueTypeFont, fs, mFontStyle, pw, ph, mMaxLineCount, mEncoding, out mProcessedText);
#endif
}
else mProcessedText = mText;
// Remember the final printed size
if (!string.IsNullOrEmpty(mProcessedText))
{
if (mFont != null) mCalculatedSize = mFont.CalculatePrintedSize(mProcessedText, fs, mEncoding, mSymbols);
#if DYNAMIC_FONT
else mCalculatedSize = NGUIText.CalculatePrintedSize(mProcessedText, mTrueTypeFont, fs, mFontStyle, mEncoding);
#endif
}
else mCalculatedSize = Vector2.zero;
//根据不同overflowMethod调整文字显示
if (mOverflow == Overflow.ResizeFreely)
{
mWidth = Mathf.RoundToInt(mCalculatedSize.x * ps);
mHeight = Mathf.RoundToInt(mCalculatedSize.y * ps);
}
else if (mOverflow == Overflow.ResizeHeight)
{
mHeight = Mathf.RoundToInt(mCalculatedSize.y * ps);
}
else if (mOverflow == Overflow.ShrinkContent && !fits)
{
if (--mPrintedSize > 1) continue;
}
// Upgrade to the new system
if (legacyMode)
{
width = Mathf.RoundToInt(mCalculatedSize.x * ps);
height = Mathf.RoundToInt(mCalculatedSize.y * ps);
cachedTransform.localScale = Vector3.one;
}
break;
}
}
else
{
cachedTransform.localScale = Vector3.one;
mProcessedText = "";
mScale = 1f;
}
}