【CocosTextMeshPro】更新支持富文本——效果更多、兼容性更好的富文本组件

项目地址请看原帖:【CocosTextMeshPro】一个文本渲染解决方案——支持字体颜色渐变、斜体、下划线、删除线、描边、镂空、阴影、辉光、顶点动画、新的排版模式

更新说明

更新了富文本组件TmpRichText,除粗体标签外支持全部Cocos的RichText组件的标签,且拓展支持了所有TextMeshPro具备的效果。

  • 复杂文本情况下draw call会少于Cocos的RichText组件(具体效果由是否使用了影响材质属性的标签而定)
  • 内部对图片节点与文本节点做了分层处理,进一步减少了draw call

效果对比

下图是相同字体与文本的情况下,TmpRichText与Cocos的RichText在Web端运行的显示效果与draw call的对比

  1. TmpRichText (draw call为8)

  2. Cocos的RichText (支持的效果更少,字号大的部分显示异常,且由于非系统字体不能使用char模式,draw call为22)

支持标签

名称 描述 示例 注意事项
size 字体渲染大小,大小值必须是一个整数 <size=30>enlarge me</size> Size值必须使用等号赋值
color 字体顶点颜色,颜色值可以是内置颜色,比如 white、black 等,也可以使用 16 进制颜色值,比如 #ff0000 表示红色 <color=#ff0000>Red Text</color>
cg 启用字体颜色渐变,指定四个顶点的额外颜色,会与顶点色混合 <cg lb=#f90000 rb=#f90000 lt=#0019f7 ​rt=#0019f7>color gradient</cg> 默认值参考TextMeshPro组件
face 文本主体颜色、厚度、柔和度 <face color=#f00000 dilate=0.5 softness=0.01>face</face> 默认值和取值范围请参考TextMeshPro组件face相关属性
i 斜体 <i>This text will be rendered as italic</i>
u 启用下划线,可指定下划线的偏移 <u=8>This text will have a underline</u> 等号后面的值即下划线偏移值,默认值参考TextMeshPro组件underline相关属性
s 启用删除线,可指定删除线的偏移 <s=8>This text will have a strikethrough</s> 等号后面的值即删除线偏移值,默认值参考TextMeshPro组件strikethrough相关属性
outline 字体的描边颜色和描边宽度 <outline color=red thickness=0.15>A label with outline</outline> 默认值和取值范围请参考TextMeshPro组件outline相关属性
underlay 字体的阴影颜色、偏移、厚度、柔和度 <underlay color=#00ff00 x=0.001 y=-0.001 dilate=0.5 softness=0.3>underlay</underlay> 默认值和取值范围请参考TextMeshPro组件underlay相关属性
glow 字体辉光效果颜色、偏移、厚度 <glow color=#0ff0ff inner=0.2 outer=0.4><color=#000000>glow</color></glow> 默认值和取值范围请参考TextMeshPro组件glow相关属性
on 指定一个点击事件处理函数,当点击该 Tag 所在文本内容时,会调用该事件响应函数 <on click=“handler”> click me! </on> 除了 on 标签可以添加 click 属性,color 和 size 标签也可以添加,比如 <size=10 click=“handler2”>click me</size>
param 当点击事件触发时,可以在回调函数的第二个参数获取该数值 <on click=“handler” param=“test”> click me! </on> 依赖 click 事件
br 插入一个空行 <br/> 注意:<br></br> 和 <br> 都是不支持的。
img 给富文本添加图文混排功能,img 的 src 属性必须是 ImageAtlas 图集里面的一个有效的 spriteframe 名称 <img src=‘emoji1’ click=‘handler’ height=50 width=50 align=center /> 规则与Cocos的RichText组件一致
9赞

TextMeshPro.ts TmpAssembler.ts 循环引用了

虽然可以 Build 但建议解一下

1赞

个人认为,这种没有在模块顶层直接使用导入对象的循环引用,都没有必要纠结。
而且TmpAssembler.ts中对TextMeshPro.ts的引用仅仅只用于类型声明。

这种类似的循环引用引擎源码也有不少,比如3.6.0中node.ts和base-node.ts就循环引用了

1赞

我用了这个插件 但导出后文字会模糊

微信图片_20221124183034

你指的是字体渲染看上去有锯齿吗,可以通过增大一点face softness属性改善这个锯齿的问题。同时增大字体导出时的font size和sdf scale也会让字体渲染后更清晰。
你可以横向对比一下相同字体与字号下Cocos的Label组件用ttf的渲染效果。

是的 锯齿问题 增大face softness属性确实就好啦 谢谢 我的字体文件有8m 都导出成了sdf进行使用 因为做的是聊天系统 每张纹理我导出成了2048 *2048 这样可以吗?担心字体文件太大 导致加载json卡顿

一般没什么问题,不管什么资源,加载的时机都是需要自己去注意的。
但如果是做聊天系统的话,用我的插件去导出字体不一定适合,聊天系统需要支持各种语言吧,用户会打出什么字符是你没法预料的

大佬,商城的不支持富文本,可以更新一下吗?

忘传商店了,可以先去GitHub上下,我周末传一下商店,等过审估计要下周了

好的,我已经在github上下载了。感谢大佬!

大佬,请问FontTools导出来的文件,没有对应字体怎么处理?原ttf里是有的。

image
这里有输入需要导出的文本吗,看你截图这是空的

emmm那这个字体库很大呀,我以为是默认把该字体全部转出来这样子的?

和导出bmfont文件一样,需要你自己选择导出哪些字符

2.4.x 描边的效果 只有在开启辉光时才有效。 shader部分是不是计算的有问题啊。


我这边单独开启描边表现是正常的,可否把你遇到的问题发个demo给我看看

大佬,有没有把html的富文本格式转译成creator能用的富文本格式的功能?

这个富文本有打字机效果吗

没有直接提供这种接口,需要自己处理一下富文本的子节点去实现

我按照
https://www.bilibili.com/read/cv16949774/
这个教程
设置过app.commandLine.appendSwitch(’–in-process-gpu’)
在steam组件浮动在窗体上的时候
TextMeshPro组件就消失了