使用Phaser从Spritesheet中显示特定Sprite

我正在尝试使用HTML5 JS框架Phaser制作纸牌游戏。因为我是一个糟糕的艺术家，无法设计自己的作品，所以我使用的是我在网上找到的免费纸牌图像精灵。问题是，我似乎无法弄清楚如何使用Phaser显示单个卡。

在我以前使用的框架中，我能够从使用的较大的Sprite工作表中创建单个较小的Sprite。但是，即使有可能，我也无法弄清楚如何在Phaser中执行此操作。

因此，我考虑将图像作为Spritesheet加载，但是Spritesheet似乎仅用于动画，并且您不能真正显示Spritesheet的特定“框架”（如果我错了，请纠正我）。

我认为我需要做的是将图像加载为tilemap，但是，我正在使用的特定图像没有带有指定布局的json文件（我也找不到能做到这一点的图像）。对javascript来说我是新手，我在阅读Phaser源代码以查看json文件应如何格式化时遇到了麻烦。

因此，总之，鉴于我没有指定地图数据的json文件，在Phaser中显示纸牌小精灵一张纸牌的最佳方法是什么？

var sprite = game.add.sprite(x, y, 'spritesheet_name');
sprite.frame = 0;

Spritesheets不仅限于动画，这只是使用它们的一种方式。动画只是在不同时间显示不同帧的一种方式。通过手动设置Sprite的框架，可以显示Spritesheet的特定部分。

Phaser支持两种类型的Sprite工作表：“经典”工作表（每帧大小完全相同）和“纹理地图集”，这些纹理表是在第三方应用（例如Texture Packer，Shoebox或Flash CC）的帮助下创建的与关联的json文件。

您在“经典” game.load.spritesheet框架上加载必须指定框架的宽度和高度以及数量（可选）的位置，即：

game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);

要加载纹理图集，可以使用game.load.atlas。您可以在Phaser示例回购中找到很多此类示例。

加载后，创建您的精灵：

var sprite = game.add.sprite(x, y, 'spriteSheetKey');

这告诉相位器将带有键的图像spriteSheetKey用作其纹理。默认情况下，它将跳到Sprite工作表的第0帧，但是您可以将其更改sprite.frame为任何其他有效数字。

如果精灵使用纹理图集，则更容易根据框架名称更改框架：sprite.frameName = 'card4'框架名称与纹理图集json文件中指定的完全相同（打开并查看它即可！）。