当前位置: 首页 > news >正文

有老铁要的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 TEXTURE)

  • 4.将材质赋给MeshRednerer组件

  • 5.给当前节点添加label-3d.ts 脚本组件
    就这么简单,接下来就可以正常地在项目中显示3d字体了

总结

上边就是宗宝本次更新的所有内容,希望能给大家带来帮助;

  • 如需完整代码:关注公众号:"穿越的杨宗宝",回复"label3D"即可

最后,做个预告即将上架新的游戏玩法,请看下面视频。

这是最近两个月在抖音热玩的,水果大丰收+打螺丝融合玩法,你觉得怎么样呢?欢迎留言讨论。

http://www.jsqmd.com/news/849071/

相关文章:

  • 从滑动变阻器到真实传感器:STM32CubeMX ADC单通道采集光照/温度实战(附校准技巧)
  • Ubuntu 下 P106-100 矿卡 `nvidia-smi No devices were found` 问题解决全过程
  • 挑选专业语音工具不会选?这5个实用标准帮到你
  • 2026年知名的V8滑轨自动化厂家选择推荐 - 行业平台推荐
  • C166架构_testclear_函数原理与应用解析
  • 别再傻傻分不清!一张图搞懂RS232、RS422、RS485在工控现场怎么选(附接线图)
  • 如何免费制作专业级英雄联盟高光视频:League Director完整教程
  • AI工程师的薪资正在两极分化
  • 会议纪要整理不清?如何将会议成果转化为可落地任务
  • Oracle SQL 十道经典练习题(附完整代码 + 解题思路)
  • 科研抢发期必看:Perplexity图书推荐查询速效组合技——3分钟生成带引用格式的跨学科书单
  • STM32CubeMX驱动EC11编码器:避开HAL库中断回调的坑,直接在IRQHandler里写(附完整代码)
  • 《CVPR2025-DEIM创新改进项目实战:从原理到部署的深度学习优化全攻略》003、DEIM与传统Transformer/CNN架构的对比分析
  • CodeWave项目导出实战:从云端到本地的完整避坑指南(含数据库配置与端口冲突解决)
  • NIC-400周期模型构建失败分析与解决方案
  • 基于STM32的智能粮仓监控系统:硬件选型、软件架构与物联网实践
  • 快速免费解密网易云音乐NCM格式:终极播放自由指南
  • 从iPhone的人脸识别到工业质检:一文看懂双目结构光3D技术到底怎么用
  • 调试嵌入式代码时,如何像侦探一样‘追踪’BCC和BNE的跳转逻辑?
  • LightV虚拟化技术:基于缓存一致性的高效内存管理方案
  • 实测 DeepSeek-V4 接入 Hermes:一句话爬取几十个网页,真的丝滑!
  • ncmdump解密工具实用指南:轻松解锁网易云音乐NCM加密文件
  • 告别无限等待!Flutter Android构建加速实战:优化Gradle配置与依赖解析全流程
  • 揭秘芯片制程:从7nm到5nm,工艺节点背后的真实技术维度
  • Windows 10/11下,QT 5.12.8搭配MSVC2015的完整配置与项目构建测试
  • 《CVPR2025-DEIM创新改进项目实战:从原理到部署的深度学习优化全攻略》002、DEIM核心思想:动态特征交互与高效建模原理
  • 3步解锁音乐自由:NCM格式解密工具全攻略
  • 保姆级教程:用RKNN-Toolkit2在PC上把YOLOv5模型转成RKNN格式(附完整代码)
  • 精简Windows 11系统构建指南:tiny11builder让你的老旧电脑焕发新生
  • 射灯轨道灯哪家强?靠谱厂家大盘点,装修小白别踩坑!买射灯轨道灯怕被坑?这5家靠谱厂家口碑好,价格透明质量硬!装修灯光怎么选?认准这几家射灯轨道灯厂家,便宜耐用售后省心!