千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  关于学院  >  技术干货  >  Unity技术干货  >  正文

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果

来源:千锋教育
作者:wjy
关键词: 成都 杭州
2022-09-28
分享

  一.前言

  TexeMeshPro 是Unity的一个Text文本插件,实现了比UGUI的Text,更好看的效果,跟高效的性能,所以深受大家的喜欢,但是再好的插件,也不是万能的,比如我们的策划有个新需求,要我们的VIP的名字比普通玩家有更好看的效果,例如:字体流光,外发光颜色扰动,字体贴图等等。那我们就需要去扩展TextMeshPRo的shader功能了。如下图所示

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果1

  本文,我就带大家一起来扩展一下:如何扩展TextMeshProUGUI

  二.扩展前后对比

  1.TextMesh原始面板

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果2

  2.TextMeshPro扩展后的面板

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果3

  三.扩展TextMeshProUGUI

  我们主要实现的功能是:实现字体Face的扰动流光和Outline的扰动流光

  TextMeshPro本来自带一个Face贴图流动和OutLine贴图流动的功能,但是这个流动有点平淡,策划们想要的是用一个噪波图,干扰流动的UV的效果。

  噪波图如下:

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果4

  1.Shader功能实现

  首先,我们可以看到,TextMeshProUGUI默认使用的shader是TMP_SDF.shader,所以我们接下来就是复制一份重命名为TMP_SDF_Noise.shader

  添加我们的噪波图属性和相应的参数

  face噪波

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果11

  outline噪波

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果12

  在Frag片元函数中,找到Face和Outline的功能代码处,添加Noise扰动逻辑

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果13

  2.编辑器Inspector面板扩展

  在TextMeshPro的Package包中,找到SDF的Inspector面板类TMP_SDF_Editor.cs类,注意,这里我们不要直接打开修改,而是要扩展它

  原因:

  1.我们修改一些第三方插件的功能,一定要使用扩展的方式,而不是直接改源码,这样我们后续升级插件,替换插件都较方便

  2.这是个package,我们无法修改package包中的代码,即使修改了,也无法存储生效。

  我们在自己的Editor目录下新建2个类:ShaderUtilities_EXT和TMP_SDFShaderGUI_EXT

  1.ShaderUtilities.cs类是一个工具类,用来获取shader中变量的PropertyID,这样C#进行shader的赋值时性能会好一点

  所以,我们就把我们自己新加的两个变量加进去即可

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果14

  2.TMP_SDFShaderGUI类,就是TMP自带的SDFShader的编辑器脚本,所以我们新建TMP_SDFShaderGUI_EXT类,继承TMP_SDFShaderGUI类,这样我们就可以只写新的属性,系统自带的我们就直接base.xxx()来调用。定义新变量并重写函数DoGUI。

  代码如下:

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果15+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果16-

  四.最后附上完整的shader代码

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果17+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果18+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果19+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果20+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果21+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果22+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果23+

Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果24-

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

相关推荐

  • unity如何接入puerts webpack适用于我们执行ts编译为js用的插件,把需要的依赖加入到dependencies标签中,然后在vscode的终端输入npm install 拉取依赖即可,拉取成功后,会生成一-个node_ modules的文件夹,里面就是我们拉取的依赖库,可能很大,这个文件夹最好加入到忽略列表中。代码如下所示:
  • xlua-framework之UI框架 我们前面说过xlua-framework这个框架,是一个纯lua的一个框架,也就是说我们所有的逻辑都可以在lua中实现,只有资源模块和网络模块是c#原生写的,但是也在lua中给我们包装的工具类,让我们更方便的使用。在框架的纯lua代码中,不得不说,ui框架是我最喜欢的,一套基于mvc的一套ui框架。
  • xlua-framework之网络框架 一般我们说到网络框架,主要是指Socket网络框架,如果是Http的话,我们没有必要单独介绍了,简单用可以直接使用WWW或者UnityWebRequest,如果稍微复杂的使用,可以使用RestSharp库。所以我们本章主要讨论的是xlua-framework框架是如何实现socket网络框架的。
  • Unity-TextMeshPro如何扩展材质实现字体Face+Outline流光效果 TexeMeshPro 是Unity的一个Text文本插件,实现了比UGUI的Text,更好看的效果,跟高效的性能,所以深受大家的喜欢,但是再好的插件,也不是万能的,比如我们的策划有个新需求,要我们的VIP的名字比普通玩家有更好看的效果
  • Unity如何接入Firebase Cloud Message远程推送 本地推送:玩家打开游戏后,给手机系统通知设置推送的倒计时,等游戏关闭后,倒计时结束时,手机会自动打开通知给用户。由于是提前设定死的内容和计时器,所以灵活性差。 远程通知:有一个服务器后台,可以随时随地给玩家发送通知提醒。好处是灵活,但是坏处就是无法根据用户的进度,定制推送内容。所有用户一把抓,走统一逻辑推送。
  • Unity如何实现一个弹框队列管理PopManager 最近游戏中加的弹窗页面有点多,导致快上线时,频繁出现弹窗的问题,不是冲突了,就是出不来,所以我想从根源上解决这个问题。 解决弹窗的问题,需要把握好3点