Mostrar un sprite particular de la hoja de sprites usando Phaser

Estoy tratando de hacer un juego de cartas usando Phaser, el framework HTML5 JS. Como soy un artista terrible y no puedo diseñar el mío, estoy usando una hoja de sprites gratuita de imágenes de naipes que encontré en línea. El problema es que parece que no puedo entender cómo mostrar tarjetas individuales con Phaser.

En el marco anterior que utilicé, pude crear sprites individuales más pequeños a partir de la hoja de sprites más grande que usé. Pero no puedo entender cómo hacerlo en Phaser, si es posible.

Así que busqué cargar la imagen como una hoja de sprites, pero parece que las hojas de sprites se usan solo para animación y realmente no se puede mostrar un 'marco' particular de la hoja de sprites (corríjame si me equivoco).

Creo que lo que tengo que hacer es cargar la imagen como un mapa de mosaico, sin embargo, la imagen particular que estoy usando no vino con un archivo json que especifique el diseño (ni pude encontrar uno que sí lo hiciera). Como soy nuevo en JavaScript, tengo problemas para leer el código fuente de Phaser para ver cómo se debe formatear el archivo json.

En resumen, ¿cuál es la mejor manera de mostrar una tarjeta individual de una hoja de cartas de juego en Phaser dado que no tengo un archivo json que especifique los datos del mapa?

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

Las hojas de sprites no se limitan a animaciones, esa es solo una forma de usarlas. Una animación es solo una forma de mostrar diferentes cuadros en diferentes momentos. Al configurar manualmente el marco de un sprite, puede mostrar una parte específica de la hoja de sprites.

Phaser tiene soporte para dos tipos de hojas de sprites: las "clásicas", donde cada cuadro tiene exactamente el mismo tamaño, y los "atlas de textura" que se crean con la ayuda de una aplicación de terceros como Texture Packer, Shoebox o Flash CC y vienen con un archivo json asociado.

Cargue los "clásicos" game.load.spritesheetdonde debe especificar el ancho y la altura de los cuadros, y opcionalmente la cantidad, es decir:

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

Para cargar un atlas de texturas puedes usar game.load.atlas. Encontrarás muchos ejemplos de esto en el repositorio de ejemplos de Phaser.

Una vez cargado, crea tu sprite:

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

Esto le dice a Phaser que use la imagen con la clave spriteSheetKeycomo textura. Por defecto, saltará al cuadro 0 de la hoja de sprites, pero puede cambiarlo sprite.framea cualquier otro número válido.

Si el sprite estaba usando un atlas de textura, es más fácil cambiar el marco en función del nombre del marco: sprite.frameName = 'card4'donde el nombre del marco es exactamente como se especifica en el archivo jlas del atlas de textura (¡ábralo y mírelo para verlo!).