How to add An Image In Phaser

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

One of the first things I am is asked by developers learning phaser is How to add an image in phaser. It is really easy, and a two-step process, loading the image into the library and then placing it on stage. I’ve stretched it out here to a 4 step process for the absolute beginner.

Step 1. Download the basic template

rename the template folder to your project name (like ImageTest for example) and open the folder with your favorite editor.

Step 2. Add an image to the project

Make a folder inside the project and add any images you want to load inside

Step 3. Load the image into the library.

Place this code inside the preload function inside the stateMain.js file

game.load.image("monster","images/monster.png");

The game.load.image works like this:

game.load.image(unique_key,path_to_image);

Step 4. Place the image on the canvas

use the game.add.sprite code inside the create function:

game.add.sprite(100,200,"monster");

game.load.sprite works like this:

game.add.sprite(x,y,unique_key);

You can also copy and paste these from the snippets library

Here is a video I made showing how to do this: