全局换装)

版本2.4.4

参考：

cocos教程：DragonBones骨骼动画资源

导出龙骨动画

下载dragonbones软件，双击软件首页下方影魔的动画，可以打开影魔的示例。

选择文件-导出

选择二进制导出

将导出文件放到cocos资源目录下

使用龙骨动画

拖拽骨骼动画(恐龙头骨图标)到舞台，并拖拽Demon_tex到DragonAtlasAsst，设置动画Animationi为"run"，运行游戏，即可看到骨骼动画行走效果。

动态加载龙骨动画

@ccclass
export default class Helloworld extends cc.Component {

    @property(dragonBones.ArmatureDisplay)
    demon: dragonBones.ArmatureDisplay = null;

    start() {
        cc.resources.load("db/Demon_ske", dragonBones.DragonBonesAsset, (err, dbAsset: dragonBones.DragonBonesAsset) => {
            cc.resources.load("db/Demon_tex", dragonBones.DragonBonesAtlasAsset, (err, dbAtlas: dragonBones.DragonBonesAtlasAsset) => {
                this.demon.dragonAsset = dbAsset;          //设置骨骼数据
                this.demon.dragonAtlasAsset = dbAtlas;     //设置骨骼数据所需Atlas
                this.demon.armatureName = "armatureName";  //设置皮肤
                this.demon.playAnimation("run", 0);        //播放动画
            })
        })
    }
}

如遇到No armature data警告，可以先清理数据再设置

    this.demon.dragonAsset = null;         
    this.demon.dragonAtlasAsset = null;   
    this.demon.armatureName = ""; 

    this.demon.dragonAsset = dbAsset;          //设置骨骼数据
    this.demon.dragonAtlasAsset = dbAtlas;     //设置骨骼数据所需Atlas
    this.demon.armatureName = "armatureName";  //设置皮肤

局部换装

尝试动态加载单张图片，然后局部换装，换不成功。

官方文档提供的是2个龙骨之间进行换装。现在用绿龙的头替换影魔的头。

龙骨1英雄的头部插槽"head"

龙骨绿龙的头部插槽"tou"，骨架名"armatureName"

const { ccclass, property } = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {
    
    /**影魔 */
    @property(dragonBones.ArmatureDisplay)
    demon: dragonBones.ArmatureDisplay = null;

    /**绿龙 */
    @property(dragonBones.ArmatureDisplay)
    dragon: dragonBones.ArmatureDisplay = null;

    start() {
        let demonArmature = this.demon.armature();
        let demonSlot = demonArmature.getSlot("head");
        let factory = dragonBones.CCFactory.getInstance();
        factory.replaceSlotDisplay(
            this.dragon.getArmatureKey(),  //绿龙骨架数据名称
            "armatureName",                //绿龙骨架数据名称
            "tou",                         //绿龙插槽数据名称
            "tou",                         //绿龙显示对象数据名
            demonSlot                      //影魔的头部插槽
        );
    }
}

换头后效果

全局换装

使用replaceSkin实现。手上没有两套使用相同骨骼的动画，就不做实验了...

dragonBones.CCFactory.getInstance().replaceSkin

切换displayIndex进行局部换装

一个插槽内可以包含多个图片，同一时间只能显示一张图片。利用这个特性可以进行局部换装。

获取head头部的骨骼，并切换displayIndex进行局部换装。displayIndex=0表示显示head，1表示显示body，2表示显示leg_left。

        let armature: dragonBones.Armature = this.dragonBone.armature();
        let slot: dragonBones.Slot = armature.getSlot("head");
        slot.displayIndex = 1;

例如游戏《提灯与地下城》的主角骨骼动画，一张图里几乎包含了全部人物/武器/胸甲/头盔等等。

遇到的问题

1 尝试设置骨骼的spriteFrame进行局部换装　

直接替换slot骨骼的图片数据spriteFrame，但是这种方式显示的图片会出现问题对不齐。

例如一只猫动画

　测试替换一只猫头部，将替换的头部画花

动态加载画花的猫头图片，进行替换

        let armature: dragonBones.Armature = this.dragonBone.armature();
        let slot:any = armature.getSlot("head");
        slot.displayData.texture.spriteFrame = cc.resources.get("common/texture/test1", cc.SpriteFrame);

替换后，可以看到猫头只剩左上角一小块地方有显示...所以这个方法不可行，没去深究什么原因。

posted on 2020-05-31 22:08 gamedaybyday 阅读(10720) 评论(0) 收藏举报