查看原文
其他

一款功能强大的 Cocos Creator 富文本插件!更炫的效果,更少的开销!

wing COCOS 2023-03-16

如今,单一文本样式已经很难满足实际项目需求,我们常会需要设置特殊的文本样式、优化排版、进行图文混排等等。此时,少不了用到富文本功能,实现更加丰富多样的文本效果。


开发者 wingcd 历时半年,写了一款开箱即用的 SDF 富文本插件,支持 Cocos Creator 3.x,能够几乎无开销地实现各种富文本功能,可以通过 TTF 生成 SDF 字体,支持动态与静态方式生成 SDF 字体。


版本适配


功能介绍


可合批功能

不可合批功能


  • 支持预生成 SDF 字体文件。

  • 支持动态生成 SDF 字体。

  • 更少的纹理占用,支持一张图的四个通道同时存储文字。

  • 支持 html 富文本格式。

  • 支持图文混排。

  • 支持自定义预制体插入。

  • 支持动态设置文字位置。

  • 自带多种文字效果。

  • 更快的打字机实现方式。

  • 支持 3D 文字 Label。


使用方法


  1. 下载插件。

  2. 点击菜单:扩展/Text Mesh/安装示例,安装 Demo 示例(需要重启 Cocos 项目)。

  3. 生成字体。

  4. 点击菜单:扩展/Text Mesh/Label,添加富文本字体。

  5. 使用预生成的字体文件不要使用默认字体,默认字体为只包含几个字的静态字体。

  6. 调整字体各个参数,实现自己需要的效果。

丰富的组件属性


生成字体


  • 点击菜单:扩展/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://h5.redblack.cn/textmesh/
  • 论坛专贴:

https://forum.cocos.org/t/topic/143915




📢 福利时间!转发本文并在评论区留言,2月13日(下周一),我们将从评论区中随机抽选3名小伙伴,送上「超级富文本」插件免费兑换码1个


点击文末【阅读原文】即可前往 Cocos Store 下载插件,了解更多信息。


往期精彩

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存