javascript - 在 Phaser 中以相等尺寸制作 Sprite 表动画

Question

我有 Sprite 表:

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

Answer 1

我认为您需要创建这些 Sprite 的 Sprite 图集(有时也称为 Sprite 纹理)。

Sprite 图集是 PNG 文件和 JSON 文件(有时是 XML 文件)的组合。 PNG 文件包含所有整齐排列在一起的 Sprite ，JSON 文件包含该 PNG 文件中每个 Sprite 的坐标。 see more info here .

Phaser(和其他库)支持这种格式，并且可以加载和显示此类 Sprite 。那么你可以做什么:

1. 剪切每个 Sprite 并保存为单独的 PNG 文件
2. 为每个文件指定一个有用的名称
3. 使用实用程序将 PNG 文件打包到 Sprite 图集中
4. 加载移相器并制作动画

对于有用的名称，我指的是诸如 walk_1.png、walk_2.png、walk_3.png、duck_1.png、duck_2.png、teleport_1.png 等类似的东西。

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

在 Phaser.js 中，您可以加载 Sprite 图集并添加 Sprite ，如下所示:

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