一、cocos creator 2.1 文本渲染分析。为什么创建Label性能差

拿 creator制作了个排行榜页面，不到20个Item,一个Item里只有两个 Label:名称和关卡。

发现在微信小游戏中打开，会卡顿。对页面的创建过程计时，发现主要耗时在创建 Label上。遂来分析下 cocos creator 2.1的文本渲染流程。

感叹下，能看到源码真是太好了~~

求教，厦门有什么好的游戏开发的交流渠道呀，群也大都死水一潭，现实中也找不到交流的同好和空间。感觉太封闭了

回归正题...

cocos creator的文本渲染有两种:

其中采用系统字体的，应该也是归属于 ttf中。

涉及到的文件有：

还有其他相关的文件也是跟文本渲染相关，但是本文聚焦在 2d、 webgl和 ttf渲染上，其他的就略过。

Label组件作为属性的容器，并在属性变更时，调用 _updateRenderData

Label的 _assembler的定义在 core/renderer/webgl/label/index.js找到

根据类型，找到 _assembler的实现在 core/renderer/webgl/label/2d/ttf.js中

core/renderer/webgl/label/2d/ttf.js继承了 core/renderer/utils/label/ttf.js

通过 _getAssemblerData可知，所有的 Label组件共享同一个 canvs元素

updateRenderData做实际的文本计算（字体、宽高、基线等），并绘制纹理。

_updateTexture首先清空 canvas（注意，此canvas全局唯一，所有TTF Label共享的)

然后绘制描边，绘制文本，有需要的话，绘制下划线，最后调用 _texture.handleLoadedTexture将 canvas提交到 gpu纹理上。

以上可知，每个 Label的创建，都要经历清空重绘 canvas，然后提交纹理的步骤。每个 Label的纹理都是单独的，并没有重用。

当时在微信小游戏上测试，平均创建一个 Label耗时约30ms,创建十几二十个 Label，感知到明显的卡顿。最终弃用ttf label,改用 bmfont label避开这个问题。感觉这里有优化的空间？

一直以来，好奇 cocos creator的描边实现，自己一直往 shader那边，什么纹理扩边，卷积啥的去想。

实际上：

在文件 core/renderer/utils/label/ttf.js第255行：

二、Cocos Creator如何快速接入微信小游戏好友排行榜

在Cocos Creator中快速接入微信小游戏好友排行榜，主要涉及两种方式：纯JS代码接入和代码+IDE的方式接入。纯JS代码接入涉及初始化一个节点以绘制子域的sharedCanvas，并实现子域的绘制逻辑。通过以下步骤可实现快速开发好友排行榜：

首先，初始化一个Node节点，添加WXSubContextView组件，该组件能以一定的帧率自动绘制sharedCanvas，开发者无需操心。将此节点添加到场景中，即可展示效果，隐藏节点则可关闭。接下来，实现子域的绘制逻辑，参照官方示例，使用XML、CSS和JS绘制排行榜。

配置插件引用步骤如下：

在game.json中添加插件引用。

在开放数据域内引用插件。

通过以上两步操作，即可轻松绘制出好友排行榜。

另一种方式则是利用Cocos IDE工具，通过拖拽创建画布节点，简化操作流程。体验成品，只需扫描小游戏码即可。

若需好友排行榜源码，可私信获取。