DragonBones ArmatureDisplay 组件参考

ArmatureDisplay 组件可以对 DragonBones（龙骨）资源进行渲染和播放。

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

• ArmatureDisplay 组件的使用方法可参考 DragonBones（GitHub | Gitee）范例。
• DragonBones 相关的脚本接口请参考 DragonBones API。

DragonBones 属性

注意：

1. 当使用 ArmatureDisplay 组件时，属性检查器 中 Node 组件上的 Anchor 与 Size 属性是无效的。
2. ArmatureDisplay 组件属于 UI 渲染组件，而 Canvas 节点是 UI 渲染的 渲染根节点，所以带有该组件的节点必须是 Canvas 节点（或者是带有 RenderRoot2D 组件的节点）的子节点才能在场景中正常显示。

DragonBones 换装

下面通过一个范例介绍 DragonBones 如何换装。通过替换插槽的显示对象，将下图机器人的武器替换为红色框中的武器。

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

   

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

   

3. 在 资源管理器 中新建一个 TypeScript 脚本并命名为 ReplaceSlotDisplay，编写组件脚本。脚本代码如下：

    import { _decorator, Component, dragonBones } from 'cc';
    const { ccclass, property } = _decorator;
   
    @ccclass('ReplaceSlotDisplay')
    export class ReplaceSlotDisplay extends Component {
   
        @property({ type: dragonBones.ArmatureDisplay })
        armatureDisplay: dragonBones.ArmatureDisplay | null = null
        @property({ type: dragonBones.ArmatureDisplay })
        replaceArmatureDisplay: dragonBones.ArmatureDisplay | null = null;
   
        _leftWeaponIndex = 0;
        _rightDisplayIndex = 0;
        _rightDisplayNames:string[] = [];
        _rightDisplayOffset:{x: number, y: number}[] = [];
   
        start () {
            this.replaceArmatureDisplay!.node.active = false;
            this._leftWeaponIndex = 0;
            this._rightDisplayIndex = 0;
            this._rightDisplayNames = ["weapon_1004s_r", "weapon_1004e_r"];
            this._rightDisplayOffset = [{ x: 0, y: 0 }, { x: -60, y: 100 }];
        }
   
        left () {
            let armature = this.armatureDisplay!.armature();
            let slot = armature!.getSlot("weapon_hand_l");
            slot!.displayIndex = slot!.displayIndex == 0 ? 4 : 0;
        }
   
        right () {
            this._rightDisplayIndex++;
            this._rightDisplayIndex %= this._rightDisplayNames.length;
            let armature = this.armatureDisplay!.armature();
            let slot = armature!.getSlot("weapon_hand_r");
            let replaceArmatureName = this.replaceArmatureDisplay!.armatureName;
            const displayName = this._rightDisplayNames[this._rightDisplayIndex];
            let factory = dragonBones.CCFactory.getInstance() as any;
            factory.replaceSlotDisplay(this.replaceArmatureDisplay!.getArmatureKey(), replaceArmatureName , "weapon_r", displayName, slot);
   
            let offset = this._rightDisplayOffset[this._rightDisplayIndex];
            slot!.parent.offset.x = offset.x;
            slot!.parent.offset.y = offset.y;
            armature!.invalidUpdate();
        }
    }
   

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

   

5. 接下来我们需要利用 Button 组件的点击事件来触发 ReplaceSlotDisplay 脚本中的 left 和 right 回调，实现通过点击按钮来替换机器人左/右手的武器。

   在 层级管理器 的 Canvas 节点下新建两个 Button 节点并命名为 left 和 right，根据需要调整其位置、大小、文字显示等属性。

   然后在 属性检查器 中设置 left 和 right 节点的点击事件，将挂载了 ReplaceSlotDisplay 脚本组件的 Canvas 节点分别拖拽到两个节点的 ClickEvents 属性的 cc.Node 属性框中，指定脚本组件为 ReplaceSlotDisplay，并设置回调为 left/right（下图以 right 节点为例）：

   

6. 保存场景后，点击编辑器上方的预览按钮，然后点击 Left/Right 按钮即可看到机器人左/右手的武器已经被替换。

   

   详情可参考官方范例 ReplaceSlotDisplay（GitHub | Gitee）。

   注意：

   1. 范例运行起来后右手替换的武器样式与场景中预备的武器样式不一致，这是资源问题导致的，开发者请参考具体的代码实现。

   2. 若预览时未显示场景，请检查各节点的 Layer 属性是否与 Camera 节点的保持一致。

      

DragonBones 挂点与碰撞检测

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