欢迎光临散文网 会员登陆 & 注册

【Unity】【组件】UGUI文字阴影、渐变、描边

2022-03-25 22:09 作者:7_erQ  | 我要投稿

        由于策划们经常需要给文字添加描边的效果,以防止文字看不清或者用来强调一些文字。之前一直用的都是Unity自带的Outline组件实现文字描边,在效果和性能上都很差。而如果使用TextMeshPro的话,又需要对每种语言都做资源,会多出很多工作量,并增加包体。所以需要另寻方法实现一个文字描边的组件。

        在网上找了一圈,感觉用Shader实现挺符合需求,但一般用于Mesh描边的Shader又用不了,变成了一个方框描边,推测是Unity先对于文字形状进行了处理,计算并生成了一张文字图案的UV,然后将UV应用在一个面片上,这样就减少了最终显示在画面上的面数和定点数。而这些文字形状的顶点数据则是以UIVertex类型存在。

Text组件的Mesh是个面片

        又找了一圈,找到两篇不错的文章:

  1. 《基于Shader实现的UGUI描边解决方案》(https://www.cnblogs.com/GuyaWeiren/p/9665106.html)

  2. 《【unity shader】基于UGUI字体的outline优化》(https://blog.csdn.net/HelloCLanguage/article/details/105836309)

        于是就用最朴素的编程方法拿来改了改,目前实现的功能有:

  • 文字阴影

  • 文字、阴影描边

  • 文字、阴影渐变(可透明,只能双色)

        并添加了共用材质和保存为预制体后打开显示异常的问题的解决。

效果预览

        使用方法:把脚本添加到Text组件节点上即可。

注:如果显示异常请检查Canvas的Additional Shader Channels中的TexCoord1,2,3通道是否打开。

脚本代码:

Shader代码:



【Unity】【组件】UGUI文字阴影、渐变、描边的评论 (共 条)

分享到微博请遵守国家法律