[游戏开发]CocosCreator Label优化

1.需要修改引擎，参阅引擎定制工作流程

2.BITMAP缓存优化原理，参阅【乐府】突破Label的缓存模式之(1) BITMAP - Creator - Cocos中文社区

3.查看动态合图的api

运行时在console中输入

开启

cc.dynamicAtlasManager.showDebug(true);

关闭

cc.dynamicAtlasManager.showDebug(false);

4.修改记录

cocos2d/core/renderer/utils/label/ttf.js

_calDynamicAtlas (comp) {

????????if(comp.cacheMode !== Label.CacheMode.BITMAP) return;

????????let frame = comp._frame;

????????// Delete cache in atlas.

????????// mrlizs

????????// deleteFromDynamicAtlas(comp, frame);

????????if (!frame._original) {

????????????frame.setRect(cc.rect(0, 0, _canvas.width, _canvas.height));

????????}

????????// mrlizs

????????// 给frame的texture计算一个新的_uuid值

????????frame._texture._uuid = comp.string + "_" + comp.node.color + "_" + comp.fontSize + comp.fontFamily;

????????this.packToDynamicAtlas(comp, frame);

????}

cocos2d/core/renderer/utils/utils.js

deleteFromDynamicAtlas (comp, frame) {

????????if (frame && !CC_TEST) {

????????????if (frame._original && dynamicAtlasManager) {

????????????????// mrlizs

????????????????// dynamicAtlasManager.deleteAtlasSpriteFrame(frame);

????????????????frame._resetDynamicAtlasFrame();

????????????}

????????}

????}

cocos2d/core/renderer/utils/dynamic-atlas/atlas.js

insertSpriteFrame (spriteFrame) {

????????let rect = spriteFrame._rect,

????????????texture = spriteFrame._texture;

????????    // mrlizs

????????????// info = this._innerTextureInfos[texture._id];

????????// 在这里通过_uuid来判断重用性

????????// this._dynamicTextureRect 增加的一个字典用来记录uuid与texture的映射关系

????????let info = this._dynamicTextureRect[texture._uuid];

????????let sx = rect.x, sy = rect.y;

????????if (info) {

????????????sx += info.x;

????????????sy += info.y;

????????}

????????else {

????????????let width = texture.width, height = texture.height; ???????

????????????if ((this._x + width + space) > this._width) {

????????????????this._x = space;

????????????????this._y = this._nexty;

????????????}

????????????if ((this._y + height + space) > this._nexty) {

????????????????this._nexty = this._y + height + space;

????????????}

????????????if (this._nexty > this._height) {

????????????????return null;

????????????}

????????????// texture bleeding

????????????if (cc.dynamicAtlasManager.textureBleeding) {

????????????????// Smaller frame is more likely to be affected by linear filter

????????????????if (width <= 8 || height <= 8) {

????????????????????this._texture.drawTextureAt(texture, this._x-1, this._y-1);

????????????????????this._texture.drawTextureAt(texture, this._x-1, this._y+1);

????????????????????this._texture.drawTextureAt(texture, this._x+1, this._y-1);

????????????????????this._texture.drawTextureAt(texture, this._x+1, this._y+1);

????????????????}

????????????????this._texture.drawTextureAt(texture, this._x-1, this._y);

????????????????this._texture.drawTextureAt(texture, this._x+1, this._y);

????????????????this._texture.drawTextureAt(texture, this._x, this._y-1);

????????????????this._texture.drawTextureAt(texture, this._x, this._y+1);

????????????}

????????????this._texture.drawTextureAt(texture, this._x, this._y);

????????????this._innerTextureInfos[texture._id] = {

????????????????x: this._x,

????????????????y: this._y,

????????????????texture: texture

????????????};

????????????// mrlizs

????????????this._dynamicTextureRect[texture._uuid] = {

????????????????x: this._x,

????????????????y: this._y

????????????};

????????????this._count++;

????????????sx += this._x;

????????????sy += this._y;

????????????this._x += width + space;

????????????this._dirty = true;

????????}

????????let frame = {

????????????x: sx,

????????????y: sy,

????????????texture: this._texture

????????}

????????

????????this._innerSpriteFrames.push(spriteFrame);

????????return frame;

????},

????// mrlizs

????fetchSpriteFrame(spriteFrame) {

????????let texture = spriteFrame._texture;

????????let info = this._dynamicTextureRect[texture._uuid];

????????if (!info) {

????????????return null;

????????} ???

????????let rect = spriteFrame._rect;

????????let sx = rect.x + info.x, sy = rect.y + info.y;

????????let frame = {

????????????????x: sx,

????????????????y: sy,

????????????????texture: this._texture

????????????}

????????if (!this._innerSpriteFrames.includes(spriteFrame)) {

????????????this._innerSpriteFrames.push(spriteFrame);

????????}

????????return frame;

????},

????deleteInnerTexture (texture) {

????????if (texture && this._innerTextureInfos[texture._id]) {

????????????delete this._innerTextureInfos[texture._id];

????????????// mrlizs

????????????delete this._dynamicTextureRect[texture._uuid];

????????????for(let i = 0, n = this._innerSpriteFrames.length; i < n; i++){

????????????????if (this._innerSpriteFrames[i]._texture._uuid == texture._uuid){

????????????????????this._innerSpriteFrames.splice(i,1);

????????????????????break;

????????????????}

????????????}

????????????this._count--;

????????}

????}

cocos2d/core/renderer/utils/dynamic-atlas/manager.js

insertSpriteFrame(spriteFrame) {

????????if (CC_EDITOR) return null;

????????if (!_enabled || _atlasIndex === _maxAtlasCount ||

????????????!spriteFrame || spriteFrame._original) return null;

????????if (!spriteFrame._texture.packable) return null;

????????// mrlizs

????????for (let i = 0, n = _atlases.length; i < n; i++) {

????????????let atlas = _atlases[i];

????????????// 如果能从当前图集中找到相同_uuid的图集块，则重用

????????????let frame = atlas.fetchSpriteFrame(spriteFrame);

????????????if (frame != null) return frame;

????????}

????????let atlas = _atlases[_atlasIndex];

????????if (!atlas) {

????????????atlas = newAtlas();

????????}

????????let frame = atlas.insertSpriteFrame(spriteFrame);

????????if (!frame && _atlasIndex !== _maxAtlasCount) {

????????????atlas = newAtlas();

????????????return atlas.insertSpriteFrame(spriteFrame);

????????}

????????return frame;

????}

5.效果

修改前，原引擎对label的缓存是在onEnable时都会把上一次已缓存的纹理清掉然后重新创建，而实际上动态合图里有大量重复的label纹理，运行cc.dynamicAtlasManager.showDebug(true);

时可以看到合图内容。

修改后，首先不再清掉动态合图里的缓存纹理，然后label的纹理会先去动态合图中找已经存在的图块，如果存在则复用，不存在再创建。