【杨宗宝】Cocos Creator 3.x : 你们要的Label3D来了(升级版)

前沿

宗宝我又回来了,本次给大家带来的分享是基于之前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
3

  • 描边:使用过程中可以通过设置描边的宽度以及描边的颜色来实现给文本添加描边的效果

2.4 增加阴影效果

4
5

  • 阴影:使用过程中可以通过设置阴影的宽度以及阴影的颜色来实现给文本添加阴影的效果

2.5 增加滤镜效果

  • 滤镜:当前只添加了两种滤镜效果:模糊和置灰,使用过程中可以通过下拉列表选择需要的效果,
·模糊

6 7 8

  • 当选择了blur滤镜,就可以使用模糊滤镜效果了,此时下边会出现一个模糊强度,可以通过滑动来调整不同程度的模糊效果
·置灰

9 10 11

  • 当选择了gray滤镜,就可以使用置灰滤镜效果了,此时下边会出现一个置灰强度,可以通过滑动来调整不同程度的效果(测试了一下,只要非黑,非白时才会有置灰的效果)

集成使用

更多的人可能都和我一样,有时间没有时间或者并不需要知道他是怎么实现的;只要你告诉我怎么可以方便,快捷的将效果集成到自己的项目中才是关键,

下边总结一下:

  • 1.在场景中创建一个节点
  • 2.添加MeshRenderer组件
  • 3.创建材质(个人使用的是builtin-unlit材质)
    • 选择透明通道材质(1-transparent)
    • 开启使用贴图(USE TEXTURE)
  • 4.将材质赋给MeshRednerer组件
  • 5.给当前节点添加label-3d.ts 脚本组件


    就这么简单,接下来就可以正常的在项目中显示3d字体了

总结

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

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

占个位置,看看高手怎么说

大佬牛逼~~~

1赞

差点看成了laya3D :rofl:

高手一看,心想这不是so easy 嘛

这就离了个大谱了 :rofl:

新建一个 Label 组件,然后挂载一个 2DRenderRoot 组件,新建一个材质,把材质的深度测试打开,把材质挂给 label,ok 了。

已经选择材质的 use instancing,复制出来5.6个label3d节点,没有合批
大佬能否把合批这个帮忙解决下

合批这一块确实没有测试过,如果没有合,那就是不支持 :joy:

大佬求问,这个字体如何使用ttf文件呀?

目前只支持系统字体

请问新建的材质effect用哪一个?

后面发现可以用builtin-sprite,感谢已经搞定了

感谢大佬,以前搜半天没找到,牛,好几个月了,之前用的render 恶心坏我了。

哈哈,希望对你有帮助