Phaser for Beginners

Displaying given frames in a sprite sheet

Before we start typing some new code, here is how sprite sheet works: each image is identified by a number, called index, which starts from zero. So starting from the upper left image and proceeding left to right, top to bottom, each image is given an index. The first image has index “zero”, the second image has index “one” and so on, the third has index “two” and so on. If you look at the sprite sheet, the question mark is the 11 th image, and it means we have to show the 10 th frame of the sprite sheet.

frame property of an image object allows us to show the frame we want.

With just a small change to placeTiles function:

We are able to turn all tiles covered with frame property, but first we have to assign the image a variable, here called tile. Launch the game and see what happens:

Tiles now show the question mark, and are ready to be turned to show their actual symbol. Now it’s time to let the player interact with the game.

Download Source

File: displaying-given-frames-in-a-sprite-sheet.zip


Next Tutorial →

Turning tile into clickable buttons

← Previous Tutorial

Adjusting assets placement

Leave a Reply

Your email address will not be published. Required fields are marked *