Getting started with TexturePacker and Phaser

This overview shows you how to create your first sprite sheet and import it into your Phaser project.

These simple steps will cost you less than 5 minutes - but make your development much easier. Promised!

twitter image ricardo quesada @ricardoquesada

Texture Packer is an essential part of our daily workflow.
Every bit of GPU memory helps when dealing with mobile html5 games, so intelligent packing of assets is a must.
And Texture Packer has all the features we need to effortlessly create atlases for our games

Open TexturePacker, select Phaser (JSONArray or JSONHash) as framework.

Which one you choose does not really matter...
In case you are uncertain: Toss a coin ;-)

TexturePacker: Select Phaser as framework

Add sprites ...

Drag & drop sprites
onto TexturePacker.

... or folders

TexturePacker adds
all sprites inside the folder
and updates the texture
when the content changes.

Add Sprites to TexturePacker

Set output files

Make sure to set the output path of
your data and texture file inside the Contents
folder of your Phaser project
and the class file within your app's source tree.

Set the output path for your files

Click Publish sprite sheet
to write the sprite sheet to your Phaser project

TexturePacker: Click Publish sprite sheet


Setup a basic scene
This boilerplate code gives you a minimalistic game scene

window.onload = function() {

    var game = new Phaser.Game(800, 400, Phaser.AUTO, '', {
        preload: preload,
        create: create

    function preload () {

    function create () {


Loading the sprite sheet
Load your JSON Array sprite sheet inside preload().

function preload () {

For JSON Hash format use this code

function preload () {


Create sprites
Create sprites using the sprite sheet and the sprite name from the sheet

function create () {
    sprite = game.add.sprite(100, 180, 'sheetname', 'spritename');

Do you want to read more?

Head over to our Phaser tutorials section.

Do you have any feedback or questions?