How to add an image to Phaser
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 WilliamClarkson.net
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
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