【包教包会】对富文本RichText进行了全面的优化

一、效果演示

效果演示0

重写了RichText富文本组件,功能更强大,使用更方便。

二、如何获取

1、https://github.com/szrpf/RichTextDemo/archive/refs/heads/main.zip

2、解压,导入cocos creator(版本2.4.11),可运行演示Demo。

三、转义符

0

找到SceneGame场景,富文本节点的组件RichText,可以看到Demo中的所有文本和特效,都是通过文本内容+转义符实现的。

鼠标移到“文本内容”上,可以查看所有“转义符”。

打开“SceneGame.ts”,这里可以修改RichText的文本内容。

1、\n换行 和 \t空格

2、\b加粗

“富文本” 3个字被加粗了,由于\0是恢复默认,因此“组件”并没有被加粗

3、\c设置颜色

在两个\c中间填写16进制颜色,支持3位、6位颜色值,大小写都可以

4、\d删除线 和 \u下划线

注意:\d和\u无法同时出现在一个字上,\d会取消前面\u的效果,反之亦然。

一个字又删除线又下划线,还能看到啥?

5、\f设置字体

两个\f中间填写字体名称,常见的字体有Arial、KaiTi、SimSun等等。

6、\0恢复默认

这个前面已经出现多次了,取消一切转义效果,恢复默认。

可搭配\b \c \d \u \f使用。

7、\i添加图片或图集帧

两个\i中间填图片或图集帧url

南宫婉是Image文件夹下的单张纹理,url填“Image/南宫婉”

怪物1是Atlas文件夹下的图集帧,url填“Atlas/战斗/怪物1”

8、\p添加预制体

两个\p中间填预制体url

要播预制体动画,记得给动画组件的Play onload打勾。

四、如何在自己项目中使用新版RichText

9

把RichText.ts复制到自己项目代码目录下。

新建一个节点,设置好宽高,把RichText组件挂上去。

一定要设置宽高,width影响富文本自动换行,height影响富文本自动分页。

这样你就可以使用除\i和\p之外的全部功能了。

要想使用\i和\p,需要在loading的时候,把资源加载到缓存里,然后把230行和261行

从缓存中读取图片和预制体的地方,换成从你自己的缓存中读。

不会写Loading的,可以参照Demo里的SceneLoading.ts

不会读缓存图片或预制体的,可以参照以上两行代码

啥都不会的,直接照搬我的SceneLoading.ts,自己画个进度条就完事了。

此外,想显示当前页,自己给RichText所在节点添加cc.Mask

想实现滚屏,自己添加cc.ScrollView实现

当然,我也重写了一个ScrollView,能实现更强大丝滑的滚屏和翻页功能,有空分享~

五、结束语

有不明白的,或者优化建议,可以留言评论,或给我发邮件!

包教包会,你会了吗?

创作不易,请多留言讨论,这样我会有动力发更多好玩的东西上来。

GitHub地址:szrpf (Bruce) · GitHub

EMail地址:27185709@qq.com

推荐链接:

1、【包教包会】DataBoard监控一切的数据看板,这年头做游戏哪有不开挂的

2、【包教包会】分享一个CocosCreator实用组件EffectBar,炫酷的特效进度条

3、【包教包会】分享一个CocosCreator组件——动作残影

4、【包教包会】分享一个CocosCreator实用组件——Previewer预览器

5、【包教包会】CocosCreator怎么用namespace实现类似于cc的全局变量

35赞

niu bee

1赞

大佬牛蛙! :smiley:

用不上。富文本都废弃了

收藏,正好需要用到,我去试试!!

高产啊,最有用的是动画

大佬,使用了你的组件,感觉挺好的。目前遇到一个问题。

当内容height大于节点的height,实际运行中就会出现渲染错误的问题。目前我能想到的解决办法:
1.update时候强制让height等于内容高度。
2.使用“</>”(原组件的\0)标记将超出内容隐藏掉。

建议可以优化一下。

编辑器显示:

运行中显示:


我根据你的参数确认了一下,并不会出现这种情况,是不是你修改了代码导致的。
你拿原版再试试,转义符用我定义的\c\c来修改颜色,\0是恢复默认

我实际运行下有问题。编辑器中显示是正确的。 :grinning:

不过无所谓啦,我已经修改成宽高自动适应了。

这样我就能添加一个精灵情况下,就能实现宽高自动适应啦。

效果图:

这样我只需要关心内容就好了,不用再关心宽高的问题,同时还是非常感谢作者的源代码,刚好解决了我聊天item的问题,表情的话我通过添加<p=biaoqing[iamge/emoji/24]> 这样,然后组件加载时候执行prefab上的RichTextPrefab.ts做表情加载处理就好了。

同时我也放上了,我修改后的脚本文件!!RichText.ts.zip (3.8 KB)

哈哈,能帮到忙就好,这也是我发贴的初衷。
不过你其实不用去自己设置最大行宽,RichText所在节点的width就是最大行宽,height决定了单页行数。
而且转义符比css风格更简洁,也是我优化的目的,你咋又改回css风格了 :rofl:

哈哈哈,一方面可能是因为我是个前端仔比较喜欢html这种写法。还有个原因是,我不希望有用户做注入操作,所以用户提交的message。带有“<”">"标记的都会被我做.replace处理。

可以可以,多一个选择也好 :laughing:

刚看了一下你改的代码,你早上反馈的问题,应该是你改了addRow函数导致的。
addRow的作用是当前页满了,就新增一页并添加一行,否则直接添加一行。
你把前面新增页面的功能删掉了,要实现翻页功能会遇到问题的。

之前我反馈的那个问题也比较好复现。你直接把宽高设置为50*50 然后RichText 中打2个字,然后运行demo就可以了。


我测了好多次了,并没有复现,你把有问题的包发上来看看。
只要确保字体大小+行间距 <= 宽高就能正常显示,因为宽高构成的面积就是一页。

先mark 好东西

好东西,mark

牛哇niu哇

mark…