需求背景

龙骨文件比较复杂，和需求关联比较紧密的结构如下：

期望的效果如下，使用spriteFrame/atlas替换Armature，达到局部/整体换肤的效果

比如上图中使用了resources/yu.plist对yu的Armature进行了换肤

源码分析

切入点

js
复制代码
// 这个是渲染龙骨纹理的核心代码
material = _getSlotMaterial(
    slot.getTexture(), // 核心思路就是在这里做文章，达到换肤的效果
    slot._blendMode
);
getTexture () {
    return this._textureData && this._textureData.spriteFrame && this._textureData.spriteFrame.getTexture();
},

slot.texture来源

kotlin

复制代码

this._displayData = this._displayDatas[this._displayIndex];

来自这个rawDisplayData

js
复制代码
set: function (value) {
    if (this._rawDisplayDatas === value) {
        return;
    }
    this._displayDirty = true;
    this._rawDisplayDatas = value;
    if (this._rawDisplayDatas !== null) {
        this._displayDatas.length = this._rawDisplayDatas.length;
        // 将rawDisplayData覆盖到_displayDatas，源头就指向了_rawDisplayDatas
        for (var i = 0, l = this._displayDatas.length; i < l; ++i) {
            var rawDisplayData = this._rawDisplayDatas[i];
            if (rawDisplayData === null) {
                rawDisplayData = this._getDefaultRawDisplayData(i);
            }
            this._displayDatas[i] = rawDisplayData;
        }
    }
}

js
复制代码
  BaseFactory.prototype._buildSlots = function (dataPackage, armature) {
        var currentSkin = dataPackage.skin; // 来着skin
        var defaultSkin = dataPackage.armature.defaultSkin;
        if (currentSkin === null || defaultSkin === null) {
            return;
        }
        var skinSlots = {};
        for (var k in defaultSkin.displays) {
            var displays = defaultSkin.getDisplays(k);
            skinSlots[k] = displays;// 来自displays
        }
        if (currentSkin !== defaultSkin) {
            for (var k in currentSkin.displays) {
                var displays = currentSkin.getDisplays(k);
                skinSlots[k] = displays;// 来自displays
            }
        }
        for (var _i = 0, _a = dataPackage.armature.sortedSlots; _i < _a.length; _i++) {
            var slotData = _a[_i];
            var displayDatas = slotData.name in skinSlots 
                ? skinSlots[slotData.name] // 往上找来源
                : null;
            var slot = this._buildSlot(dataPackage, slotData, armature);
            slot.rawDisplayDatas = displayDatas; // 这里，此时displayData.texture=null，哪里修改了texture呢?应该是某个地方
            if (displayDatas !== null) {
                var displayList = new Array();
                // for (const displayData of displays) 
                for (var i = 0, l = dragonBones.DragonBones.webAssembly ? displayDatas.size() : displayDatas.length; i < l; ++i) {
                    var displayData = dragonBones.DragonBones.webAssembly ? displayDatas.get(i) : displayDatas[i];
                    if (displayData !== null) {
                        // 这里会修改texture
                        displayList.push(this._getSlotDisplay(dataPackage, 
                        displayData,// 引用参数
                        null, slot));
                    }
                    else {
                        displayList.push(null);
                    }
                }
                slot._setDisplayList(displayList);
            }
            slot._setDisplayIndex(slotData.displayIndex, true);
        }
    };

js
复制代码
BaseFactory.prototype._getSlotDisplay = function (dataPackage, displayData, rawDisplayData, slot) {
    var dataName = dataPackage !== null ? dataPackage.dataName : displayData.parent.parent.parent.name;
    var display = null;
    switch (displayData.type) {
        case 0 /* Image */: {
            var imageDisplayData = displayData;
            if (dataPackage !== null && dataPackage.textureAtlasName.length > 0) {
                imageDisplayData.texture = this._getTextureData(dataPackage.textureAtlasName, displayData.path);
                // 最终会去dragonBones.CCTextureAtlasData.textures里面取
            }

js
复制代码
 BaseFactory.prototype.buildArmature = function (armatureName, dragonBonesName, skinName, textureAtlasName) {
        if (dragonBonesName === void 0) { dragonBonesName = ""; }
        if (skinName === void 0) { skinName = ""; }
        if (textureAtlasName === void 0) { textureAtlasName = ""; }
        var dataPackage = new BuildArmaturePackage();
        // 这里会填充dataPackage.skin，也就是上边用到的
        if (!this._fillBuildArmaturePackage(dataPackage, dragonBonesName || "", armatureName, skinName || "", textureAtlasName || "")) {
            console.warn("No armature data: " + armatureName + ", " + (dragonBonesName !== null ? dragonBonesName : ""));
            return null;
        }
        var armature = this._buildArmature(dataPackage);
        this._buildBones(dataPackage, armature);
        this._buildSlots(dataPackage, armature); // 来自这个dataPackage
        this._buildConstraints(dataPackage, armature);
        armature.invalidUpdate(null, true);
        armature.advanceTime(0.0); // Update armature pose.
        return armature;
    };

js
复制代码
BaseFactory.prototype._fillBuildArmaturePackage = function (dataPackage, dragonBonesName, armatureName, skinName, textureAtlasName) {
        var dragonBonesData = null;
        var armatureData = null;
        if (dragonBonesName.length > 0) {
            if (dragonBonesName in this._dragonBonesDataMap) {
                // 从map取得
                dragonBonesData = this._dragonBonesDataMap[dragonBonesName];
                armatureData = dragonBonesData.getArmature(armatureName);
            }
        }
        if (armatureData !== null) {
            if (dataPackage.skin === null) {
                dataPackage.skin = armatureData.defaultSkin;// skin的真正源头
            }
            return true;
        }
        return false;
    };

js
复制代码
    ObjectDataParser.prototype.parseTextureAtlasData = function (rawData, textureAtlasData, scale) {
        if (dragonBones.DataParser.SUB_TEXTURE in rawData) {
            var rawTextures = rawData[dragonBones.DataParser.SUB_TEXTURE];
            for (var i = 0, l = rawTextures.length; i < l; ++i) {
                var rawTexture = rawTextures[i];
                var textureData = textureAtlasData.createTexture();
                textureAtlasData.addTexture(textureData);
            }
        }
        return true;
    };

js
复制代码
dragonBones.CCTextureAtlasData = cc.Class({
    extends: dragonBones.TextureAtlasData,
    name: "dragonBones.CCTextureAtlasData",
    properties: {
        _renderTexture: {
            default: null,
            serializable: false
        },
        renderTexture: {
            get () {
                return this._renderTexture;
            },
            set (value) {
                this._renderTexture = value;
                if (value) {
                    for (let k in this.textures) {
                        let textureData = this.textures[k];
                        if (!textureData.spriteFrame) {
                            let rect = null;
                            if (textureData.rotated) {
                                rect = cc.rect(textureData.region.x, textureData.region.y,
                                    textureData.region.height, textureData.region.width);
                            } else {
                                rect = cc.rect(textureData.region.x, textureData.region.y,
                                    textureData.region.width, textureData.region.height);
                            }
                            let offset = cc.v2(0, 0);
                            let size = cc.size(rect.width, rect.height);
                            textureData.spriteFrame = new cc.SpriteFrame();
                            textureData.spriteFrame.setTexture(value, rect, false, offset, size);
                        }
                    }
                } else {
                    for (let k in this.textures) {
                        let textureData = this.textures[k];
                        textureData.spriteFrame = null;
                    }
                }
            },
        }
    },
    statics: {
        toString: function () {
            return "[class dragonBones.CCTextureAtlasData]";
        }
    },
    createTexture : function() {
        return dragonBones.BaseObject.borrowObject(dragonBones.CCTextureData);
    }
});

整体思路图

换肤实现

换肤的基础

上图分析过程整个链路还是挺长的，不过仍旧可以在slot.getTexture上做文章，因为在提交渲染时有material的判断，应该是考虑到dragonbones会输出多个纹理

ini
复制代码
if (_mustFlush || material.getHash() !== _renderer.material.getHash()) {
    _mustFlush = false;
    _renderer._flush();
    _renderer.node = _node;
    _renderer.material = material;
}

所以我们任意切换纹理也问题不大，Engine是支持的，唯一需要我们处理好的是顶点坐标，否则会发生纹理错位

方法1：修改`slot._textureData.spriteFrame`实现换肤（失败）

我观察到渲染取的是_textureData.spriteFrame，我尝试给slot增加一个setTexture接口，直接修改了_textureData.spriteFrame会导致连锁反应，所有的龙骨实例都会发生同步，这不是我想要的效果。

js
复制代码
getTexture () { 
    return this._textureData 
        && this._textureData.spriteFrame 
        && this._textureData.spriteFrame.getTexture(); 
},
setSpriteFrame(spriteFrame){
    this._textureData.spriteFrame = spriteFrame;
}

因为数据都是从_dragonBonesDataMap取的，这是一个object，因为js弱引用的原因，如果slot._textureData修改了，大家都会变。

方法2: 自定义一个SpriteFrame

既然不能对slot._textureData修改，那么我们只能自定义一个SpriteFrame

所以我这样hack了Engine：
js
复制代码
    _customSpriteFrame: null, // 自定义SpriteFrame
    getTexture () {
        // 优先使用用户设置的纹理
        if(this._customSpriteFrame){
            return this._customSpriteFrame.getTexture();
        }else{
            return this._textureData && this._textureData.spriteFrame && this._textureData.spriteFrame.getTexture();
        }
    },
    setSpriteFrame(spriteFrame){
        this._customSpriteFrame = spriteFrame;
    },

运行效果：

这样子2个db不互相干扰了，但是发现纹理发生了错位，

如果不修正顶点坐标，就必须要求纹理布局一模一样，很明显我们换肤使用的纹理肯定和源纹理的布局是不同的。

顶点计算

js
复制代码
 realTimeTraverse (armature, parentMat, parentOpacity) {
    let slots = armature._slots;
    let vertices, indices;
    for (let i = 0, l = slots.length; i < l; i++) {
        slot = slots[i];
        vertices = slot._localVertices;// 顶点来源
        // 顶点
        for (let vi = 0, vl = vertices.length; vi < vl;) {
            _x = vertices[vi++]; 
            _y = vertices[vi++];
            vbuf[_vfOffset++] = _x * _m00 + _y * _m04 + _m12; // x
            vbuf[_vfOffset++] = _x * _m01 + _y * _m05 + _m13; // y
            vbuf[_vfOffset++] = vertices[vi++]; // u
            vbuf[_vfOffset++] = vertices[vi++]; // v
            uintbuf[_vfOffset++] = _c; // color
        }
    }
}
js

复制代码
  _updateFrame () {
        this._indices.length = 0;
        let indices = this._indices,
            localVertices = this._localVertices;
        let currentTextureData = this._textureData;
        if (!this._display || this._displayIndex < 0 || !currentTextureData || !currentTextureData.spriteFrame) return;
        let texture = currentTextureData.spriteFrame.getTexture();
        let textureAtlasWidth = texture.width;
        let textureAtlasHeight = texture.height;
        let region = currentTextureData.region;
        const currentVerticesData = (this._deformVertices !== null && this._display === this._meshDisplay) ? this._deformVertices.verticesData : null;
        if (currentVerticesData) {
        }
        else {
            // 因为我这边目前只使用了这个方式，也懒得研究了，就直接复用这部分代码即可，如果使用了其他模式可能会出现其他问题
            let l = region.x / textureAtlasWidth;
            let b = (region.y + region.height) / textureAtlasHeight;
            let r = (region.x + region.width) / textureAtlasWidth;
            let t = region.y / textureAtlasHeight;
            localVertices[vfOffset++] = 0; // 0x
            localVertices[vfOffset++] = 0; // 0y
            localVertices[vfOffset++] = l; // 0u
            localVertices[vfOffset++] = b; // 0v
            localVertices[vfOffset++] = region.width; // 1x
            localVertices[vfOffset++] = 0; // 1y
            localVertices[vfOffset++] = r; // 1u
            localVertices[vfOffset++] = b; // 1v
            localVertices[vfOffset++] = 0; // 2x
            localVertices[vfOffset++] = region.height;; // 2y
            localVertices[vfOffset++] = l; // 2u
            localVertices[vfOffset++] = t; // 2v
            localVertices[vfOffset++] = region.width; // 3x
            localVertices[vfOffset++] = region.height;; // 3y
            localVertices[vfOffset++] = r; // 3u
            localVertices[vfOffset++] = t; // 3v
            indices[0] = 0;
            indices[1] = 1;
            indices[2] = 2;
            indices[3] = 1;
            indices[4] = 3;
            indices[5] = 2;
            localVertices.length = vfOffset;
            indices.length = 6;
        }
        this._visibleDirty = true;
        this._blendModeDirty = true;
        this._colorDirty = true;
    },

currentTextureData.region的来源

js
复制代码
var textureData = textureAtlasData.createTexture();
textureData.rotated = ObjectDataParser._getBoolean(rawTexture, dragonBones.DataParser.ROTATED, false);
textureData.name = ObjectDataParser._getString(rawTexture, dragonBones.DataParser.NAME, "");
textureData.region.x = ObjectDataParser._getNumber(rawTexture, dragonBones.DataParser.X, 0.0);
textureData.region.y = ObjectDataParser._getNumber(rawTexture, dragonBones.DataParser.Y, 0.0);
textureData.region.width = ObjectDataParser._getNumber(rawTexture, dragonBones.DataParser.WIDTH, 0.0);
textureData.region.height = ObjectDataParser._getNumber(rawTexture, dragonBones.DataParser.HEIGHT, 0.0);

整体的对应逻辑关系如下图，很直观的能看到就是龙骨配置文件里面的数据

知道了原来的计算数据来源，我们直接套用即可

js
复制代码
setSpriteFrame(spriteFrame){
    this._customSpriteFrame = spriteFrame;
    let texture = spriteFrame.getTexture();
    let textureAtlasWidth = texture.width;
    let textureAtlasHeight = texture.height;
    let region = spriteFrame.getRect(); // 这里
    // ...
},

至此，这种方式跑通了，也实现了最基础的换肤

后续问题

slot.display = null

龙骨在制作的时候，制作人员为了达到隐藏效果，直接把显示资源置空了，等到后续需要显示时，再切换显示，这就导致了slot.display=null的问题。

调试代码发现slot.display来自slot.displayList，直接修改slot.displayList即可。

顶点被重置

龙骨在播放一遍后，第二遍播放动画纹理又错位了

我首先想到的就是顶点出问题了，排查发现，顶点的确是被重置了。

深度解读dragonBones使用SpriteFrame任意换肤的实现

需求背景

源码分析

切入点

slot.texture来源

整体思路图

换肤实现

换肤的基础

方法1：修改`slot._textureData.spriteFrame`实现换肤（失败）

方法2: 自定义一个SpriteFrame

顶点计算

后续问题

slot.display = null

顶点被重置

最终效果

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

深度解读dragonBones使用SpriteFrame任意换肤的实现

需求背景

源码分析

切入点

slot.texture来源

整体思路图

换肤实现

换肤的基础

方法1：修改slot._textureData.spriteFrame实现换肤（失败）

方法2: 自定义一个SpriteFrame

顶点计算

后续问题

slot.display = null

顶点被重置

最终效果

热门文章

最新文章

相关电子书

方法1：修改`slot._textureData.spriteFrame`实现换肤（失败）