Displaying a particular sprite from spritesheet using Phaser

Question

I am trying to make a card game using Phaser, the HTML5 JS framework. Because I'm a terrible artist and can't design my own, I'm using a free spritesheet of playing card images I found online. The problem is, I can't seem to figure out how to display individual cards using Phaser.

In the previous framework I used, I was able to create individual smaller sprites from the larger sprite sheet that I used. But I can't figure out how to do that in Phaser, if it's possible at all.

So I looked into loading the image as a spritesheet, but it seems that spritesheets are used for animation only and you can't really display a particular 'frame' of the spritesheet (please correct me if I'm wrong).

I think what I need to do is load the image as a tilemap, however, the particular image that I'm using did not come with a json file specifying the layout (nor could I find one that did). Being new to javascript I'm having trouble reading the Phaser source code to see how the json file should be formatted.

So in summary, what's the best way to display an individual card of a spritesheet of playing cards in Phaser given that I don't have a json file specifying the map data?

Answer 1

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

Spritesheets aren't limited to animations, that's just one way to use them. An animation is just a way to display different frames at different times. By manually setting the frame of a sprite, you can display a specific part of the spritesheet.

Answer 2

Phaser has support for two types of sprite sheet: "classic" ones, where every frame is the exact same size, and "texture atlases" which are created with the help of a third party app like Texture Packer, Shoebox or Flash CC and come with an associated json file.

You load the "classic" ones with game.load.spritesheet where you must specify the width and height of the frames, and optionally the quantity, i.e.:

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

To load a texture atlas you can use game.load.atlas. You'll find plenty of examples of this in the Phaser Examples repo.

Once loaded create your sprite:

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

This tells Phaser to use the image with the key spriteSheetKey as its texture. By default it will jump to frame 0 of the sprite sheet, but you can change it with sprite.frame to any other valid number.

If the sprite was using a texture atlas it's easier to change frame based on the frame name: sprite.frameName = 'card4' where the frame name is exactly as specified in the texture atlas json file (open it up and look at it to see!).