# DragonBone resource adaptation

This chapter mainly introduces how to use the provided customizable Adapter to play external skeletal animation and skinning animation.

# Animation effect

# Create a scene

1. Construct a two-dimensional scene with animations to be performed.

# Resource Preparation

2. Put the animation resources needed by dragonbone into the project directory. Since external resources will not do dependency analysis, the resources need to be set as entry resources.

3. Construct dragonboneAdapter, You can use the products included in the sample directly, or get the Dragonbone adaptation code of the open source community, It provides a small game program adaptation code, and then enter the Beefball folder-npm run build

# Script uses dragonbone

4. Create a new script file and reference the constructed dragonboneAdapter

// According to the DragonBone source code, transform the rendering layer to achieve, and the compiled product
require("../dragonbone/dragonBones.js");

5. Load the dragonbone resource file set as the entry resource.

const task6 = engine.loader.load("Assets/dragonbone/dragon/Dragon_ske.json");
task6.promise.then(file => {
  this.dbres['Assets/dragonbone/dragon/Dragon_ske.json'] = file;
});

6. Obtain the BeefballFactory of dragonBones and use the function of dragonBone to build it.

const factory = dragonBones.BeefballFactory.factory;
/* normal */
factory.parseDragonBonesData(this.dbres['Assets/dragonbone/dragon/Dragon_ske.json'].value, "Dragon");
factory.parseTextureAtlasData(
  this.dbres['Assets/dragonbone/dragon/Dragon_tex.json'].value,
  this.dbres['Assets/dragonbone/dragon/Dragon_tex.png']
);
const armatureComponent2 = factory.buildArmatureComponent("Dragon", "Dragon");
armatureComponent2.animation.play("walk");
// Add the constructed animation node to the field
wrapBone.addChild(armatureComponent2.entity.transform2D);