在 Phaser 中使用不等尺寸动画 spritesheet

Question

我有精灵表：

如您所见，不同的框架在此处具有不同的尺寸。而且我不知道如何用不同尺寸的帧制作动画。请帮助我。

Answer 1

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

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

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

剪下每个精灵并另存为单独的 PNG 文件
给每个文件一个有用的名字
使用实用程序将 PNG 文件打包成精灵图集
加载移相器并制作动画

有用的名字是指像 walk_1.png、walk_2.png、walk_3.png、duck_1.png、duck_2.png、teleport_1.png 等这样的名字就这样。

为了将单独的小精灵打包成一个精灵图集，我使用 Leshy SpriteSheet Tool which is a freeware tool. There's also Texture Packer which is a commercial utility with a bit more options, and there are more tools that do the same thing like 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');

在 Phaser 中使用不等尺寸动画 spritesheet

Animate spritesheet with uequal dimensions in Phaser

javascript

animation

sprite-sheet

phaser-framework