How to load a sprite sheet into phaser
I’m going to show you a bit about how to load a
sprite sheet into phaser.
I’m going to use somes snippets here and you can just type them out if you like or you can
go to WilliamClarkson.net/phaser-snippets
It is under the toolbox menu item here and I’m going use sprite snippets today.
It has everything you need to be able to load a sprite sheet into phaser except for the spritesheet, and I’m going make a simple sprite sheet here
just to show you how it’s done canvas is 220 by 220 and I’m going to make some squares that are
hundreds pixels high and wide and let’s set that at 0,0
and then I’m just a copy this square four times to
change different colors so you can see how we
are changing the spritesheet.
put x at 110 so the 100 pixels and 10 pixels of padding,
and I’ll put the Y of the 2nd set of squares at 110,
as well so they’re all 110 pixels apart and change that to green and yellow.
So that is a basic spritesheet.
so let me make a project folder for this so we can save the image. I’m going to copy a basic template
and you can find that at the website as well and there’s a link on the snippets page.
I’m going copy the basic template
give it a name called addSpritesheet
making an image folder insider here
and copy that path
so one I can save this image the spritesheet we just made and
just call it image1.png, now let me set our project folder here
you can use whatever editor you like, of course
so I am going to go to our addSpritesheet folder
Select that and now everything is setup with the basic template for us to start working in stateMain now let me show you how it is done with the snippets.
There is a preload spritesheet snippet just copy that text, push the button there.
It takes several key is the first one if you know to add an image to the library
then you simply change the reference name and we’ll just call it squares that should be fine and set the path.
we can just open that up here and grabbed path along here or you could just type the path out.
And then we need a width and a height and this
is the width height of the actual image plus the padding.
Without the padding it won’t
and only grab part of the next image
so that the image and the padding at 110
for both width and height then we have four cells
the number of cells can be optional most the time
phaser can figure it out on its own . I’ll go ahead
and set it though and the next is simply adding an image to stage
set an image to stage snippet right there
in the create function in take out that console.log
paste that in we can change the variable to squares
squares = game.sprite.add
There we need an X positon how far to the left and a Y position, how far from the top we will just 150 px and the library key which is squares.
that we set up there in the preload that should add it to the stage
I am using a local web server but you can either use web space or you can get your local webserver as I talk about in another video.
and there is the red square right there so it didnt’ load the whole image, just the one frame, which is exactly what we wanted
to change the frame we can simply say
it starts at 0 by default so if I put it at 0, it is
red, 1 blue, 2 green and 3 yellow
and that is all there is to know about How to load a sprite sheet into phaser!
theis some more information like making
animations with spritesheets and I will cover that
in another video. Thanks for watching, and I hope this was helpful to you.