3.1.15 DragonBones 组件参考

DragonBones 组件可以对骨骼动画（DragonBones）资源进行渲染和播放。

在 层级管理器 中选中需要添加 DragonBones 组件的节点，然后点击 属性检查器 下方的 添加组件 -> 渲染组件 -> DragonBones 按钮，即可添加 DragonBones 组件到节点上。

• DragonBones 组件在脚本中的操作请参考 example-cases 中的 DragonBones 测试例。
• DragonBones 相关的脚本接口请参考 DragonBones API。

DragonBones 属性

注意：当使用 DragonBones 组件时，属性检查器 中 Node 组件上的 Anchor 与 Size 属性是无效的。

DragonBones 换装

下面通过一个范例介绍 DragonBones 如何换装。通过替换插槽的显示对象，将下图绿色框中的武器替换为红色框中的刀。此方法适用于 v2.0.10 或者 v2.1.1 及以上版本。

1. 首先在 层级管理器 中新建一个空节点，重命名为 knife。然后在 属性检查器 中添加 DragonBones 组件。并将红色框中的刀的资源拖拽至 DragonBones 组件的属性框中，如下图所示：

   

2. 再次新建一个空节点并重命名为 robot，然后在 属性检查器 中添加 DragonBones 组件，并将机器人的资源拖拽至 DragonBones 组件的属性框中，如下图所示。可更改 DragonBones 组件的 Animation 属性用于设置开发者想要播放的动画。

   

3. 在 资源管理器 中新建一个 JavaScript 脚本，编写组件脚本。脚本代码如下：

    cc.Class({
        extends: cc.Component,
   
        properties: {
            robot: {
                type: dragonBones.ArmatureDisplay,
                default: null,
            },
            knife: {
                type: dragonBones.ArmatureDisplay,
                default: null,
            }
        },
   
        start () {
            let robotArmature = this.robot.armature();
            let robotSlot = robotArmature.getSlot("weapon_hand_r");
            let factory = dragonBones.CCFactory.getInstance();
            factory.replaceSlotDisplay(
                this.knife.getArmatureKey(), 
                "weapon", 
                "weapon_r", 
                "weapon_1004c_r", 
                robotSlot
            );
        },
    });
   

4. 然后将脚本组件挂载到 Canvas 节点上，即将脚本拖拽到 Canvas 节点的 属性检查器 中。再将 层级管理器 中的 robot 节点和 knife 节点分别拖拽到脚本组件对应的属性框中，并保存场景。

   

5. 点击编辑器上方的预览按钮，可以看到机器人右手的刀已经被替换。

   

DragonBones 挂点与碰撞检测

DragonBones 挂点和碰撞检测的方法与 Spine 完全相同，详情请参考 Spine 挂点与碰撞检测。