### 插件介绍开箱即用的富文本插件，可以通过TTF生成SDF字体，可以几乎无开销的实现各种富文本功能，支持动态与静态方式生成SDF字体。 *** 2.x 相对于1.x，有较大改动，请根据需求看是否升级： * 优化字体加载方式，不在label中加载字体，需要在FontManager中预先加载后，在Label中直接使用字体名称 * 在字体文件中增加如y偏移、默认字体属性等 * 对齐标准ubb语法，新增如color=#ffffff,#ff00ff来控制颜色渐变的语法，且对语法格式更宽松 * `增加SuperLabel组件，此组件可通过设置值在cocos label，richText 以及超级富文本之间切换，也可通过全局设置关闭富文本，此功能相当于可以支持原生平台发布（关闭富文本功能即可使用cocos自带文本组件）` * `全面支持FairyGUI，如果使用FairyGUI开发，可以直接通过替换sdk实现富文本支持，且支持关闭超级富文本`，[支持超级富文本的FairyGUI库地址](https://github.com/wingcd/FairyGUI-cocoscreator/tree/ccc3.8-textmesh), 用法是在FontManager加载完成后，设置UIConfig.defaultFont = fontName;即可，让默认字体生效。 * 修复一些已知显示问题或者bug *** 1.x ### 版本适配 | 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. 下载并安装插件，在项目文件夹运行：npm i lru-cache@7.10.1，重启编辑器 2. 点击菜单：扩展/Text Mesh/安装示例 3. 打开项目中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 表示四个顶点颜色，2.x 支持#color1,color2标准上下渐变，#color1,#color2,#color3,#color4设置四个顶点颜色| |shadow-color|阴影颜色|\富文本| | |shadow-x|水平阴影偏移|\富文本\| 值范围：0-3, 2.x 修改为偏移像素 | |shadow-y|垂直阴影偏移|\富文本\| 值范围：0-3, 2.x 修改为偏移像素 | |shadow-blur|阴影模糊程度|\富文本\| 值范围：0-1, 2.x 可在字体中设置默认值 | |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/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. `在实际使用过程中发现，如果微信小游戏开启了开放域时，字体显示会有问题，请对开防御有需求的朋友谨慎购买`； 4. 字体缩小显示效果不太好，可以增加文字采样间距； 5. 预览模式效果不太好，打包后微信显示正常。 ### 购买须知本产品为付费虚拟商品，一经购买成功概不退款，请支付前谨慎确认购买内容。 ### 版权声明此插件为本人业余实现开发，享有此插件的全部权益，请勿转赠或二次销售。 [我的主页](https://store.cocos.com/app/search?name=wingcd) ## 作者其他资源： * [轻松手势识别](https://store.cocos.com/app/detail/5120) ![img.png](https://download.cocos.com/CocosStore/icon/8b1881244b844c79b111283d58e5f0e8/8b1881244b844c79b111283d58e5f0e8.png) * [超级富文本](https://store.cocos.com/app/detail/4372) ![img.png](https://download.cocos.com/CocosStore/icon/b1a3a74f00d748e5b3034bd44fd0355b/b1a3a74f00d748e5b3034bd44fd0355b.png) * [轻松截图](https://store.cocos.com/app/detail/3812) ![img.png](https://download.cocos.com/Cocos/CocosStore/icon/2022/06/c69ce66b53fb15d5ced5bafe8f77d94244430.png) * [动态骨骼](https://store.cocos.com/app/zh/detail/3782) ![img.png](https://download.cocos.com/Cocos/CocosStore/icon/2022/05/6fe876f686d48b74df94d911fcb4e28025971.png) * [超级屏幕特效](https://store.cocos.com/app/detail/5506) ![img.png](https://download.cocos.com/CocosStore/resource/68f9e520e0a84f33b992419de13faf7b/68f9e520e0a84f33b992419de13faf7b.png) * [2D渲染排序](https://store.cocos.com/app/detail/5597) ![img.png](https://download.cocos.com/CocosStore/resource/d11181df2f6d48dc9350bfdf3d347d9d/d11181df2f6d48dc9350bfdf3d347d9d.png) * [超级2D粒子系统](https://store.cocos.com/app/detail/5787) ![img.png](https://download.cocos.com/CocosStore/resource/940c40936abb4fc396843e53040d59a1/940c40936abb4fc396843e53040d59a1.png) ## 好友商店资源 * [高性能割草框架（2D/3D）](https://store.cocos.com/app/detail/4843) ![img.png](https://download.cocos.com/CocosStore/icon/296131ebb09d4e86b718687d970d1192/296131ebb09d4e86b718687d970d1192.png) * [3D物理麻将，点点消](https://store.cocos.com/app/detail/6268) ![img.png](https://download.cocos.com/CocosStore/resource/a4a3bb7b715746a69862f75e0699b37e/a4a3bb7b715746a69862f75e0699b37e.png)