有老铁要的Label3D来了！支持描边、阴影、滤镜高级效果

前沿今天有老铁问我在Cocos Creator 3D场景中要显示一个时间数字牌。他怎么弄都不对Label标签总是显示在画面的最顶层。我一看原来是个2D UI 的 Label这怎么行这让我想起Cocos社区的杨宗宝你写过一篇Label 3D的文章。在这里分享给需要的老铁们宗宝又回来了本次给大家带来的分享是基于之前Label3d的升级版在上次发布了Lable3d的功能后大家在使用的过程中多多少少的会发现各种问题微信小游戏真机不显示字体如何实现描边引擎版本升级后无法正常使用等等感谢大家的使用与反馈今天宗宝为大家带来了新的升级版本。回顾【杨宗宝】Cocos Creator 3.x : 你们要的Label3D来了,快来免费使用吧功能展示1.实现原理在之前的文章中宗宝已经将label3d大概的实现原理进行了一个简单的说明并且贴出了关键性的代码想了解的可以移步上边的「回顾」中的链接点击查看在之前逻辑的基础上宗宝继续进行了优化重新对每个小块的逻辑进行了调整初始化/** * 初始化 */ start() { this.initRenderingContext(); this.initMeshRender(); this.initTexture2D(); this.updateRenderData(); }属性更新/** * 刷新渲染 */ private updateRenderData(): void { this.resetRenderData(); this.updateProperties(); this.updateTexture(); this.updateRenderMesh(); this.updateMaterial(); }这样看起来咱们的代码每个函数的具体功能是不是非常明显了2.新功能演示在之前的版本中仅仅只有修改文本内容以及修改文本颜色的功能那么接下来看看宗宝的这次更新都带来了哪些新的功能呢「注以下所有展示效果均使用3.8.0社区测试版本所有功能都可在低版本正常运行」2.1 修改字体样式在使用的过程中可以自己手动地输入希望使用的字体2.2 修改字体颜色2.3 增加描边效果描边使用过程中可以通过设置描边的宽度以及描边的颜色来实现给文本添加描边的效果2.4 增加阴影效果阴影使用过程中可以通过设置阴影的宽度以及阴影的颜色来实现给文本添加阴影的效果2.5 增加滤镜效果滤镜当前只添加了两种滤镜效果「模糊和置灰」使用过程中可以通过下拉列表选择需要的效果·模糊当选择了blur滤镜就可以使用模糊滤镜效果了此时下边会出现一个模糊强度可以通过滑动来调整不同程度的模糊效果·置灰当选择了gray滤镜就可以使用置灰滤镜效果了此时下边会出现一个置灰强度可以通过滑动来调整不同程度的效果测试了一下只要非黑非白时才会有置灰的效果集成使用更多的人可能都和我一样有时间没有时间或者并不需要知道他是怎么实现的只要你告诉我怎么可以方便快捷的将效果集成到自己的项目中才是关键下边总结一下1.在场景中创建一个节点2.添加MeshRenderer组件3.创建材质个人使用的是builtin-unlit材质选择透明通道材质1-transparent开启使用贴图USE TEXTURE4.将材质赋给MeshRednerer组件5.给当前节点添加label-3d.ts 脚本组件就这么简单接下来就可以正常地在项目中显示3d字体了总结上边就是宗宝本次更新的所有内容希望能给大家带来帮助如需完整代码:关注公众号穿越的杨宗宝回复label3D即可最后做个预告即将上架新的游戏玩法请看下面视频。这是最近两个月在抖音热玩的水果大丰收打螺丝融合玩法你觉得怎么样呢欢迎留言讨论。