Placing images on the stage

On Jul 11, 2017 11:05 am, by phaserjs

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

create: function() {
    game.add.image(0, 0, "tiles");
}

create: function() {

game.add.image(0, 0, "tiles");

}

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.