Affichage d'un sprite particulier à partir d'une feuille de sprites à l'aide de Phaser

J'essaie de faire un jeu de cartes en utilisant Phaser, le framework HTML5 JS. Parce que je suis un artiste terrible et que je ne peux pas concevoir le mien, j'utilise une feuille de calcul gratuite d'images de cartes à jouer que j'ai trouvées en ligne. Le problème est que je n'arrive pas à comprendre comment afficher des cartes individuelles à l'aide de Phaser.

Dans le cadre précédent que j'ai utilisé, j'ai pu créer des sprites individuels plus petits à partir de la feuille de sprite plus grande que j'ai utilisée. Mais je ne peux pas comprendre comment faire cela dans Phaser, si c'est possible.

J'ai donc cherché à charger l'image en tant que feuille de calcul, mais il semble que les feuilles de calcul soient utilisées uniquement pour l'animation et vous ne pouvez pas vraiment afficher un `` cadre '' particulier de la feuille de calcul (veuillez me corriger si je me trompe).

Je pense que ce que je dois faire est de charger l'image en tant que tilemap, cependant, l'image particulière que j'utilise n'est pas venue avec un fichier json spécifiant la mise en page (je n'ai pas pu en trouver un qui le faisait). Étant nouveau dans javascript, j'ai du mal à lire le code source de Phaser pour voir comment le fichier json doit être formaté.

Donc, en résumé, quelle est la meilleure façon d'afficher une carte individuelle d'une feuille de calcul de cartes à jouer dans Phaser étant donné que je n'ai pas de fichier json spécifiant les données de la carte?

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

Les feuilles de calcul ne se limitent pas aux animations, ce n'est qu'une façon de les utiliser. Une animation n'est qu'un moyen d'afficher différentes images à différents moments. En définissant manuellement le cadre d'un sprite, vous pouvez afficher une partie spécifique de la feuille de sprites.

Phaser prend en charge deux types de feuilles de sprite: les feuilles "classiques", où chaque cadre a exactement la même taille, et les "atlas de texture" qui sont créés à l'aide d'une application tierce comme Texture Packer, Shoebox ou Flash CC et viennent avec un fichier json associé.

Vous chargez les "classiques" avec game.load.spritesheetoù vous devez spécifier la largeur et la hauteur des cadres, et éventuellement la quantité, c'est-à-dire:

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

Pour charger un atlas de texture, vous pouvez utiliser game.load.atlas. Vous en trouverez de nombreux exemples dans le référentiel des exemples Phaser.

Une fois chargé, créez votre sprite:

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

Cela indique à Phaser d'utiliser l'image avec la clé spriteSheetKeycomme texture. Par défaut, il sautera à l'image 0 de la feuille de sprite, mais vous pouvez le changer avec sprite.framen'importe quel autre numéro valide.

Si le sprite utilisait un atlas de texture, il est plus facile de changer de cadre en fonction du nom du cadre: sprite.frameName = 'card4'où le nom du cadre est exactement comme spécifié dans le fichier json de l'atlas de texture (ouvrez-le et regardez-le pour voir!).