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

Detailed explanation of Linux copy and paste in VMware virtual machine

1. Linux under VMware Workstation: 1. Update sour...

How to configure ssh to log in to Linux using git bash

1. First, generate the public key and private key...

MySQL data insertion efficiency comparison

When inserting data, I found that I had never con...

What to do if you forget the initial password when installing MySQL on Mac

Forgetting the password is a headache. What shoul...

VMware Workstation 15 Pro Installation Guide (for Beginners)

01. VMware Workstation Pro 15 Download Download: ...

Vue implements internationalization of web page language switching

1. Basic steps 1: Install yarn add vue-i18n Creat...

Learn asynchronous programming in nodejs in one article

Table of Contents Introduction Synchronous Asynch...

How to use the markdown editor component in Vue3

Table of contents Install Importing components Ba...

Native JS to achieve drag photo wall

This article shares with you a draggable photo wa...

Solution to index failure caused by MySQL implicit type conversion

Table of contents question Reproduction Implicit ...

A magical MySQL deadlock troubleshooting record

background Speaking of MySQL deadlock, I have wri...

Summary of Linux file directory management commands

touch Command It has two functions: one is to upd...