Unity UGUI图文混排源码(二)
Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304
Unity UGUI图文混排源码(二):http://blog.csdn.net/qq992817263/article/details/51112311
为了方便整理，申请了一个专栏,链接:Unity UGUI图文混排专栏
图文混排解决方案二:
通过继承Text组件来获取文字的UIVertex并得到他的位置，通过Text富文本的<quad />来为图片占位,这样来实现图文混排，这里参考了一篇博客：http://blog.csdn.net/akof1314/article/details/49028279
1.这里我们会使用到一个SpriteAsset，具体的创建方法:http://blog.csdn.net/qq992817263/article/details/50958025
2.自定义一个渲染组件，用来渲染图片，后面我会将他放在Text文本下，这里会用一个参数，就是上面的SpriteAsset文件，具体代码如下
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class SpriteGraphic : MaskableGraphic {
public SpriteAsset m_spriteAsset;
public override Texture mainTexture
{
get
{
if (m_spriteAsset == null)
return s_WhiteTexture;
if (m_spriteAsset.texSource == null)
return s_WhiteTexture;
else
return m_spriteAsset.texSource;
}
}
#if UNITY_EDITOR
//在编辑器下
protected override void OnValidate()
{
base.OnValidate();
//Debug.Log("Texture ID is " + this.texture.GetInstanceID());
}
#endif
protected override void OnRectTransformDimensionsChange()
{
// base.OnRectTransformDimensionsChange();
}
/// <summary>
/// 绘制后 需要更新材质
/// </summary>
public new void UpdateMaterial()
{
base.UpdateMaterial();
}
}
3.自定义一个脚本用来继承Text，这里就是一个较为核心的代码，里面写了较为详细的注释
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
using System.Text.RegularExpressions;
public class InlieText : Text {
/// <summary>
/// 用正则取标签属性 名称-大小-宽度比例
/// </summary>
private static readonly Regex m_spriteTagRegex =
new Regex(@"<quad name=(.+?) size=(\d*\.?\d+%?) width=(\d*\.?\d+%?) />", RegexOptions.Singleline);
/// <summary>
/// 需要渲染的图片信息列表
/// </summary>
private List<InlineSpriteInfor> listSprite;
/// <summary>
/// 图片资源
/// </summary>
private SpriteAsset m_spriteAsset;
/// <summary>
/// 标签的信息列表
/// </summary>
private List<SpriteTagInfor> listTagInfor;
/// <summary>
/// 图片渲染组件
/// </summary>
private SpriteGraphic m_spriteGraphic;
/// <summary>
/// CanvasRenderer
/// </summary>
private CanvasRenderer m_spriteCanvasRenderer;
/// <summary>
/// 初始化
/// </summary>
protected override void OnEnable()
{
base.OnEnable();
if (m_spriteGraphic == null)
m_spriteGraphic = GetComponentInChildren<SpriteGraphic>();
if (m_spriteCanvasRenderer == null)
m_spriteCanvasRenderer = m_spriteGraphic.GetComponentInChildren<CanvasRenderer>();
m_spriteAsset = m_spriteGraphic.m_spriteAsset;
}
/// <summary>
/// 在设置顶点时调用
/// </summary>
public override void SetVerticesDirty()
{
base.SetVerticesDirty();
//解析标签属性
listTagInfor = new List<SpriteTagInfor>();
foreach (Match match in m_spriteTagRegex.Matches(text))
{
SpriteTagInfor tempSpriteTag = new SpriteTagInfor();
tempSpriteTag.name = match.Groups[1].Value;
tempSpriteTag.index = match.Index;
tempSpriteTag.size = new Vector2(float.Parse(match.Groups[2].Value)*float.Parse(match.Groups[3].Value), float.Parse(match.Groups[2].Value));
listTagInfor.Add(tempSpriteTag);
}
}
/// <summary>
/// 绘制模型
/// </summary>
/// <param name="toFill"></param>
protected override void OnPopulateMesh(VertexHelper toFill)
{
base.OnPopulateMesh(toFill);
//获取所有的UIVertex,绘制一个字符对应6个UIVertex，绘制顺序为012 203
List<UIVertex> listUIVertex = new List<UIVertex>();
toFill.GetUIVertexStream(listUIVertex);
//通过标签信息来设置需要绘制的图片的信息
listSprite = new List<InlineSpriteInfor>();
for (int i = 0; i < listTagInfor.Count; i++)
{
//UGUIText不支持<quad/>标签，表现为乱码，我这里将他的uv全设置为0,清除乱码
for (int m = listTagInfor[i].index*6; m < listTagInfor[i].index*6 + 6; m++)
{
UIVertex tempVertex = listUIVertex[m];
tempVertex.uv0 = Vector2.zero;
listUIVertex[m] = tempVertex;
}
InlineSpriteInfor tempSprite = new InlineSpriteInfor();
//如果图片在第一个位置,则计算他的位置为文本的初始点位置
//否,则返回上一个字符的第三个UIVertex的position,这是根据他的顶点的绘制顺序所获得的
if (listTagInfor[i].index == 0)
{
Vector2 anchorPivot = GetTextAnchorPivot(alignment);
Vector2 rectSize = rectTransform.sizeDelta;
tempSprite.textpos = -rectSize / 2.0f + new Vector2(rectSize.x * anchorPivot.x,rectSize.y*anchorPivot.y- listTagInfor[i].size.y);
}
else
tempSprite.textpos = listUIVertex[listTagInfor[i].index * 6 - 4].position;
//设置图片的位置
tempSprite.vertices = new Vector3[4];
tempSprite.vertices[0] = new Vector3(0, 0, 0) + tempSprite.textpos;
tempSprite.vertices[1] = new Vector3(listTagInfor[i].size.x, listTagInfor[i].size.y, 0) + tempSprite.textpos;
tempSprite.vertices[2] = new Vector3(listTagInfor[i].size.x, 0, 0) + tempSprite.textpos;
tempSprite.vertices[3] = new Vector3(0, listTagInfor[i].size.y, 0) + tempSprite.textpos;
//计算其uv
Rect spriteRect = m_spriteAsset.listSpriteInfor[0].rect;
for (int j = 0; j < m_spriteAsset.listSpriteInfor.Count; j++)
{
//通过标签的名称去索引spriteAsset里所对应的sprite的名称
if (listTagInfor[i].name == m_spriteAsset.listSpriteInfor[j].name)
spriteRect = m_spriteAsset.listSpriteInfor[j].rect;
}
Vector2 texSize = new Vector2(m_spriteAsset.texSource.width, m_spriteAsset.texSource.height);
tempSprite.uv = new Vector2[4];
tempSprite.uv[0] = new Vector2(spriteRect.x / texSize.x, spriteRect.y / texSize.y);
tempSprite.uv[1] = new Vector2((spriteRect.x + spriteRect.width) / texSize.x, (spriteRect.y + spriteRect.height) / texSize.y);
tempSprite.uv[2] = new Vector2((spriteRect.x + spriteRect.width) / texSize.x, spriteRect.y / texSize.y);
tempSprite.uv[3] = new Vector2(spriteRect.x / texSize.x, (spriteRect.y + spriteRect.height) / texSize.y);
//声明三角顶点所需要的数组
tempSprite.triangles = new int[6];
listSprite.Add(tempSprite);
}
//清除<quad />标签的乱码 重新绘制
toFill.Clear();
toFill.AddUIVertexTriangleStream(listUIVertex);
DrawSprite();
}
/// <summary>
/// 绘制图片
/// </summary>
void DrawSprite()
{
Mesh m_spriteMesh = new Mesh();
List<Vector3> tempVertices = new List<Vector3>();
List<Vector2> tempUv = new List<Vector2>();
List<int> tempTriangles = new List<int>();
for (int i = 0; i < listSprite.Count; i++)
{
for (int j = 0; j < listSprite[i].vertices.Length; j++)
{
tempVertices.Add(listSprite[i].vertices[j]);
}
for (int j = 0; j < listSprite[i].uv.Length; j++)
{
tempUv.Add(listSprite[i].uv[j]);
}
for (int j = 0; j < listSprite[i].triangles.Length; j++)
{
tempTriangles.Add(listSprite[i].triangles[j]);
}
}
//计算顶点绘制顺序
for (int i = 0; i < tempTriangles.Count; i++)
{
if (i % 6 == 0)
{
int num = i / 6;
tempTriangles[i] = 0 + 4 * num;
tempTriangles[i + 1] = 1 + 4 * num;
tempTriangles[i + 2] = 2 + 4 * num;
tempTriangles[i + 3] = 1 + 4 * num;
tempTriangles[i + 4] = 0 + 4 * num;
tempTriangles[i + 5] = 3 + 4 * num;
}
}
m_spriteMesh.vertices = tempVertices.ToArray();
m_spriteMesh.uv = tempUv.ToArray();
m_spriteMesh.triangles = tempTriangles.ToArray();
if (m_spriteMesh == null)
return;
m_spriteCanvasRenderer.SetMesh(m_spriteMesh);
m_spriteGraphic.UpdateMaterial();
}
}
[System.Serializable]
public class SpriteTagInfor
{
/// <summary>
/// sprite名称
/// </summary>
public string name;
/// <summary>
/// 对应的字符索引
/// </summary>
public int index;
/// <summary>
/// 大小
/// </summary>
public Vector2 size;
}
[System.Serializable]
public class InlineSpriteInfor
{
// 文字的最后的位置
public Vector3 textpos;
// 4 顶点
public Vector3[] vertices;
//4 uv
public Vector2[] uv;
//6 三角顶点顺序
public int[] triangles;
}
4.开始测试效果，创建一个InlieText组件，并在其组件下,添加一个SpriteGraphic组件,输入文字加标签测试
InlieTex组件:
SpriteGraphic组件:
文字测试:
5.做了一个聊天测试:
6.同时在测试的时候就发现了些许bug，这里并不想写出来，有兴趣的可以一起修改讨论。
工程使用的unity版本为unity的版本为：5.3.1f1
最后给出工程链接:https://code.csdn.net/qq992817263/uguitextpro/tree/master
