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

Creator 2.x 扩展插件
#21

mark
后续会考虑优化性能吗

#22

性能还可以啊，你多测测，尤其是低端机。
这套实现方案本身就是“用内存换性能”。
先说说实现原理，只要是用系统字体来绘制文本，就会打断合批，这个不可避免。
因此提升性能的重点不在降低DrawCall，而是减少渲染次数。
把富文本内容切分成若干页，每页是内存中独立的一张图片，大小是所在node的尺寸。
把一页页图片拼凑起来，就是完整的内容。
给节点加一个ccMask，就可以只显示当前页。
可以用ScrollView来滚屏，或用PageView来翻页。

1赞
#23

谢谢作者，现在才看到！不是你组件的问题，我自己使用的第三方引擎库的问题。引擎做了缓存处理重复使用。导致渲染不对。我已经解决了。

#24

富文本的难点其实不是解析，而是合理的对label进行整合。
我想起之前项目里，我下属不知道怎么写richtext，然后从网上引入了一个版本。这个的实现就是一个字符就是一个单独的label，整齐倒是整齐了，看起来也非常漂亮，但问题是有多少个字符就是多少次draw，一段话直接就多了一两百。瞬间爆炸。。。

#25

嗯嗯，解决就好！~~

#26

确实，一个字画一次效率肯定很低的。
综合考量下，我选择“一页画一次” :face_with_hand_over_mouth:

#27

大佬这个支持真机原生吗>?

#28

支持。。。

#29

我打包真机试了下,很nb,但是很有个疑问啊~~~
我看了下是用document.createElement(‘canvas’)来实现的渲染,刷新世界观了,cocos原生真机也有document和相关API吗?..
虽然能跑起来但是很震惊

#30

一直是有的，作用是在内存中创建一张图片，然后在上面写字画画再渲染出来

#31

很好用，稍微改了下js就能直接用，大佬可以考虑把水平对齐也加上，不过插入sprite的时候稍微有些麻烦

#32

水平对齐大致需要什么功能？

#33

每行文本正常的左对齐右对齐居中对齐三种模式，纯文本的我自己已经实现了。带图片的感觉需要批量处理完数据再绘制才比较好算偏移量，不知道大佬有没有更好的办法。辛苦大佬研究下了

#34

这个使用场景不多吧，因为已经实现了自动换行，每行都是满的怎么对齐都一样

#35

哈哈。还好我选择用sdf，字体大小不一，颜色不一都一个批次，然后图片动画那些都预留位置：
https://store.cocos.com/app/detail/4372

#36

是的，基本只会出现在只有一行或者最后一行

#37

能把用到的字导成图片，打包到图集里吗？

#38

可以生成静态图，还可以预留通道动态生成字体

#39

是啊，这个主要是用来显示文章段落的，水平对齐比较适合label这种单行的

#40

大致看了下，字库功能还是挺实用的，如果字库的图能和游戏其他素材图打包到一起就更好了。
还有这个面板属性有点复杂了，什么都提供给用户设置，大部分其实用不上的该砍就砍~~