動(dòng)畫

游戲是用 Pixi.js 寫的，動(dòng)畫是用 DragonBones 制作的。

最開始的想法是這個(gè)簡(jiǎn)單的動(dòng)畫，完全可以用代碼寫。后來發(fā)現(xiàn)動(dòng)畫雖然不復(fù)雜完全用程序控制還是有一定代碼量的，所以就用了 DragonBones，也算是嘗試新事物。

動(dòng)畫的制作過程就不贅述了，也沒什么技術(shù)含量，這里附上導(dǎo)出資源。

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

首先是加載資源。

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

動(dòng)畫資源加載完成之后，就是使用了，使用需要用到 DragonBones 的 JS Runtime。

官方庫(kù)要改一下用起來才順手，也可以用我的小改動(dòng)版。

npm i dragonbones.js

用起來也很簡(jiǎn)單。

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)