Realize pixi + DragonBones to play animation

General Raiden has been online recently, the Lord C of Flowing Water, the God of Iron Strike. The seven gods must draw, one 10 shots to marry home, and a small guarantee is also included.

Of course, this article is not for Fan, but returns to our topic: pixi and dragonbones

Every time before a new wife/husband goes online, ys will create a pilot page, such as Thor’s pilot page https://webstatic.mihoyo.com/ys/event/e20210820-preview/index.html.

At first, I thought it was playing the video directly. I looked at the resource loading, eh, there is no video. Strong curiosity, found a picture

I searched in my mind, and I remembered that when I used egret to write a small game, there was a keel animation tool. The example is also a Sprite map like this.

The idea is probably clear. Most of the animations in it are made with skeletal animation. Following the code in the source, I found a few keywords

• Spine

  I checked, it is a software for making 2D skeletal animation ( Spine: 2D skeletal animation for games )

  Spine-runtimes supports almost all mainstream game engines and programming languages, and can achieve the same animation effects as in the Spine editor through corresponding runtimes

• Three.js

  This well-known, 3D library

The general idea is clear. First use Spine to make animation effects, export the data, and then use the three.js plug-in of spine-runtimes to run it on the page.

What are the benefits of skeletal animation?

• continuous. It won’t freeze like frame animation after slowing down.
• Save storage space.

There are many softwares for making skeletal animations. The one I found is Spine. I searched for this software. Good guys, ask for money. Although there is no doubt that it supports genuine software, as a development, it is only a practical practice, and I don't particularly want to spend this money. You can only see if there are other free software.

I suddenly remembered that the dragon above, egret’s keel making software, can be directly used for skeletal animation. During this period, I also found its tool library: format conversion . This official tool can realize the mutual conversion of various formats. What I want here is the command that can be converted from db JSON to Spine JSON:

db2 -t spine

First use dragonebones to make a simple skeleton animation

• Texture

  

• Texture JSON

  {"name":"ciwei","imagePath":"ciwei_tex.png","SubTexture":[{"name":"背部","x":1,"height":378,"y":1,"width":327},{"name":"手腕","x":278,"height":75,"y":381,"width":98},{"name":"身体","x":330,"height":268,"y":1,"width":300},{"name":"右手","x":171,"height":97,"y":381,"width":105},{"name":"右腿","x":330,"height":72,"y":271,"width":58},{"name":"枪","x":1,"height":88,"y":381,"width":168}],"height":512,"width":1024}

• Skeleton JSON

  {"frameRate":8,"name":"ciwei","version":"5.5","compatibleVersion":"5.5","armature":[{"type":"Armature","frameRate":8,"name":"Armature","aabb":{"x":-220.04,"y":-217.93,"width":482.27,"height":422.86},"bone":[{"name":"root","transform":{"skX":29.5962,"skY":29.5962}},{"name":"bone_ikTarget","parent":"root","transform":{"x":42.3759,"y":158.7024,"skX":-29.5962,"skY":-29.5962}},{"length":86,"name":"身体","parent":"root","transform":{"x":20.6596,"y":24.2253,"skX":13.7781,"skY":13.7781,"scX":1.2315,"scY":1.2315}},{"length":89,"name":"右手","parent":"身体","transform":{"x":-18.5603,"y":-11.6222,"skX":-47.9086,"skY":-47.9086,"scX":1.0534,"scY":1.0534}},{"length":200,"name":"背部","parent":"身体","transform":{"x":-17.7904,"y":-6.7476,"skX":-111.9925,"skY":-111.9925,"scX":0.812,"scY":0.812}},{"length":74,"name":"右腿","parent":"身体","transform":{"x":59.5746,"y":14.7124,"skX":11.4582,"skY":11.4582,"scX":0.812,"scY":0.812}},{"length":104,"name":"手腕","parent":"身体","transform":{"x":1.3965,"y":-3.7357,"skX":72.9018,"skY":72.9018,"scX":0.812,"scY":0.812}},{"length":95,"name":"枪","parent":"手腕","transform":{"x":108.0692,"y":9.1858,"skX":21.4831,"skY":21.4831}}],"slot":[{"name":"背部","parent":"背部"},{"name":"手腕","parent":"手腕"},{"name":"身体","parent":"身体"},{"name":"右手","parent":"右手"},{"name":"右腿","parent":"右腿"},{"name":"枪","parent":"枪"}],"ik":[{"chain":1,"name":"bone_ik","bone":"右腿","target":"bone_ikTarget"}],"skin":[{"slot":[{"name":"枪","display":[{"name":"枪","transform":{"x":37.82,"y":-13.56,"skX":176.9,"skY":176.9}}]},{"name":"身体","display":[{"name":"身体","transform":{"x":26.87,"y":-88.06,"skX":-86.23,"skY":-86.23,"scX":0.9615,"scY":0.9615}}]},{"name":"手腕","display":[{"name":"手腕","transform":{"x":71.91,"y":-1.08,"skX":-165.68,"skY":-165.68}}]},{"name":"右腿","display":[{"name":"右腿","transform":{"x":34.88,"y":5.16,"skX":-91.38,"skY":-91.38}}]},{"name":"背部","display":[{"name":"背部","transform":{"x":66.71,"y":-18.64,"skX":-0.6,"skY":-0.6}}]},{"name":"右手","display":[{"name":"右手","transform":{"x":71.25,"y":0.37,"skX":-35.83,"skY":-35.83,"scX":0.9493,"scY":0.9493}}]}]}],"animation":[{"duration":21,"playTimes":0,"name":"jump","bone":[{"name":"root","translateFrame":[{"duration":21,"x":1}]},{"name":"身体","translateFrame":[{"duration":7,"tweenEasing":0,"x":-23.02,"y":-20.28},{"duration":7,"tweenEasing":0,"x":-34.46,"y":-33.33},{"duration":7,"tweenEasing":0,"x":9.03,"y":9.82},{"duration":0,"x":-23.02,"y":-20.28}]}]}],"defaultActions":[{"gotoAndPlay":"jump"}]}]}

In fact, pixi can directly use dragonebones' plug-in, but it is willful, that is, it needs to be converted to Spine format to load.
After executing db2 -t spine , two files, ciwei_spine.json and ciwei_spine.altas, will be generated, and the texture png and these two files will be placed in the project. Now we can start writing code.

1. Installation dependencies

   # pixi v6.1.2
   yarn add pixi.js
   
   # pixi-spine v3.0.8
   yarn add pixi-spine

2. Import

   import { Application, utils } from 'pixi.js'
   import { Spine } from 'pixi-spine'

3. Instantiate pixi

   const app = new Application({
     view: this.$refs['canvas'],
     backgroundColor: 0x000000,
     antialias: true,
     width: this.width, // 舞台宽度
     height: this.height, // 舞台高度
     resolution: 2
   })

4. Load resources

   const loader = app.loader
   const resources = [{
     name: 'ciwei',
     url: './static/spine2/ciwei.json'
   }]
   // 加载资源
   resources.forEach(res => {
     loader.add(res.name, res.url)
   })
   
   // 加载成功
   loader.load(this.init)

5. Add objects to the stage

   function init () {
     // 获取 spine 骨骼对象
     const spine = new Spine(loader.resources['ciwei'].spineData)
     spine.name = 'ciwei'
     // 定义了 jump 的动画行为
     spine.state.setAnimation(0, 'jump', true)
     spine.x = 200
     spine.y = 200
     // 添加到舞台
     app.stage.addChild(spine)
   }

final effect:

However, there is no need to go around like me. The keel exported from db officially supports pixi, and the address is DragoneBonesJS .

Last look at the general Raiden I ran out

Done! Finish.