Visualizzazione di uno sprite particolare da spritesheet usando Phaser

Sto cercando di creare un gioco di carte usando Phaser, il framework HTML5 JS. Dato che sono un artista terribile e non riesco a progettare il mio, sto usando uno spritesheet gratuito di immagini di carte da gioco che ho trovato online. Il problema è che non riesco a capire come visualizzare le singole carte usando Phaser.

Nel quadro precedente che ho usato, sono stato in grado di creare singoli sprite più piccoli dal foglio sprite più grande che ho usato. Ma non riesco a capire come farlo in Phaser, se possibile.

Quindi ho cercato di caricare l'immagine come un foglio di calcolo, ma sembra che i fogli di calcolo siano utilizzati solo per l'animazione e non è possibile visualizzare un particolare "riquadro" del foglio di calcolo (per favore, correggimi se sbaglio).

Penso che ciò che devo fare sia caricare l'immagine come tilemap, tuttavia l'immagine particolare che sto usando non è venuta con un file json che specifica il layout (né potrei trovarne uno che lo abbia fatto). Essendo nuovo a JavaScript, ho problemi a leggere il codice sorgente Phaser per vedere come formattare il file json.

Quindi, in sintesi, qual è il modo migliore per visualizzare una singola carta di un foglio di carte da gioco in Phaser dato che non ho un file json che specifica i dati della mappa?

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

Gli Spritesheets non si limitano alle animazioni, è solo un modo per usarle. Un'animazione è solo un modo per visualizzare frame diversi in momenti diversi. Impostando manualmente il frame di uno sprite, è possibile visualizzare una parte specifica del foglio di calcolo.

Phaser supporta due tipi di fogli sprite: quelli "classici", in cui ogni fotogramma ha le stesse dimensioni esatte, e gli "atlanti texture" creati con l'aiuto di un'app di terze parti come Texture Packer, Shoebox o Flash CC e arrivano con un file json associato.

Carichi quelli "classici" con i game.load.spritesheetquali devi specificare la larghezza e l'altezza dei telai e, facoltativamente, la quantità, ovvero:

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

Per caricare un atlante texture è possibile utilizzare game.load.atlas. Troverai molti esempi di questo nel repository Esempi Phaser.

Una volta caricato crea il tuo sprite:

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

Questo dice a Phaser di usare l'immagine con il tasto spriteSheetKeycome trama. Di default passerà al fotogramma 0 del foglio sprite, ma puoi cambiarlo con sprite.framequalsiasi altro numero valido.

Se lo sprite utilizzava un atlante delle trame è più semplice cambiare il fotogramma in base al nome del fotogramma: sprite.frameName = 'card4'dove il nome del fotogramma è esattamente come specificato nel file json dell'atlante delle trame (aprilo e guardalo per vedere!).