How to add an Image to Phaser

How to add an image to Phaser

Download Source Code

One of the first things you need to do when making a game is to add an image, and this video will show you how to add an image to phaser.

Here is the text of the video.

So this video will show you how to add an image to phaser and I’m going to be using the snippets at

and you can also get the template there which I’m gonna be using a starter code or you can watch my other video on how to set that up

so here are the two snippets that we are going to be using. Insert image into library and add image to stage

once you get the template you just copy it to make a new project

and then given name of the project in this case others call it ADD IMAGE

I’m going to take the HP logo image there and make a folder inside of the project folder
called image paste the image inside and then grab this path so you can set it up in your editor.

I’m using brackets but you can use whatever you like

and well, there’s the folder right there. I’ll just click it

so I’ve got the project set up in the editor and state Main is the file I want to edit and inside there you’ll find three functions. The preload the create , and the update.
the preload I like to think of as a library that’s where we set everything up to be able to be loaded later and the create function as a setup to position things and create things,
as the name implies, and the update is a constantly running loop

now let’s preload the image into our library that is that first snippet there that simply says GAME LOAD IMAGE and it takes two parameters a library key and a path to the image
we’ll set the library key a logo and the path is image I meant to put images earlier but I called the folder image so I’ll just go with it image hp – logo.png

And that’s all you have to do to load it into the library

to add it to the stage we simply take the second snippet


and you can say game add image but most of the time I use sprite because it-There’s a lot more in the sprite for game play but more about that later

I’m just going to set it up at the top at 0,0
and I give the library key logo

and that’s all you have to do to add that to the stage. Let’s take a look at it. I’ve set it up in a local running server


Now let me show you a little bit about positioning

I can simply set the XY, phaser gives this is neat little thing to be able to center anything

saying this logo.x=game world.centerX

and that will put it right in the middle of your stage

and I’ll just set the Y down a little bit from the top to 100 pixels

let’s have a look at that! Now as you see it’s not exactly centered. The edge is center that’s because the registration point where the anchor is up to the top corner and we wanted in the center we want the X and Y, in other words to apply to the center not the top left
so we simply say this logo. anchor.set

How to add an image to Phaser

and it’s a value between zero and one, so half would be 0.5

and if we set the anchor to that then it’ll be a centered image

There! that it’s in the center of the screen. It’s 100 pixels down. The center is, so let me move it down just a little bit more to make it look nicer

logo.y = 200

and there we set an image inside a phaser I hope you found this helpful thank you very much for watching!

And that is How to add an image to Phaser. Thanks! William