Phaser for Beginners

Placing images on the stage

As the sprite sheet is now preloaded, change create function this way:

Now, run the game, and that’s what you are going to see:

The magic started! We finally have one image placed in the upper left corner of the stage. Which image? The first in our sprite sheet, counting from left to right, top to bottom.

add.image(x, y, key) places an image on the stage and wants as arguments the x coordinate of the image, in pixels, the y coordinate of the image, in pixels, and the key of the image used.

In our case an image is placed at coordinates (0, 0) which is the upper left corner, with tiles key, which you will remember is the key we assigned to our sprite sheet image when we preloaded it.

Download Source

File: placing-images-on-the-stage.zip


Next Tutorial →

Setting up the game field

← Previous Tutorial

Preloading images

Leave a Reply

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