Dragonbones 龙骨动画

      DragonBones 是白鹭时代推出的面向设计师的 2D 游戏动画和富媒体内容创作平台，它提供了 2D 骨骼动画解决方案和动态漫画解决方案。使用 Dragonbones 骨骼动画可以实现更加丰富的效果，相对于帧动画能够更好的减少内存占用。

      Dragonbone 龙骨动画官网：http://dragonbones.com/cn/index.html

      安装

      使用 NPM

      1. npm i @eva/plugin-renderer @eva/plugin-renderer-dragonbone

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-renderer-dragonbone@1.2.x/dist/EVA.plugin.renderer.dragonbone.min.js“></script>

      使用

      1. import { Game, GameObject, resource, RESOURCE_TYPE } from ‘@eva/eva.js’
      2. import { RendererSystem } from ‘@eva/plugin-renderer’
      3. import { Img, ImgSystem } from ‘@eva/plugin-renderer-img’
      4. import { DragonBone, DragonBoneSystem } from ‘@eva/plugin-renderer-dragonbone’
      6. resource.addResource([
      7.   {
      8.     name: ‘dragonbone’,
      9.     type: RESOURCE_TYPE.DRAGONBONE,
      10.     src: {
      11.       image: {
      12.         type: ‘png’,
      13.         url: ‘https://gw.alicdn.com/tfs/TB1RIpUBhn1gK0jSZKPXXXvUXXa-1024-1024.png‘
      14.       },
      15.       tex: {
      16.         type: ‘json’,
      17.         url: ‘https://pages.tmall.com/wow/eva/fb18baf3a1af41a88f9d1a4426d47832.json‘
      18.       },
      19.       ske: {
      20.         type: ‘json’,
      21.         url: ‘https://pages.tmall.com/wow/eva/c904e6867062e21123e1a44d2be2a0bf.json‘
      22.       }
      23.     },
      24.     preload: true
      25.   }
      26. ])
      28. const game = new Game({
      29.   systems: [
      30.     new RendererSystem({
      31.       canvas: document.querySelector(‘#canvas’),
      32.       width: 750,
      33.       height: 1000
      34.     }),
      35.     new DragonBoneSystem()
      36.   ]
      37. })
      39. // 此处还在考虑如何设置默认场景的宽高
      40. game.scene.transform.size = {
      41.   width: 750,
      42.   height: 1000
      43. }
      45. // dragonbone 的 origin 是失效的，将会按照 dragonbone 设计时的坐标重点定位
      46. const dragonBone = new GameObject(‘db’, {
      47.   anchor: {
      48.     x: 0.5,
      49.     y: 0.5
      50.   }
      51. })
      53. const db = dragonBone.addComponent(
      54.   new DragonBone({
      55.     resource: ‘dragonbone’,
      56.     armatureName: ‘armatureName’
      57.   })
      58. )
      60. db.play(‘newAnimation’)
      61. game.scene.addChild(dragonBone)

      参数

      resource string

      龙骨动画的资源名称

      armatureName string

      导出龙骨动画的时候设置的骨骼名字，在整个项目中，多个资源不能使用同一个 armatureName，详见最后的注意。

      animationName string

      开始播放的动画名字

      方法

      play(name?: string, times?: number)

      播放动画，默认播放第一个

      • name: 动画名
      • times: 播放次数，默认无限次

      stop(name?: string)

      停止播放

      事件

      参考龙骨动画官方事件，Dragonbone 组建实例的上能够监听这些事件。

      1. // ‘start’, ‘loopComplete’, ‘complete’, ‘fadeIn’, ‘fadeInComplete’, ‘fadeOut’, ‘fadeOutComplete’,’frameEvent’, ‘soundEvent’
      2. const db = gameObject.addComponent(new DragonBone({…}));
      3. db.on(‘start’, ()=>{})
      4. db.on(‘complete’, ()=>{})

      注意

      多个骨骼动画 armatureName 不能相同，导出时项目名称要使用英文

      image.png

      image.png

      ,