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