Notifications
Article
怎样实现复杂的艺术字体排版?
Published 6 months ago
52
3
使用OnPopulateMesh定义自己的艺术字体
我知道是有不少人想要关于Shader Lab的教程的。但是工作上的项目进度比较紧呢。而在开始Shader的教程之前,可是要做好多的铺垫工作的。要解释清楚渲染线管,空间坐标间的转换,基本的数学原理,深度测试等等等等。说实话,我并不知道自己是否真的能处理好这堆东西。我会尽力的。在这之前,先抽点小技巧来说说呗。
如图一,这是最近美术大大给游戏设计的一个数字字体。嗯。是挺好看的。但是拿到程序员手里就不免要犯难了。这个无论是默认字体还是自定义字体都实现不了啊?。最终就程序员给出的效果是这样的:
美术大大看到就犯难了,这不行,不是我想要的效果。然后程序员和美术开始互扯了!怎么办?真的没有办法实现了吗?
为了团队,作为程序员的老大是不能让这种事发生的。首先,技术不能成为美术的限制。设计和策划做出来的东西都有其存在的原因,技术就应该要为他们铺好道路,让他们自由发挥,而不是本末倒置。
那么就回到本文主题了,这个效果究竟要怎么实现?认真观察一下。其实不难发现其中的规律。首先数字是整体倾斜的。然后第一个数字要高一点,后面的数字则要小一些并且呈梯形逐个往上偏移一定像素。
一种比较简单的做法,就是拼图片,一个数字一张图片地拼。但是,有经验的人都知道,一个数字几张图,这性能损耗得有多大。于是这里我引入另一种做法:OnPopulateMesh(VertexHelper toFill)。在这之前我好像说过,Text其实也是顶点加贴图加UV的渲染过程而已。那这就好办了,把Text里面每一个数字的顶点稍作修改就可以了。首先所有数字上面的两个顶点(参考图三)往右偏移,使其有一定角度的倾斜。接着从第二个数字开始,下面的两个顶点上升固定高度(相当于每一个数字的高度固定缩小X个像素),再每一个数字整体向上偏移一定高度。最终就得出了美术想要的效果。附每个数字的顶点位置及最终的代码:

public class ItalicText : Text { protected override void OnPopulateMesh(VertexHelper toFill) { //先计算好默认的排版 base.OnPopulateMesh(toFill); UIVertex vTmp = new UIVertex(); for (int i = 0; i < toFill.currentVertCount; i++) { //每4个顶点为一个数字 int txtIdx = i / 4; //对应一个数字里面的第几个顶点 int verIdx = i % 4; toFill.PopulateUIVertex(ref vTmp, i); //上面两个顶点往右偏移,造成一定倾斜 if (verIdx == 2 || verIdx == 3) { vTmp.position.x += 15f; } //从第二个数字开始 if (txtIdx > 0) { //下面两个顶点固定上升一定高度,同时整体往上逐梯级上升 if (verIdx == 0 || verIdx == 1) { vTmp.position.y += txtIdx * 4f + 14f; } else { vTmp.position.y += txtIdx * 4f - 8f; } } //一个顶点修改完之后要把它更新到Text里面 toFill.SetUIVertex(vTmp, i); } } }

Tags:
K-King
Tech Leader/Main Programmer - Programmer
2
Comments
K-King
6 months ago
Tech Leader/Main Programmer - Programmer
WY大佬,求问这个脚本要怎么使用。没研究过底层源码
直接添加组件的方式就可以了呀
0
WY
6 months ago
Programmer
知道了,感谢分享
0
WY
6 months ago
Programmer
大佬,求问这个脚本要怎么使用。没研究过底层源码
0