在 Phaser 中为具有相等尺寸的精灵表设置动画

Question

我有精灵表：

您可以在这里看到不同的框架有不同的尺寸。而且我不知道如何从不同大小的帧制作动画。请帮帮我。

Answer 1

我认为您需要为这些精灵创建一个精灵图集（有时也称为精灵纹理）。

精灵图集是 PNG 文件和 JSON 文件（有时是 XML 文件）的组合。 PNG 文件包含整齐地打包在一起的所有精灵，而 JSON 文件包含该 PNG 文件中每个精灵的坐标。 see more info here.

Phaser（和其他库）支持这种格式并且可以加载和显示这些精灵。那么你可以做什么：

1. 剪下每个精灵并保存为单独的 PNG 文件
2. 给每个文件一个有用的名字
3. 使用实用程序将 PNG 文件打包成精灵图集
4. 加载移相器和动画

对于有用的名称，我指的是 walk_1.png、walk_2.png、walk_3.png、duck_1.png、duck_2.png、teleport_1.png 等名称。

为了将单独的小精灵打包到一个精灵图集中，我使用了Leshy SpriteSheet Tool，这是一个免费软件工具。还有Texture Packer，它是一个商业实用程序，有更多选择，还有更多工具可以做同样的事情，比如 ShoeBox、Phaser Editor 等。

在 Phaser.js 中，您可以加载精灵图集并添加精灵，如下所示：

// either use .atlasJSONArray or .atlasJSONHash, depends on your JSON format
game.load.atlasJSONHash('myspriteatlassheet1', 'img/myspriteatlasfile.png', 'img/myspritefile.json');
var mysprite = game.add.sprite(10, 20, 'myspritesheet1', 'walk_1');

然后像这样添加一个动画：

mysprite.animations.add('jump', ['jump_1', 'jump_2', 'jump_3', 'jump_4'], 20, true); // 20fps, loop=true
mysprite.animations.add('duck', ['duck_1', 'duck_2', 'duck_3'], 30, true);
// etc.

mysprite.animations.play('jump');