前言
在制作多人在线游戏和HTML5游戏时，前端开发人员经常会遇到需要使用动画的情况。为此，我们通常会使用一些成熟的游戏引擎进行开发，而Phaser是一个强大的游戏引擎框架，可以帮助我们快速开发出高质量的游戏。
在Phaser的世界里，DragonBones是一个出色的动画设计工具，提供了许多可定制的接口，可以帮助我们轻松创建高品质的动画效果。
通过此篇文章，我们将介绍如何使用npm包phaser-dragonbones实现基于Phaser的动画开发。在这篇文章里，你将学到如何在项目中使用DragonBones创建和导入动画资源，并在Phaser中使用它们。
安装
首先，需要确保Phaser已经安装好了，接着，我们就可以使用npm来安装phaser-dragonbones。
npm install phaser-dragonbones --save
这个命令会安装必要的依赖项，并将phaser-dragonbones添加到你的package.json中，可以在你的项目中愉快使用。
导入动画资源
我们假设你已经有了一个DragonBones格式的动画资源(.dbbin或.dbjson)。才能将其导入到Phaser中使用，请执行以下操作：
1.将DragonBones动画文件移到项目的资源文件夹中。
2.在Phaser项目的preload.js文件中加载此文件。
示例代码如下：
preload: function () {
this.load.dragonbone('myAnimation', 'path/to/my/animation.dbbin', {
atlasURL: 'path/to/my/atlas.json',
name: 'MyAnimation'
});
}在上面的代码中，我们使用Phaser.Loader的.dragonbone方法导入了一个叫做myAnimation的动画资源。由于DragonBones需要读取.atlas.json文件，我们同样需要提供此文件的路径。
我们最后还需为这个动画资源起一个相应的名称，并传入name参数以添加其到Phaser.Cache中。
使用动画资源
现在，我们已成功加载了动画资源，接下来，我们需要使用phaser-dragonbones库来播放它。
首先，我们需要引入phaser-dragonbones库，并在create.js中添加以下代码：
create: function () {
const armatureKey = this.cache.dragonbone.getMyAnimation('armaturName');
const armatureDisplay = this.add.armatureDisplay(armatureKey);
armatureDisplay.animation.play('idle');
}在代码中，我们首先使用Phaser Cache的.dragonbone中的getMyAnimation方法获取我们之前设置的动画资源名称，同时，该函数需要传入动画资源的骨架名。
接下来，我们使用Phaser.GameObjects.ArmatureDisplay方法创建了一个新的对象armatureDisplay.
最后，我们使用armatureDisplay.animation.play方法播放动画的动作，例如“idle”。
总结
通常来说，结合Phaser和DragonBones可以在HTML5游戏开发中轻松得创建高质量的动画，而phaser-dragonbones库提供了许多方便易用的功能，进一步增加了开发效率。
通过这篇文章，我们已经了解到了如何安装phaser-dragonbones并导入DragonBones格式的动画资源，同时也学习了如何使用Phaser GameObjects ArmatureDisplay方法播放动画。
希望此篇文章可以帮助到那些想学习HTML5游戏开发的读者，并使他们更加深入地了解Phaser和DragonBones的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005584681e8991b448d57c9