Cocos Creator 龙骨DragonBones(导出骨骼/使用骨骼/局部换装/全局换装)

Posted 2021-08-17 LANGZI7758521

https://www.cnblogs.com/gamedaybyday/p/13021916.html

Cocos Creator 龙骨DragonBones(导出骨骼/使用骨骼/局部换装/全局换装)

版本2.4.4

参考：

cocos教程：DragonBones骨骼动画资源

导出龙骨动画

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

选择文件-导出

选择二进制导出

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

使用龙骨动画

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

动态加载龙骨动画

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@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);        //播放动画             })         })     } }

　

局部换装

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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实现。手上没有两套使用相同骨骼的动画，就不做实验了...

1	dragonBones.CCFactory.getInstance().replaceSkin

　　

 

资源下载链接：https://download.csdn.net/download/LANGZI7758521/20386008