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. <\/p>\n

Step 1. Download the basic template<\/a><\/h3>\n

rename the template folder to your project name (like ImageTest for example) and open the folder with your favorite editor.<\/p>\n

Step 2. Add an image to the project<\/h3>\n

Make a folder inside the project and add any images you want to load inside<\/p>\n

<\/p>\n

Step 3. Load the image into the library.<\/h3>\n

Place this code inside the preload function inside the stateMain.js file<\/p>\n

game.load.image(\"monster\",\"images\/monster.png\");<\/pre>\n
The game.load.image<\/em> works like this:<\/p>\n
game.load.image(unique_key,path_to_image);<\/p>\n
Step 4. Place the image on the canvas<\/h3>\n
use the game.add.sprite<\/em> code inside the create function:<\/p>\n
game.add.sprite(100,200,\"monster\");<\/pre>\n
game.load.sprite works like this:<\/p>\n
game.add.sprite(x,y,unique_key);<\/p>\n
You can also copy and paste these from the snippets library<\/a><\/p>\n
Here is a video I made showing how to do this:<\/h5>\n