https://www.cnblogs.com/gamedaybyday/p/13021916.html
版本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