UI层的矩形按钮、矩形头像，很多时候都需要有个高亮的边框来点缀。最近本人写了一个扩展版的UI边框，跟使用UITexture一样方便，得到了特效师的高度评价，便拿出来献丑分享。效果如下：
小新的头像是一个UITexture，外面的边框是一个叫做UIHollowedTexture的UI组件（拿UITexture魔改而来），可以设置边框贴图，可以UV滚动。本文接下来会介绍UIHollowedTexture的做法。
对于正常的UITexture来说，其位置和尺寸决定了它的4个边角顶点的位置，然后根据这4个顶点绘制2个三角形，合成一个矩形图案；而对于UIHollowedTexture来说，得到4个边角点后，再根据我们需要的边框宽度，外拓得到4个外顶点，然后把每一侧的2个内点和2个外点绘制成一个四边形，如下图所示：
绘制顶点的问题解决了，然后是决定UV的问题，如下图所示，8个顶点分别对应整张贴图的指定位置，UV依据该图分配即可，注意我把图横向拉长了。
如果就这么做的话，显示上会有一个小问题，大家观察一下2367组成的四边形，它是个梯形，而我们贴在梯形上的贴图是个矩形。结果会导致贴图变形，原因如下图
假设有一张方形贴图，它有一条左上角到右下角的斜线，贴到矩形面片里是正常的（图1），而如果贴到梯形里（为了简化问题我用直角梯形说明），我最初以为会是图2那样，结果却会变成图3。因为一个四边形是2个三角形组成的，如果我们把一个矩形的右下角顶点朝右边拉一段距离，结果是左上角的三角形没有任何改变，而右下角的三角形发生了变形，导致斜线的斜率发生了变化，结果就是一条直线变成了折线。（为了能浅显解释这个问题我想了好久）。
我为这个显示问题请教了美术同学，他们表示可以通过把大梯形切割成多个小梯形来优化效果
如图所示，把梯形拆成上下堆叠的小梯形，这条斜线是不是平滑了一些？如果切的够细，就可以把它变成一条平滑的弧线，这样看起来就不突兀了。
上面把一些原理性的东西讲完了，接下来是具体代码：
脚本 UIHollowedTexture.cs
//-------------------------------------------------
// NGUI: Next-Gen UI kit
// Copyright © 2011-2018 Tasharen Entertainment Inc
// Create By LZ
//-------------------------------------------------
using UnityEngine;
using System.Collections.Generic;
/// <summary>
/// If you don't have or don't wish to create an atlas, you can simply use this script to draw a texture.
/// Keep in mind though that this will create an extra draw call with each UITexture present, so it's
/// best to use it only for backgrounds or temporary visible widgets.
/// </summary>
[ExecuteInEditMode]
[AddComponentMenu("NGUI/UI/NGUI Hollowed Texture")]
public class UIHollowedTexture : UIBasicSprite
{
[HideInInspector][SerializeField] Rect mRect = new Rect(0f, 0f, 1f, 1f);
[HideInInspector][SerializeField] Texture mTexture;
[HideInInspector][SerializeField] Shader mShader;
[HideInInspector][SerializeField] Vector4 mBorder = Vector4.zero;
[HideInInspector][SerializeField] bool mFixedAspect = false;
[HideInInspector] [SerializeField] int mBorderWidth = 10; // 边框宽度（像素）
[HideInInspector] [SerializeField] int mBorderPliesNum = 1; // 边框层数（由几圈边框组成）
[HideInInspector] [SerializeField] float mUvAnimSpeedH = 0; // UV动画速度 水平
[HideInInspector] [SerializeField] float mUvAnimSpeedV = 0; // UV动画速度 竖直
[HideInInspector] [SerializeField] bool mUvAnimIgnoreTimeScale = true; // UV动画是否忽略时间缩放
[System.NonSerialized] int mPMA = -1;
/// <summary>
/// Texture used by the UITexture. You can set it directly, without the need to specify a material.
/// </summary>
public override Texture mainTexture
{
get
{
if (mTexture != null) return mTexture;
if (mMat != null) return mMat.mainTexture;
return null;
}
set
{
if (mTexture != value)
{
if (drawCall != null && drawCall.widgetCount == 1 && mMat == null)
{
mTexture = value;
drawCall.mainTexture = value;
}
else
{
RemoveFromPanel();
mTexture = value;
mPMA = -1;
MarkAsChanged();
}
}
}
}
/// <summary>
/// Material used by the widget.
/// </summary>
public override Material material
{
get
{
return mMat;
}
set
{
if (mMat != value)
{
RemoveFromPanel();
mShader = null;
mMat = value;
mPMA = -1;
MarkAsChanged();
}
}
}
/// <summary>
/// Shader used by the texture when creating a dynamic material (when the texture was specified, but the material was not).
/// </summary>
public override Shader shader
{
get
{
if (mMat != null) return mMat.shader;
if (mShader == null) mShader = Shader.Find("Unlit/Transparent Colored");
return mShader;
}
set
{
if (mShader != value)
{
if (drawCall != null && drawCall.widgetCount == 1 && mMat == null)
{
mShader = value;
drawCall.shader = value;
}
else
{
RemoveFromPanel();
mShader = value;
mPMA = -1;
mMat = null;
MarkAsChanged();
}
}
}
}
/// <summary>
/// Whether the texture is using a premultiplied alpha material.
/// </summary>
public override bool premultipliedAlpha
{
get
{
if (mPMA == -1)
{
Material mat = material;
mPMA = (mat != null && mat.shader != null && mat.shader.name.Contains("Premultiplied")) ? 1 : 0;
}
return (mPMA == 1);
}
}
/// <summary>
/// Sprite's border. X = left, Y = bottom, Z = right, W = top.
/// </summary>
public override Vector4 border
{
get
{
return mBorder;
}
set
{
if (mBorder != value)
{
mBorder = value;
MarkAsChanged();
}
}
}
/// <summary>
/// UV rectangle used by the texture.
/// </summary>
public Rect uvRect
{
get
{
return mRect;
}
set
{
if (mRect != value)
{
mRect = value;
MarkAsChanged();
}
}
}
/// <summary>
/// Widget's dimensions used for drawing. X = left, Y = bottom, Z = right, W = top.
/// This function automatically adds 1 pixel on the edge if the texture's dimensions are not even.
/// It's used to achieve pixel-perfect sprites even when an odd dimension widget happens to be centered.
/// </summary>
public override Vector4 drawingDimensions
{
get
{
Vector2 offset = pivotOffset;
float x0 = -offset.x * mWidth;
float y0 = -offset.y * mHeight;
float x1 = x0 + mWidth;
float y1 = y0 + mHeight;
if (mTexture != null && mType != UISprite.Type.Tiled)
{
int w = mTexture.width;
int h = mTexture.height;
int padRight = 0;
int padTop = 0;
float px = 1f;
float py = 1f;
if (w > 0 && h > 0 && (mType == UISprite.Type.Simple || mType == UISprite.Type.Filled))
{
if ((w & 1) != 0) ++padRight;
if ((h & 1) != 0) ++padTop;
px = (1f / w) * mWidth;
py = (1f / h) * mHeight;
}
if (mFlip == UISprite.Flip.Horizontally || mFlip == UISprite.Flip.Both)
{
x0 += padRight * px;
}
else x1 -= padRight * px;
if (mFlip == UISprite.Flip.Vertically || mFlip == UISprite.Flip.Both)
{
y0 += padTop * py;
}
else y1 -= padTop * py;
}
float fw, fh;
if (mFixedAspect)
{
fw = 0f;
fh = 0f;
}
else
{
Vector4 br = border;
fw = br.x + br.z;
fh = br.y + br.w;
}
float vx = Mathf.Lerp(x0, x1 - fw, mDrawRegion.x);
float vy = Mathf.Lerp(y0, y1 - fh, mDrawRegion.y);
float vz = Mathf.Lerp(x0 + fw, x1, mDrawRegion.z);
float vw = Mathf.Lerp(y0 + fh, y1, mDrawRegion.w);
return new Vector4(vx, vy, vz, vw);
}
}
/// <summary>
/// Whether the drawn texture will always maintain a fixed aspect ratio.
/// This setting is not compatible with drawRegion adjustments (sliders, progress bars, etc).
/// </summary>
public bool fixedAspect
{
get
{
return mFixedAspect;
}
set
{
if (mFixedAspect != value)
{
mFixedAspect = value;
mDrawRegion = new Vector4(0f, 0f, 1f, 1f);
MarkAsChanged();
}
}
}
/// <summary>
/// Adjust the scale of the widget to make it pixel-perfect.
/// </summary>
public override void MakePixelPerfect ()
{
base.MakePixelPerfect();
if (mType == Type.Tiled) return;
Texture tex = mainTexture;
if (tex == null) return;
if (mType == Type.Simple || mType == Type.Filled || !hasBorder)
{
if (tex != null)
{
int w = tex.width;
int h = tex.height;
if ((w & 1) == 1) ++w;
if ((h & 1) == 1) ++h;
width = w;
height = h;
}
}
}
/// <summary>
/// Adjust the draw region if the texture is using a fixed aspect ratio.
/// </summary>
protected override void OnUpdate ()
{
base.OnUpdate();
if (mFixedAspect)
{
Texture tex = mainTexture;
if (tex != null)
{
int w = tex.width;
int h = tex.height;
if ((w & 1) == 1) ++w;
if ((h & 1) == 1) ++h;
float widgetWidth = mWidth;
float widgetHeight = mHeight;
float widgetAspect = widgetWidth / widgetHeight;
float textureAspect = (float)w / h;
if (textureAspect < widgetAspect)
{
float x = (widgetWidth - widgetHeight * textureAspect) / widgetWidth * 0.5f;
drawRegion = new Vector4(x, 0f, 1f - x, 1f);
}
else
{
float y = (widgetHeight - widgetWidth / textureAspect) / widgetHeight * 0.5f;
drawRegion = new Vector4(0f, y, 1f, 1f - y);
}
}
}
// UV动画
if (Application.isPlaying && (mUvAnimSpeedH != 0 || mUvAnimSpeedV != 0))
{
float delta = mUvAnimIgnoreTimeScale ? RealTime.deltaTime : Time.deltaTime;
Rect uvr = uvRect;
uvr.x += mUvAnimSpeedH * delta * uvr.width;
uvr.y += mUvAnimSpeedV * delta * uvr.height;
uvr.x -= Mathf.Floor(uvRect.x);
uvr.y -= Mathf.Floor(uvRect.y);
uvRect = uvr;
}
}
/// <summary>
/// Virtual function called by the UIPanel that fills the buffers.
/// </summary>
public override void OnFill (List<Vector3> verts, List<Vector2> uvs, List<Color> cols)
{
Texture tex = mainTexture;
if (tex == null) return;
Rect outer = new Rect(mRect.x * tex.width, mRect.y * tex.height, tex.width * mRect.width, tex.height * mRect.height);
Rect inner = outer;
Vector4 br = border;
inner.xMin += br.x;
inner.yMin += br.y;
inner.xMax -= br.z;
inner.yMax -= br.w;
float w = 1f / tex.width;
float h = 1f / tex.height;
outer.xMin *= w;
outer.xMax *= w;
outer.yMin *= h;
outer.yMax *= h;
inner.xMin *= w;
inner.xMax *= w;
inner.yMin *= h;
inner.yMax *= h;
int offset = verts.Count;
Fill(verts, uvs, cols, outer, inner);
if (onPostFill != null)
onPostFill(this, offset, verts, uvs, cols);
}
protected new void Fill(List<Vector3> verts, List<Vector2> uvs, List<Color> cols, Rect outer, Rect inner)
{
Rect mOuterUV = outer;
Rect mInnerUV = inner;
Vector4 v = drawingDimensions;
Vector4 u;
if (mFlip == Flip.Horizontally) u = new Vector4(mOuterUV.xMax, mOuterUV.yMin, mOuterUV.xMin, mOuterUV.yMax);
else if (mFlip == Flip.Vertically) u = new Vector4(mOuterUV.xMin, mOuterUV.yMax, mOuterUV.xMax, mOuterUV.yMin);
else if (mFlip == Flip.Both) u = new Vector4(mOuterUV.xMax, mOuterUV.yMax, mOuterUV.xMin, mOuterUV.yMin);
else u = new Vector4(mOuterUV.xMin, mOuterUV.yMin, mOuterUV.xMax, mOuterUV.yMax);
Color gc = color;
gc.a = finalAlpha;
if (premultipliedAlpha) gc = NGUITools.ApplyPMA(gc);
mBorderPliesNum = Mathf.Clamp(mBorderPliesNum, 1, 99);
float borderPlieWidth = (float)mBorderWidth / mBorderPliesNum;
float uvPlieHeight = (u.w - u.y) / mBorderPliesNum;
for (int i = 0; i < mBorderPliesNum; i++)
{
//顶点
{
float borderOffset = borderPlieWidth * i;
Vector4 vi = new Vector4(v.x - borderOffset, v.y - borderOffset, v.z + borderOffset, v.w + borderOffset);
Vector4 vo = new Vector4(vi.x - borderPlieWidth, vi.y - borderPlieWidth, vi.z + borderPlieWidth, vi.w + borderPlieWidth);
//左
verts.Add(new Vector3(vi.x, vi.y));
verts.Add(new Vector3(vo.x, vo.y));
verts.Add(new Vector3(vo.x, vo.w));
verts.Add(new Vector3(vi.x, vi.w));
//上
verts.Add(new Vector3(vi.x, vi.w));
verts.Add(new Vector3(vo.x, vo.w));
verts.Add(new Vector3(vo.z, vo.w));
verts.Add(new Vector3(vi.z, vi.w));
//右
verts.Add(new Vector3(vi.z, vi.w));
verts.Add(new Vector3(vo.z, vo.w));
verts.Add(new Vector3(vo.z, vo.y));
verts.Add(new Vector3(vi.z, vi.y));
//下
verts.Add(new Vector3(vi.z, vi.y));
verts.Add(new Vector3(vo.z, vo.y));
verts.Add(new Vector3(vo.x, vo.y));
verts.Add(new Vector3(vi.x, vi.y));
}
//UV
{
float deltaUX = (u.z - u.x) * 0.5f;
float deltaUX1 = deltaUX * height / (width + height);
float deltaUX2 = deltaUX - deltaUX1;
float uyOffset = uvPlieHeight * i;
float uy1 = u.y + uyOffset;
float uy2 = uy1 + uvPlieHeight;
//左
float ux1 = u.x;
float ux2 = ux1 + deltaUX1;
uvs.Add(new Vector2(ux1, uy1));
uvs.Add(new Vector2(ux1, uy2));
uvs.Add(new Vector2(ux2, uy2));
uvs.Add(new Vector2(ux2, uy1));
//上
ux1 = ux2;
ux2 += deltaUX2;
uvs.Add(new Vector2(ux1, uy1));
uvs.Add(new Vector2(ux1, uy2));
uvs.Add(new Vector2(ux2, uy2));
uvs.Add(new Vector2(ux2, uy1));
//右
ux1 = ux2;
ux2 += deltaUX1;
uvs.Add(new Vector2(ux1, uy1));
uvs.Add(new Vector2(ux1, uy2));
uvs.Add(new Vector2(ux2, uy2));
uvs.Add(new Vector2(ux2, uy1));
//下
ux1 = ux2;
ux2 += deltaUX2;
uvs.Add(new Vector2(ux1, uy1));
uvs.Add(new Vector2(ux1, uy2));
uvs.Add(new Vector2(ux2, uy2));
uvs.Add(new Vector2(ux2, uy1));
}
}
//填充颜色
int count = 48 * mBorderPliesNum;
for (int i = 0; i < count; i++)
{
cols.Add(gc);
}
}
}
然后是 UIHollowedTextureInspector.cs，注意要放到Editor文件夹下
//-------------------------------------------------
// NGUI: Next-Gen UI kit
// Copyright © 2011-2018 Tasharen Entertainment Inc
// Create By LZ
//-------------------------------------------------
using UnityEngine;
using UnityEditor;
using System.Collections.Generic;
/// <summary>
/// Inspector class used to edit UIHollowedTexture.
/// </summary>
[CanEditMultipleObjects]
[CustomEditor(typeof(UIHollowedTexture), true)]
public class UIHollowedTextureInspector : UIBasicSpriteEditor
{
UIHollowedTexture mTex;
protected override void OnEnable ()
{
base.OnEnable();
mTex = target as UIHollowedTexture;
}
protected override bool ShouldDrawProperties ()
{
if (target == null) return false;
SerializedProperty sp = NGUIEditorTools.DrawProperty("Texture", serializedObject, "mTexture");
NGUIEditorTools.DrawProperty("Material", serializedObject, "mMat");
if (sp != null) NGUISettings.texture = sp.objectReferenceValue as Texture;
if (mTex != null && (mTex.material == null || serializedObject.isEditingMultipleObjects))
{
NGUIEditorTools.DrawProperty("Shader", serializedObject, "mShader");
}
EditorGUI.BeginDisabledGroup(mTex == null || mTex.mainTexture == null || serializedObject.isEditingMultipleObjects);
NGUIEditorTools.DrawRectProperty("UV Rect", serializedObject, "mRect");
sp = serializedObject.FindProperty("mFixedAspect");
bool before = sp.boolValue;
NGUIEditorTools.DrawProperty("Fixed Aspect", sp);
if (sp.boolValue != before) (target as UIWidget).drawRegion = new Vector4(0f, 0f, 1f, 1f);
if (sp.boolValue)
{
EditorGUILayout.HelpBox("Note that Fixed Aspect mode is not compatible with Draw Region modifications done by sliders and progress bars.", MessageType.Info);
}
EditorGUI.EndDisabledGroup();
//额外属性
GUILayout.Space(10);
NGUIEditorTools.DrawProperty("边框宽度", serializedObject, "mBorderWidth");
NGUIEditorTools.DrawProperty("边框圈数", serializedObject, "mBorderPliesNum");
EditorGUILayout.BeginHorizontal();
NGUIEditorTools.DrawProperty("UV横滚动速度", serializedObject, "mUvAnimSpeedH");
NGUIEditorTools.DrawProperty("UV竖滚动速度", serializedObject, "mUvAnimSpeedV");
EditorGUILayout.EndHorizontal();
NGUIEditorTools.DrawProperty("忽略时间缩放", serializedObject, "mUvAnimIgnoreTimeScale");
GUILayout.Space(4);
return true;
}
/// <summary>
/// Allow the texture to be previewed.
/// </summary>
public override bool HasPreviewGUI ()
{
return (Selection.activeGameObject == null || Selection.gameObjects.Length == 1) &&
(mTex != null) && (mTex.mainTexture as Texture2D != null);
}
/// <summary>
/// Draw the sprite preview.
/// </summary>
public override void OnPreviewGUI (Rect rect, GUIStyle background)
{
Texture2D tex = mTex.mainTexture as Texture2D;
if (tex != null)
{
Rect tc = mTex.uvRect;
tc.xMin *= tex.width;
tc.xMax *= tex.width;
tc.yMin *= tex.height;
tc.yMax *= tex.height;
NGUIEditorTools.DrawSprite(tex, rect, mTex.color, tc, mTex.border);
}
}
}
把上面两个代码放到项目里，就可以添加 “UIHollowedTexture” 这个组件了，用法与UITexture相同，多了几个参数，并且Type参数没用了
代码的干货都在Fill方法里，可以对照着基类的Fill方法比较异同。
最后再说一下shader行，如果希望这个边框图像以颜色叠加（特效）的方式显示，那么需要替换shader，最简单的办法是复制NGUI自带的 “Unlit - Transparent Colored”、“Unlit - Transparent Colored 1”、“Unlit - Transparent Colored 2”、“Unlit - Transparent Colored3” 这四个Shader，然后改名为 “Unlit - Transparent Colored Additive” 等，再依次打开内容，第一行先改名，然后找到 "Blend SrcAlpha OneMinusSrcAlpha" 全部替换为 "Blend SrcAlpha One"，以后把 “Unlit - Transparent Colored Additive” 拖到 Shader行替换默认的 “Unlit - Transparent Colored”。这样改过的的shader支持NGUI的panel裁切，用在ScrollView里不会出错。
写到这里就算全部写完了，如果觉得有用就给个赞再走吧。
注：本文所用的NGUI版本是3.12.1
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
