超简单的基于UGUI的图文混排

转载请注明出处。

• 需求

原来游戏使用的UI框架是NGUI的，那时候不需要考虑图文混排的，NGUI本身就支持图文混排，只需要我们为需要进行图文混排的图片都生成一个图集，然后设置好每个图片的占位符，这样就可以直接栽Label组件直接用这个占位符生成相应的图片。但是UGUI原生的Text组件并不支持图文混排，所以没有办法只能是我们自己去想办法。

• 调研

由于UGUI的Text组件不支持图文混排，所以我去查了下Unity还给我们提供了一个组件叫做TextMesh，这个组件是可以支持图文混排的，但是他是3D的组件，我们在2D的UI里面要使用这个组件会造成的主要问题是无法合批，也无法收UI排序的影响，最主要的是ScrollRect组件无法mask他，这样会导致超出ScrollRect范围的TextMesh依然会显示出来，所以这个组件就直接Pass了。另外一种做法是使用TextMeshPro第三方插件，这个插件也是官方推荐的，而且性能也不错，使用的是距离场来实现的，里面还有很多UI效果，所以是很不错的插件，但是我并不想在项目中引入过多的第三方的东西，因为TextMeshPro我们也就会用到他扩展的Text组件其他的效果基本上用不到，所以为了以后维护方便，我也放弃这种方式，最后选择自己去实现。

• 思路

我们都知道Text组件之所以会生成文字/图片都是因为他会生成网格，然后通过uv去Font里面根据相应的文字的坐标等参数，在一张字体贴图上去采样这个文字，然后显示出来，而显示图片原理也是一样，只是去采样的图集不一样而已，其次就是如何区分是要显示文本还是显示图片，这时候就需要一个占位符来告诉我们这个地方要生成图片，例如这样[#ID=***]这样的格式，最