How to load a Sprite Sheet into Phaser

How to load a sprite sheet into phaser

Download the source files

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

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.

How to load a sprite sheet into phaser

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
in brackets.

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
work correctly

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.

Leave a Reply