Generate Phaser spritesheet from PSD layers using psdparse + TexturePacker

Recently I came across Phaser and wanted to try making a simple game to learn the game engine. One of the main components of a game is the SpriteSheet. There are a lot of tools out there to do this. I found TexturePacker nice and simple.

We will now generate a Spritesheet of playing cards (just the spades as a sample) from a Photoshop file with layers.

1. Prepare the PSD

First make sure the layers are properly organised and you have trimmed unwanted extra spaces.

If your layer has multiple groups (folders) that belong together (eg. 5 spades has 4 layers within the group), convert the group to a Smart Object.

Great! Now the PSD is ready.

2. Export PSD layers to PNG files using psdparse

Download psdparse for your platform and open the terminal.

Let’s quickly check the help document for psdparse.

We want to export our PSD layers to PNG images. So we are going to use the “-w” option.

It’s done. Verify if the files generated are correct.

3. Add the PNG files to TexturePacker

Download and install TexturePacker for your platform.

Drag the PNG files that we generated using psdparse on the left pane on TexturePacker.

4. Export Spritesheet (in Phaser JSON hash format)

Now, click on Framework under Output Files in the right pane to choose the output format. Choose Phaser (JSONHash).

Finally click on Publish sprite sheet to complete the process. (You will be asked for destination folder)

A quick look at the files generated:

A PNG file and a JSON file are generated

5. Using in Phaser

Now, let’s use the Spritesheet in Phaser. Add the PNG and JSON files to your assets and load it like this:

That’s it. Enjoy building your game :)