Phaser for Beginners

Creating tile graphics using a sprite sheet

We are going to create a board with 4 rows and 5 columns, for a total of 20 tiles on the stage. Since each tile has a symbol on it, and since each symbol is placed twice on the board, we have to draw 20/2 = 10 images to represent the 10 different tiles, and one image to represent the back of each tile, for a grand total of 11 images. At this time, we can save the 11 images in eleven distinct files or group them all into a sprite sheet.

A sprite sheet is a series of images combined into a larger image. Usually the images are frames of an animation, thus a single image inside a sprite sheet is called frame.

Why using a sprite sheet?

Basically, every game is made by various graphical objects. In a space shooter you will find images representing spaceships, bullets and explosions, while in our Concentration game there will be different tiles. It does not matter the subject of the images. What we know is we are using all of them. Each image has a width and a height, which represent the amount of pixels building such image, and each pixel requires some memory to hold its color information.

For each image – and more generally for each file – saved anywhere, there is a certain amount of memory that is wasted due to a series of features regarding the way the file system handles the files. Explaining this concept goes beyond the scope of this article, just keep in mind the more files you have, the bigger the amount of memory wasted. It’s not a problem when you are dealing with a dozen files, but in complex games with a lot of images, packing them into bigger images can save quite an amount of resources. Moreover simply storing images is not enough. We also have to place them on the screen.

No matter the graphic engine your device will be using to display images, there will be a process which must know which image to paint, get the image from the place where it’s stored, then know which part of the image to paint – normally the entire image – and where to paint it, and finally place it on the screen. Once the first image has been placed on the screen, this process needs to be repeated for each other image, and the game stops until all images have been placed.

Normally you don’t notice it because it happens – or at least it should happen – in 1/60 second, but a lot of images to be placed on the screen of a slow device can slow down performance. Using a sprite sheet, you will have all – or most of – your graphic assets placed into a big image, inside an invisible grid, in order to avoid the “what image should I load” question and speed up the drawing process.

Following this concept, we are going to use one single image with all tile graphics. Here is the one I made:

It’s a 6×2 grid where each tile is stored in a 80×80 pixels cell. Now I am saving the image as tiles.png in the same folder where the entire project is located.

This is how your project folder should look like now:

Always save images as PNG as this format has the advantages of being lossless (it does not lose quality when saved) and support alpha channel (transparency).

Now that we have the sprite sheet with all our game tiles, it’s time to build the
game itself.

Next Tutorial →

Preloading images

← Previous Tutorial

Understanding Phaser states