新建一个文本,像往常一样,调好fontsize,rect transform的height。如下图

新建一个材质球,shader选择 UI/Unlit/Text Detail,图片选择美术给的图,注意,图片的格式不需要转成sprite,用default就可以了。
Detail Strength 的值改成1

把材质球赋到文本上

会看到效果如下

如果看到文本是还是白色的,那就要设置一下canvas的 Additional Shader Channels ,把 TexCoord1 加上

文本还需要加上 PositionAsUV1 这个组件,加上之后,就会看到效果如下

但是这个时候,效果还不是美术想要的结果,这是因为文本的实际的大小跟文本显示内容的大小是不一样的。
比如我设置的这个,文本高度是58,但是内容的高度是41
为了计算内容的高度,我们创建一张图片来测量它。

测出内容的高度是43
最后设置shader的Tiling Offset的值。其中Offset x y 是固定的,分别为0和0.5,Tiling的x值填1就可以了。Y值是算出来的,计算方式是贴图的高度除于内容的高度,比如我这个就是32/43=0.744186

这样,最终效果就是美术想要的效果了。

Offset的y也不是固定0.5,因为内容也不是完全居中,一般是偏上。

所以y值0.5往下调一点,比如0.45
网友评论