CocosCreator Skeleton Animation Dragon Bones

CocosCreator Skeleton Animation Dragon Bones

CocosCreator version 2.3.4

Dragon bone animation

Put the keel animation under Cocos assets. The dragon bone animation here is the binary animation exported by Dragonbones.

Drag the keel animation (bone icon) directly to the stage

Set the properties of skeletal animation, DragonAtlasAsset images, Animation actions, PlayTime loop playback, etc.

Code generated keel animation

The dragon bone resource path is assets/resources/dragonbones, and loadResDir only needs to fill in dragonbones.

//Load resources according to the path cc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{
      console.log("resource:",resource);
      //Generate skeletal animation let node:cc.Node = new cc.Node();
      let armatureDisplay:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay);
      armatureDisplay.dragonAsset = resource[0];
      armatureDisplay.dragonAtlasAsset = resource[3];
      armatureDisplay.armatureName = "role3";
      armatureDisplay.playAnimation("move",0);
      node.x = 100;
      node.y = 100;
      this.node.addChild(node);
});

Replace skin

//Load resourcescc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{
     console.log("resource:",resource);
 
    //Generate animation 1
    let node:cc.Node = new cc.Node();
    let armatureDisplay:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay);
    armatureDisplay.dragonAsset = resource[0];
    armatureDisplay.dragonAtlasAsset = resource[3];
    armatureDisplay.armatureName = "role3";
    armatureDisplay.playAnimation("move",0);
    node.x = 100;
    node.y = 100;
    this.node.addChild(node);
 
    //Generate animation 2
    let node2:cc.Node = new cc.Node();
    let armatureDisplay2:dragonBones.ArmatureDisplay = node2.addComponent(dragonBones.ArmatureDisplay);
    armatureDisplay2.dragonAsset = resource[4];
    armatureDisplay2.dragonAtlasAsset = resource[7];
    armatureDisplay2.armatureName = "role4";
    armatureDisplay2.playAnimation("move",0);
    node2.x = 150;
    node2.y = 150;
    this.node.addChild(node2);
     
 
    //Apply the skin of animation 2 to animation 1 let factory = dragonBones.CCFactory.getInstance();
    factory.replaceSkin(armatureDisplay.armature(), (armatureDisplay2.armature() as dragonBones.Armature).armatureData.defaultSkin, true);
});

The above is the detailed content of CocosCreator skeletal animation DragonBones. For more information about CocosCreator skeletal DragonBones, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Unity uses physics engine to simulate the flight of multi-rotor drones
  • Simple example of using Box2d, a 2D physics engine for Android
  • Interpretation of CocosCreator source code: engine startup and main loop
  • CocosCreator general framework design resource management
  • How to make a List in CocosCreator
  • Analysis of CocosCreator's new resource management system
  • Detailed explanation of making shooting games with CocosCreator
  • How to draw a cool radar chart in CocosCreator
  • Detailed explanation of CocosCreator MVC architecture
  • How to use physics engine joints in CocosCreator

<<:  Linux virtual memory settings tutorial and practice

>>:  MySQL prepare principle detailed explanation

Recommend

Handwriting implementation of new in JS

Table of contents 1 Introduction to the new opera...

Detailed explanation of MySQL transaction processing usage and example code

MySQL transaction support is not bound to the MyS...

How to draw a mind map in a mini program

Table of contents What is a mind map? How to draw...

Summary of important mysql log files

Author: Ding Yi Source: https://chengxuzhixin.com...

UrlRewriter caching issues and a series of related explorations

When developing a website function, the session c...

How to use React to implement image recognition app

Let me show you the effect picture first. Persona...

How to deploy HTTPS for free on Tencent Cloud

Recently, when I was writing a WeChat applet, the...

How to install mysql in docker

I recently deployed Django and didn't want to...

Implementation of Docker Compose multi-container deployment

Table of contents 1. WordPress deployment 1. Prep...

Detailed explanation of Vue custom instructions and their use

Table of contents 1. What is a directive? Some co...

CSS sample code to achieve circular gradient progress bar effect

Implementation ideas The outermost is a big circl...

Common parameters of IE web page pop-up windows can be set by yourself

The pop-up has nothing to do with whether your cur...