DragonBones ArmatureDisplay Component References

The ArmatureDisplay component can render and play DragonBones assets.

In the Hierarchy panel, select the node where you want to add the ArmatureDisplay component, and then click the Add Components -> DragonBones -> ArmatureDisplay button under the Inspector panel to add the ArmatureDisplay component to the node.

• For information on using the ArmatureDisplay component, please refer to the DragonBones example case for details.
• For DragonBones ArmatureDisplay related scripting interfaces, please refer to the ArmatureDisplay API for details.

DragonBones Properties

Notes:

1. The Anchor and Size properties on the Node component in the Inspector panel are disabled when using the ArmatureDisplay component.
2. The ArmatureDisplay component is a UI renderable component, and the Canvas node is the rendering root for UI rendering, so the node with this component must be a child of the Canvas node (or a node with a RenderRoot2D component) to be displayed properly in the scene.

DragonBones ReplaceTexture

The following is an example of how DragonBones replaces the texture. Replace the weapon in the left or right hand of the robot below with the weapon in the red box by replacing the slot’s display object.

1. First create a new Canvas node in the Hierarchy panel, and then create a new empty node and name it to replaceDBNode under the Canvas node. Select replaceDBNode and add the ArmatureDisplay component to the Inspector panel. Drag and drop the weapon resource in the green box to the property boxes of the ArmatureDisplay component, as shown below:

   

2. Create a new empty node again and name it to dbNode. Then add the ArmatureDisplay component to the Inspector panel and drag the robot’s assets to the property boxes of the ArmatureDisplay component, as shown below. Change the Animation property of the ArmatureDisplay component to set the animation you want to play.

   

3. Create a new TypeScript script and name it ReplaceSlotDisplay in the Assets panel to write the component script. The script code is as follows:

    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. Next, attach the script component to the Canvas node, i.e. drag and drop the script into the Inspector panel of the Canvas node. Drag and drop the dbNode node and replaceDBNode node from the Hierarchy panel into the corresponding property boxes of the script component and save the scene.

   

5. Next, use the Button component’s click event to trigger the left and right callback in the ReplaceSlotDisplay script to replace the texture by clicking the button.

   Create two new Button nodes under the Canvas node in the Assets panel and name them left and right. Adjust their position, size, text display and other properties as needed.

   Set the click events for the left and right nodes in the Inspector panel, drag the Canvas node with the ReplaceSlotDisplay script component attached to the cc.Node property box of the ClickEvents property of the left and right nodes respectively, specify script component as ReplaceSlotDisplay, and set the callback to left/right (the following figure shows the right node as an example).

   

6. After saving the scene, click the Preview button at the top of the editor, and click the Left/Right button to see that the robot’s left/right hand weapons have been replaced. For details, please refer to the ReplaceSlotDisplay example.

   

   Notes:

   1. After the example is run, the weapon style replaced by the right hand is not consistent with the weapon style prepared in the Scene, which is caused by the resource problem, please refer to the specific code implementation.
   2. If the scene is not displayed when previewing, check that the Layer property of each node is consistent with that of the Camera node.

   

DragonBones Attachment and Collision Detection

DragonBones attachment and collision detection are done in exactly the same way as Spine, please refer to the Spine Attachment and Collision Detection documentation.