一款功能强大的 Cocos Creator 富文本插件!更炫的效果,更少的开销!
如今,单一文本样式已经很难满足实际项目需求,我们常会需要设置特殊的文本样式、优化排版、进行图文混排等等。此时,少不了用到富文本功能,实现更加丰富多样的文本效果。
开发者 wingcd 历时半年,写了一款开箱即用的 SDF 富文本插件,支持 Cocos Creator 3.x,能够几乎无开销地实现各种富文本功能,可以通过 TTF 生成 SDF 字体,支持动态与静态方式生成 SDF 字体。
版本适配
功能介绍
可合批功能
不可合批功能
支持预生成 SDF 字体文件。
支持动态生成 SDF 字体。
更少的纹理占用,支持一张图的四个通道同时存储文字。
支持 html 富文本格式。
支持图文混排。
支持自定义预制体插入。
支持动态设置文字位置。
自带多种文字效果。
更快的打字机实现方式。
支持 3D 文字 Label。
使用方法
下载插件。
点击菜单:扩展/Text Mesh/安装示例,安装 Demo 示例(需要重启 Cocos 项目)。
生成字体。
点击菜单:扩展/Text Mesh/Label,添加富文本字体。
使用预生成的字体文件不要使用默认字体,默认字体为只包含几个字的静态字体。
调整字体各个参数,实现自己需要的效果。
丰富的组件属性
生成字体
点击菜单:扩展/Text Mesh/创建字体资源,打开字体资源创建窗口:
设置字体参数。
点击生成字体图集,会提示你选择新建字体的目录,或者直接更新原有字体。当生成成功后会在选择目录下生成两个文件(
*.tmf.bin
,*.tmf.png
),选择 bin 文字将会在检视图中看到相关字体信息,并可在图集信息中查询生成文字所在位置。
使用文本
选择需要创建文本的父节点,点击菜单:扩展/Text Mesh/Label,将会在选择节点下创建一个文本节点。
选择文本节点,在检视图中替换掉默认字体(默认字体为静态字体,且只包含几个字)。
调整更多的参数获得自己想要的效果,详细可以参考附带的 Demo。
富文本标签
参考源码 StyleMappler.ts
。标签参数的优先级高于组件设置的参数。
预定义样式
可以通过 StyleManager
添加自定义样式,Demo 示例中的 TMFStyle.ts
展示了使用方法。
定义样式:
{
"H3": {
"font-size": 40,
"color": "#FF0000"
},
"C3": {
"font-size": 30,
"color": "#aa0a0a",
"dilate":0.4
},
"Blod": {
"enables": ["b"]
}
}
使用样式:
其他
自带投影范围较小,如果有远距离投影,可以直接通过两个文本叠加实现,不影响合批。
富文本标签优先级高于标签自带属性。
不要将字体图片加入纹理集中。
资源链接
插件下载:
https://store.cocos.com/app/detail/4372
在线体验(请竖屏观看):
论坛专贴:
https://forum.cocos.org/t/topic/143915
📢 福利时间!转发本文并在评论区留言,2月13日(下周一),我们将从评论区中随机抽选3名小伙伴,送上「超级富文本」插件免费兑换码1个!
点击文末【阅读原文】即可前往 Cocos Store 下载插件,了解更多信息。