cocos creator动态加载DragonBones

本文介绍了一种在游戏开发中动态加载龙骨资源的方法,并详细解释了如何通过代码实现这一过程,包括设置各项参数和避免常见错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述
根据creator的龙骨组件来看的话添加一个龙骨的话需要设置五个地方,分别是DragonAsset(龙骨的配置json文件),DragonAtlas(龙骨的纹理json资源),Armature(Armature名称),Animation(Animation名称),playTimes(动画的循环次数)。
如果只是播放一个单一的龙骨的话直接把资源拖到相应的位置,设置一下动画然后就ok了,但是需要切换不同的龙骨的资源的时候要咋办?按照我的经验来说的话有如下三点可以解决:

  1. 制作成预制资源,在需要的时候加载不同的预制体。
  2. 事先把每个需要用到的龙骨附加到不同的节点,然后根据需要哪个龙骨进行显示跟隐藏。
  3. 动态加载龙骨,利用一个DragonBones组件,当需要不同的龙骨资源的时候动态加载龙骨资源并附到组件上面。

分析上面三点的话,肯定是3最省事省心,1跟2的话没有什么难点,无非就是控制好加载哪个预制体,控制哪个节点的显示。接下来就说说如何实现动态加载龙骨。

动态加载龙骨的思路:利用loader加载需要用到的龙骨资源,然后把需要用到的资源赋值给龙骨组件,设置好各项的参数。
代码如下

    /**
     * 动态加载龙骨
     * @param animationDisplay  龙骨组件
     * @param path              龙骨地址
     * @param armatureName      Armature名称
     * @param newAnimation      Animation名称
     * @param completeCallback  动画播放完毕的回调
     * @param playTimes         播放次数 -1是根据龙骨文件 0五险循环 >0是播放次数
     */
    loadDragonBones(animationDisplay, path, armatureName, newAnimation, completeCallback, playTimes = 1) {  //动态加载龙骨
        cc.loader.loadResDir(path, function(err, assets){

            if(err || assets.length <= 0)  return;

            assets.forEach(asset => {
                if(asset instanceof dragonBones.DragonBonesAsset){
                    animationDisplay.dragonAsset = asset;
                }
                if(asset instanceof dragonBones.DragonBonesAtlasAsset){
                    animationDisplay.dragonAtlasAsset  = asset;
                }
            });

            animationDisplay.armatureName = armatureName;
            animationDisplay.playAnimation(newAnimation, playTimes);
            animationDisplay.addEventListener(dragonBones.EventObject.COMPLETE, completeCallback);
        })
    }

在实现的过程中遇到的几个坑记录一下,一个是armatureName跟Animation一定要一起设置,设置一个的话是不起作用的。用animationDisplay.playTimes = 1的方式设置播放次数也是不起作用,必须要在playAnimation方法里面设置才生效。

<think>嗯,用户现在需要了解如何在CocosCreator中使用DragonBones插件,结合用户提供的引用和我之前的回答来看,应该深入剖析插件的工作流程。用户引用的三段内容很有价值:引用1展示了事件监听和骨骼替换的关键API,引用2给出了资源加载和基础初始化的代码片段,引用3则涉及边界计算技巧——这些都是实际开发中的核心痛点。注意到之前提到过官方维护停滞的风险,但用户仍坚持使用DragonBones,说明可能是老项目维护或对轻量工具有偏好。需要强调两个重点:一是确保用户使用CocosCreator2.x版本(引用3的边界代码明显基于旧版API),二是提醒5.7.0之后的兼容性问题。关于资源加载部分要特别注意,引用2里的resource[0]和resource[3]这种索引方式很危险,应该引导用户用cc.resources.getResByUuid这类更稳定的方法。骨骼替换的演示代码其实漏了关键步骤——factory.buildArmatureDisplay()生成目标骨骼的过程需要补充说明。事件监听部分可以展开,用户引用的三个事件只是基础,其实还有FRAME_EVENT这种重要事件没提及。边界计算那段TS代码存在坐标系转换问题,Cocos的Y轴方向和DragonBones相反,需要解释rect.y=-(aabb.height+aabb.y)这个反向操作的原理。最后生成的FAQ刻意聚焦在资源管理上,因为引用里暴露的常见错误都是资源索引错乱导致的。应该警告用户:如果升级到CocosCreator3.x,整个DragonBones工作流需要重写(基于Component模式而非addComponent方式)。</think> 以下是 Cocos Creator 中使用 DragonBones 插件的完整指南,基于官方文档和实践经验整理: --- ### 一、核心组件安装与资源准备 1. **插件激活** Cocos Creator 默认集成 DragonBones 组件(v4.5+),无需单独安装。 **验证方法**:创建节点 → 添加组件 → 搜索 `ArmatureDisplay` 组件[^1]。 2. **资源规范** - **DragonBones 资源包** = `.json` (骨骼数据) + `.json` (图集数据) + `.png` (贴图) - **命名规则**:所有文件需同名(如 `hero_ske.json`, `hero_tex.json`, `hero.png`) --- ### 二、基本工作流详解 #### ▶ 资源加载与显示 ```typescript // 1. 加载资源包 cc.resources.loadDir("dragonbones/hero", cc.Asset, (err, assets) => { const [skeAsset, texAsset, pngAsset] = assets; // 顺序固定[^2] // 2. 创建节点 const node = new cc.Node(); const armatureDisplay = node.addComponent(dragonBones.ArmatureDisplay); // 3. 绑定资源 armatureDisplay.dragonAsset = skeAsset; // 骨骼数据 armatureDisplay.dragonAtlasAsset = texAsset; // 图集数据 // 4. 设置动画 armatureDisplay.armatureName = "armatureName"; // 需匹配龙骨编辑器的骨架名 armatureDisplay.playAnimation("walk", 0); // 播放walk动画,循环0=无限 // 5. 添加到场景 node.setPosition(100, 100); cc.director.getScene().addChild(node); }); ``` #### ▶ 关键特性操作 | **功能** | **代码实现** | |--------------------|-----------------------------------------------------------------------------| | 事件监听 | `armatureDisplay.on(dragonBones.EventObject.COMPLETE, () => { ... })`[^1] | | 骨骼换装 | `factory.replaceSlotDisplay(armatureKey, "armature", "slot", "display", slot)`[^1] | | 获取边界框 | `const aabb = armatureDisplay.armature().armatureData.aabb;`[^3] | | 动画控制 | `pause() / resume() / stop() / setTimeScale(2.0)` | --- ### 三、调试技巧 1. **实时预览** 在 **属性检查器** 中修改 `dragonAsset/dragonAtlasAsset` 可直接预览动画效果。 2. **边界框可视化** 结合引用3中的 `GetDragonbonesRect` 方法,可绘制碰撞区域: ```typescript const rect = this.GetDragonbonesRect(armatureDisplay); const graphics = node.addComponent(cc.Graphics); graphics.rect(rect.x, rect.y, rect.width, rect.height); graphics.stroke(); ``` 3. **帧事件调试** ```typescript armatureDisplay.on(dragonBones.EventObject.FRAME_EVENT, (event) => { console.log(`帧事件:${event.name} 时间:${event.animationState.currentTime}`); }); ``` --- ### 四、注意事项 1. **版本兼容性** - Cocos Creator 2.x 兼容 DragonBones 5.6+ - 升级到 v5.7 后需重新导出骨骼数据 2. **资源管理陷阱** ```markdown ✅ 正确:`loadDir` 加载同名资源包 ❌ 错误:手动加载单个文件(会破坏资源关联) ``` 3. **性能优化** - 复用 ArmatureDisplay 节点,避免频繁创建销毁 - 多动画切换时使用 `crossFade("newAnim", 0.3)` 过渡更平滑 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值