Pixi.js 与 DragonBones

动画

游戏是用 Pixi.js 写的，动画是用 DragonBones 制作的。

最开始的想法是这个简单的动画，完全可以用代码写。后来发现动画虽然不复杂完全用程序控制还是有一定代码量的，所以就用了 DragonBones，也算是尝试新事物。

动画的制作过程就不赘述了，也没什么技术含量，这里附上导出资源。

说一说在 Pixi.js 里怎么用。

首先是加载资源。

loader
  .add('orad_ske.json')
  .add('orad_tex.json')
  .add('orad_tex.png')
  .load(() => {
    // todo...
  })

动画资源加载完成之后，就是使用了，使用需要用到 DragonBones 的 JS Runtime。

官方库要改一下用起来才顺手，也可以用我的小改动版。

npm i dragonbones.js

用起来也很简单。

const
  factory = dragonBones.PixiFactory.factory,
  {resources} = loader

factory.parseDragonBonesData(resources['orad_ske.json'].data)
factory.parseTextureAtlasData(
  resources['orad_tex.json'].data,
  resources['orad_tex.png'].texture
)

const anime = factory.buildArmatureDisplay('root')
// 事件帧
anime.armature.eventDispatcher.addDBEventListener('frameEvent', async ({name}) => {
  if (name !== 'meet:end') return
  anime.animation.play('love')
  await delay(3)
  anime.animation.play('snatch')
})
anime.animation.play('meet')
anime.position.set(screen.width >> 1, screen.height + 200 >> 1)
stage.addChild(anime)