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)

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 10,418评论 1 32
  • 中午一点睡觉,睡前早早换睡衣,还把醒来穿的衣服叠的整整齐齐妈妈注意到你今天把衣服叠的好整齐,起来穿的时候一定充满喜...
    亚娜蝴蝶号阅读 118评论 0 0
  • 文 / 长木云伊 时间过得很快,转眼一个月过去了。这个月里我从一个新人进化到略了解公司文化的新员工,有些感悟,写在...
    莫嗔堂堂主阅读 195评论 0 0
  • 有一种病,说重不重,说轻不轻,就是拖延症。说严重呢,好像也没有,就是事情要拖到最后一天完成,说不严重吧,这病也会耽...
    燕子大眼睛阅读 133评论 0 0
  • 文/饭老大 不知道为什么,最近总感觉肩膀好重,就像背着一个人一样。 “冷,你早上背的是谁?”在太阳刚刚破过浓雾透射...
    饭老大阅读 189评论 0 0