Anzeigen eines bestimmten Sprites aus einem Spritesheet mit Phaser

Ich versuche ein Kartenspiel mit Phaser, dem HTML5 JS Framework, zu erstellen. Da ich ein schrecklicher Künstler bin und keine eigenen entwerfen kann, verwende ich ein kostenloses Spritesheet mit Spielkartenbildern, die ich online gefunden habe. Das Problem ist, ich kann anscheinend nicht herausfinden, wie einzelne Karten mit Phaser angezeigt werden.

Im vorherigen Framework, das ich verwendet habe, konnte ich aus dem größeren Sprite-Blatt, das ich verwendet habe, einzelne kleinere Sprites erstellen. Aber ich kann nicht herausfinden, wie das in Phaser geht, wenn es überhaupt möglich ist.

Ich habe mir überlegt, das Bild als Spritesheet zu laden, aber es scheint, dass Spritesheets nur für Animationen verwendet werden und Sie einen bestimmten "Frame" des Spritesheets nicht wirklich anzeigen können (bitte korrigieren Sie mich, wenn ich falsch liege).

Ich denke, ich muss das Bild als Tilemap laden, aber das bestimmte Bild, das ich verwende, wurde nicht mit einer JSON-Datei geliefert, die das Layout angibt (und ich konnte auch keine finden, die dies tat). Da ich neu in Javascript bin, habe ich Probleme beim Lesen des Phaser-Quellcodes, um zu sehen, wie die JSON-Datei formatiert werden sollte.

Was ist also der beste Weg, um eine einzelne Karte eines Spritesheets mit Spielkarten in Phaser anzuzeigen, da ich keine JSON-Datei habe, in der die Kartendaten angegeben sind?

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

Spritesheets sind nicht auf Animationen beschränkt, sondern nur eine Möglichkeit, sie zu verwenden. Eine Animation ist nur eine Möglichkeit, verschiedene Frames zu unterschiedlichen Zeiten anzuzeigen. Durch manuelles Festlegen des Rahmens eines Sprites können Sie einen bestimmten Teil des Spritesheets anzeigen.

Phaser unterstützt zwei Arten von Sprite-Sheets: "klassische", bei denen jeder Frame genau die gleiche Größe hat, und "Texturatlanten", die mit Hilfe einer Drittanbieter-App wie Texture Packer, Shoebox oder Flash CC erstellt werden mit einer zugehörigen JSON-Datei.

Sie laden die "klassischen" mit, game.load.spritesheetwo Sie die Breite und Höhe der Rahmen und optional die Menge angeben müssen, dh:

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

Zum Laden eines Texturatlas können Sie verwenden game.load.atlas . Viele Beispiele hierfür finden Sie im Phaser Examples Repo.

Nach dem Laden erstellen Sie Ihr Sprite:

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

Dies weist Phaser an, das Bild mit dem Schlüssel spriteSheetKeyals Textur zu verwenden. Standardmäßig springt es zu Frame 0 des Sprite-Blatts, aber Sie können es mit ändernsprite.frame einer anderen gültigen Nummer .

Wenn das Sprite einen Texturatlas verwendet hat, ist es einfacher, den Frame basierend auf dem Frame-Namen zu ändern: sprite.frameName = 'card4'wobei der Frame-Name genau den Angaben in der json-Datei des Texturatlas entspricht (öffnen Sie ihn und sehen Sie ihn sich an!).