Exibindo um sprite específico da planilha usando o Phaser

Estou tentando fazer um jogo de cartas usando o Phaser, o framework JS HTML5. Como sou um artista péssimo e não consigo criar meu próprio desenho, estou usando uma planilha gratuita de imagens de cartas de baralho que encontrei on-line. O problema é que não consigo descobrir como exibir cartões individuais usando a Phaser.

Na estrutura anterior que usei, fui capaz de criar sprites menores individuais a partir da folha de sprite maior que usei. Mas não consigo descobrir como fazer isso na Phaser, se é que é possível.

Então, eu olhei para carregar a imagem como uma planilha, mas parece que as planilhas são usadas apenas para animação e você não pode realmente exibir um 'quadro' específico da planilha (corrija-me se estiver errado).

Acho que o que preciso fazer é carregar a imagem como um mapa de mosaico, no entanto, a imagem específica que estou usando não veio com um arquivo json especificando o layout (nem consegui encontrar um que fizesse). Sendo novo no javascript, estou tendo problemas para ler o código-fonte da Phaser para ver como o arquivo json deve ser formatado.

Então, em resumo, qual é a melhor maneira de exibir um cartão individual de uma planilha de cartas de baralho na Phaser, já que não tenho um arquivo json especificando os dados do mapa?

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

As planilhas não se limitam às animações, é apenas uma maneira de usá-las. Uma animação é apenas uma maneira de exibir quadros diferentes em momentos diferentes. Ao definir manualmente o quadro de um sprite, você pode exibir uma parte específica da planilha.

A Phaser tem suporte para dois tipos de folhas de sprite: as "clássicas", onde cada quadro tem exatamente o mesmo tamanho, e os "atlas de textura", criados com a ajuda de um aplicativo de terceiros, como Texture Packer, Shoebox ou Flash CC, e vêm com um arquivo json associado.

Você carrega os "clássicos" com os game.load.spritesheetquais deve especificar a largura e a altura dos quadros e, opcionalmente, a quantidade, ou seja:

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

Para carregar um atlas de textura, você pode usar game.load.atlas. Você encontrará muitos exemplos disso no repositório Phaser Examples.

Depois de carregado, crie seu sprite:

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

Isso diz à Phaser para usar a imagem com a tecla spriteSheetKeycomo textura. Por padrão, ele irá pular para o quadro 0 da folha de sprite, mas você pode alterá-lo sprite.framepara qualquer outro número válido.

Se o sprite estava usando um atlas de textura, é mais fácil alterar o quadro com base no nome do quadro: sprite.frameName = 'card4'onde o nome do quadro é exatamente o especificado no arquivo json do atlas de textura (abra-o e olhe para ver!).