在 Phaser 中动画尺寸不等的 spritesheet

Question

我有精灵表：

正如您在此处看到的，不同的框架具有不同的尺寸。而且我不知道如何从不同大小的帧制作动画。请帮帮我。

Answer 1

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

精灵图集是 PNG 文件和 JSON 文件（有时是 XML 文件）的组合。PNG 文件包含整齐地打包在一起的所有精灵，JSON 文件包含该 PNG 文件中每个精灵的坐标。在这里查看更多信息。

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');