### 插件介绍开箱即用的富文本插件，可以通过TTF生成SDF字体，可以几乎无开销的实现各种富文本功能，支持动态与静态方式生成SDF字体。 ### 版本适配 | Cocos Creator | 3.4.2+| 3.6.0+|3.7.2-3.8.0| | ---- | ---- | ---- | ---- | | Web | 支持 | 支持，`需要修改TextMeshLabel的继承类为UIRenderer` |支持| |微信|不支持|不支持|支持| | 原生 | 不支持动态字体 | 不支持|不支持| ### 功能介绍 1. 支持预生成SDF字体文件 2. 支持动态生成SDF字体 3. 更少的纹理占用，支持一张图的四个通道同时存储文字 4. 支持html富文本格式 5. 支持图文混排 6. 支持自定义预制体插入 7. 支持动态设置文字位置 8. 自带多种文字效果 9. 更快的打字机实现方式 ![a1.png](https://download.cocos.com/CocosStore/markdown/90bafa477c1944e685420d4d1321dfe0/90bafa477c1944e685420d4d1321dfe0.png) ![face.gif](https://download.cocos.com/CocosStore/markdown/d8f946e4eadd4975bef412fe10aa7353/d8f946e4eadd4975bef412fe10aa7353.gif) ![anim.gif](https://download.cocos.com/CocosStore/markdown/ef28769a311e4ae09152a708d85a2fa8/ef28769a311e4ae09152a708d85a2fa8.gif) ![3d.png](https://download.cocos.com/CocosStore/markdown/2b81f63035254c8c980c4c5e7b9fc37a/2b81f63035254c8c980c4c5e7b9fc37a.png) ![c1.png](https://download.cocos.com/CocosStore/markdown/85e2094b548e4c728f2d92794a8a7aa9/85e2094b548e4c728f2d92794a8a7aa9.png) ![c2.png](https://download.cocos.com/CocosStore/markdown/82c236ae870048888581bcbbeec7fa36/82c236ae870048888581bcbbeec7fa36.png) ### 快速使用 1. 点击菜单：扩展/Text Mesh/安装示例 2. 打开项目中textmesh-sample目录下的sample场景，快速进行效果预览 ### 使用方式 1. 下载插件 2. 点击菜单：扩展/Text Mesh/安装示例，安装Demo示例`需要重启cocos项目` 3. 生成字体 4. 点击菜单：扩展/Text Mesh/Label添加富文本字体 5. 使用预生成的字体文件`不要使用默认字体，默认字体为只包含几个字的静态字体` 6. 调整字体各个参数，实现自己需要的效果 > TIPS: > > * 发布项目时请将字体相关文件打入包中，否则会找不到相关资源！！！ > > * 不同字体需要使用不同的自定义材质球 > > * `使用动态字体时，ttf的fontFamily不能带空格，否则微信小游戏上，使用不了设置字体的动态文字` ### 生成字体 1. 点击菜单：扩展/Text Mesh/创建字体资源打开字体资源创建窗口： ![image.png](https://download.cocos.com/CocosStore/markdown/fcfb63769acf4529af39fafd00e97cbc/fcfb63769acf4529af39fafd00e97cbc.png) 2. 设置字体参数 > `源字体`：可设置TTF字体或者系统字体名； > `字体采样大小`：预先生成的字体大小，越大越精细，但是所占用的文件越大，能生成的文字越少； > `字符扩展`：设置文字间距 > `扩展裁剪`：设置后生成的文字将会裁剪边缘空白像素，有利于减少空间 > `图集大小`：设置生成静态文字图片大小 > `动态字体`：表示是否需要在运行中加载TTF文件，将会在静态字体查询不到文字时动态生成文字； > `静态通道数`：表示使用几个通道来存放预生成字体； > `字符集文本`：设置生成文本的文字来源； > * 可直接将需要生成的文字写入,如：ABCD... > * 行首如果是[R]开头，支持unicode编码以及编码范围描述，如[R]0x001-0x100,0x200 > `TMF字体文件`：不设置时会提示新建资源，否则为修改资源； 3. 点击生成字体图集，会提示你选择新建字体的目录，或者直接更新原有字体；当生成成功后会在选择目录下生成两个文件（*.tmf.bin,*.tmf.png)： ![image.png](https://download.cocos.com/CocosStore/markdown/3374fb528cb14c179e3d854ca6cd77f9/3374fb528cb14c179e3d854ca6cd77f9.png) 选择bin文字将会在检视图中看到相关字体信息： ![image.png](https://download.cocos.com/CocosStore/markdown/9d99e93ad6704a25bfcc8b344b29bd71/9d99e93ad6704a25bfcc8b344b29bd71.png) 并可在图集信息中查询生成文字所在位置。 ![image.png](https://download.cocos.com/CocosStore/markdown/4296bdbe85ef4002a72ccc815fb8b0f7/4296bdbe85ef4002a72ccc815fb8b0f7.png) ### 使用文本 1. 选择需要创建文本的父节点，点击菜单：扩展/Text Mesh/Label，将会在选择节点下创建一个文本节点； 2. 选择文本节点，在检视图中替换掉默认字体（默认字体为静态字体，且只包含几个字） ![image.png](https://download.cocos.com/CocosStore/markdown/52150f0750124bb89d647ac2db3f12cb/52150f0750124bb89d647ac2db3f12cb.png) 3. 调整更多的参数获得自己想要的效果，详细可以参考附带的Demo ### 富文本标签 |标签|说明|示例|说明| |---|---|---| --- | |sup|上标签|\^{^①\}| | |sub|下标签|\_{_①\}| | |u|下划线|\富文本\| | |s|删除线|\~~~~富文本~~\~~| | |i|斜体|\富文本\| | |b|加粗|\富文本\| | |bg|允许背景|\富文本\| | | color-lt |左上顶点颜色|\富文本\，\富文本\|颜色支持16进制与网页颜色值，支持透明位| | color-lb |左下顶点颜色||| | color-rt |右上顶点颜色||| | color-rb |右下顶点颜色||| | color |文字颜色|\\富文本\|属性包含lt,lb,rt,rb 表示四个顶点颜色| |shadow-color|阴影颜色|\富文本| | |shadow-x|水平阴影偏移|\富文本\| 值范围：0-3 | |shadow-y|垂直阴影偏移|\富文本\| 值范围：0-3 | |shadow-blur|阴影模糊程度|\富文本\| 值范围：0-1 | |shadow|阴影强度|\富文本\| 值范围：0-1,包含属性：color,x,y,blur | |stroke-color/outline-color|描边颜色|\富文本\| | |stroke-blur/outline-blur|描边模糊程度|\富文本\| 值范围：0-1 | |stroke/outline|描边模糊程度|\富文本\| 值范围：0-1,包含属性：color,blur | | dilate |文字宽度|\富文本\|值范围：0-1| | background-color |背景颜色|\富文本\| | | background |开启背景|\富文本\|包含属性：color| | mask-color |遮罩颜色|\富文本\| | | mask |开启背景|\富文本\|包含属性：color| | font-size |文字大小|\富文本\|文字字体大小，整数| | br |换行|\
|换行标签，等同于\n| > 参考源码StyleMappler.ts > 标签参数优先级高于组件设置的参数案例： ![image.png](https://download.cocos.com/CocosStore/markdown/81a0bcfe6feb482eb691c14a0b50d24b/81a0bcfe6feb482eb691c14a0b50d24b.png) ### 预定义样式 > 可以通过StyleManager添加自定义样式，案例的TMFStyle.ts展示了如何进行使用定义样式： ``` json { "H3": { "font-size": 40, "color": "#FF0000" }, "C3": { "font-size": 30, "color": "#aa0a0a", "dilate":0.4 }, "Blod": { "enables": ["b"] } } ``` 使用样式： ![image.png](https://download.cocos.com/CocosStore/markdown/812583eca3ba42678d01f5ad0c6dbc66/812583eca3ba42678d01f5ad0c6dbc66.png) ### 其他 1. 自带投影范围较小，如果有远距离投影，可以直接通过两个文本叠加实现，不影响合批； 2. 富文本标签优先级高于标签自带属性； 3. 不要将字体图片加入纹理集中；