Notifications
Article
如何使用自定义字体做出复杂的排版?
Published 10 months ago
590
2
使用Unity自带的Custom Font做出复杂的排版功能

首先看到这样的效果图,大多数新手的第一个反应估计就是使用N张Image来进行拼接。知道Image的Tiling选项的,则会选择使用代码来控制一张Image的大小来达到控制N颗star的效果。
但是,以上方案其实都不理想。缺点在哪,相信很多人都清楚。第一种方法修改麻烦,每换一次图片就要重新排版。第二种修改也麻烦,换掉的图片大小不一致,就得修改代码里的大小,完善一点的可以根据Sprite的大小自动适应。但是,存在另外一个问题,效果图里那个星星之间相互叠在一起的效果怎么做到的?
这里我有一种更加理想的做法,不仅修改方便(不用动代码,做过热更的人知道,动代码是很麻烦的事情),还可以做出复杂的排版。原理在展示图那里其实也可以看出来了。就是利用Unity自带的自定义字体来实现这种复杂的排版。上面的效果图只是其中一种运用,看过UnityEngine.UI的源码的应该知道,Text里面其实就是绘制顶点贴图的过程。所以更高级的一种应用,就是修改重写一个Text,使其可以同时显示默认字体和自定义字体,以达到图文混合排版的功能(像emoji使用空白的utf8字符位,而不再需要传统的富文本标签来识别)
OK。那这里就简单说明一下制作流程吧。
第一,准备一张基本的图片
第二,在Unity的Project里面空白地方右键,Create->Material
第三,选择创建出来的Material,第一步骤中准备的图片赋给默认材质的Albedo(顺带预告一下,以后有空我可以写一个Shader Lab的教程,崩坏3那种卡通材质很炫对吧?我将会分几期教程教你写出那种材质)
第四,然后修改Shader为Sprite/Defualt
第五,在Unity的Project里面空白地方右键,Create->Custom Font
第六,选择创建出来的Custom Font,把刚刚创建的材质赋给字体,查看面板,如下图:
第七,开始编辑字体。在Character Rects下面添加一个元素Element 0。简单说明一下,Index就是编码数字,如:48是0,65是A,97是a。具体你想要字符的编码数字是多少,网上可以搜很多对照表。我这里42就是*号。那么我要显示5个星星,我只需要 txtStar.text = "*****"; 接着就是编辑UV,我这里只有一张图片,当然也就是0,0,1,1了。Vert就是顶点的意思。UI上面的顶点都是简单的Rectangle,矩形。WH就是宽高(特别注意一下,H是反转的,原因无非就是Text使用左上角作为原点,但是材质里面使用的是左下为原点),X,Y就是相对于文本里面每一个绘制单位左上角偏移。最后,Advance就是绘制每一个文本时给该字符预留的空间。简单说明就是我的星星是32个像素宽的,但是Text只留了20个像素给它,结果会怎样?当然就是堆叠在一起了。
第八,把做好字体赋给Text,输入*****。最终效果如下:
以上。谢谢!

Tags:
K-King
Tech Leader/Main Programmer - Programmer
2
Comments
K-King
10 months ago
Tech Leader/Main Programmer - Programmer
WY加油,等你的 ShaderLab
谢谢,正在努力中呢
0
WY
10 months ago
Programmer
加油,等你的 ShaderLab
0