游戏是用 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)