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

Talk about important subdirectory issues in Linux system

/etc/fstab Automatically mount partitions/disks, ...

Example code for implementing photo stacking effect with CSS

Achieve results step 1. Initial index.html To bui...

Method of dynamically loading geojson based on Vue+Openlayer

Load one or more features <template> <di...

WeChat applet implementation anchor positioning function example

Preface In the development of small programs, we ...

Solution - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Insufficient permissions

1) Enter the folder path where the jdk file is st...

Why do code standards require SQL statements not to have too many joins?

Free points Interviewer : Have you ever used Linu...

How to use JS to check if an element is within the viewport

Preface Share two methods to monitor whether an e...

Sample code for implementing music player with native JS

This article mainly introduces the sample code of...

Steps to create a WEBSERVER using NODE.JS

Table of contents What is nodejs Install NodeJS H...

Common pitfalls of using React Hooks

React Hooks is a new feature introduced in React ...

Introduction to Enterprise Production MySQL Optimization

Compared with other large databases such as Oracl...

Summary of CSS gradient effects (linear-gradient and radial-gradient)

Linear-gradient background-image: linear-gradient...