Photoshop to Phaser Script - Automated UI Pipeline

[smithmw7]

I have started work on Photoshop script that exports layer data to a JSON file that can be imported at runtime by Phaser to recreate the design using images from a sprite sheet. This is still work in progress as I will be cleaning this up and adding more features such as bitmap text support and animated spritesheets. Add separation from the design from the game code. No more manually placing images. Make changes in Photoshop and see them right away in the running game. Does anyone else have a similar tool or process for updating and placing their images in Phaser? I used to use Flash and a FSFL script, but this new setup skips the Flash import process. 

The pipeline I use is as follows:

1. Photoshop using Generator and PhotoshopPhaserExport.jsx

2. TexturePacker auto creates a spritesheet from the Generator created images using a smart folder (Watch your atlases sizes in real time!)

3. Phaser imports the single spritesheet and the data JSON file for all the states as one file and creates each state when it is loaded

4. I didn't add it to my demo, but I use live.js to auto refresh the game when any changes are made

5. I use VirtualHostX to test locally across multiple devices at once, combined with live.js, they all refresh automatically when the game is updated

Photoshop PSD Notes:

• Use Aa single Photoshop PSD for the whole game with a folder for each state, the name of the folder should match the state name in the code
• Any images that need to be exported as an image is a smart object with the extension .png , with Generator turned on in Photoshop, all those images will export in real time!
• Create additional instances of the smart objects can have a unique index as the extension instead of png so they share the same source image, for example blueBox.png, can have more instances named blueBox.1, blueBox.2 ect. 

The attached zip has a quick demo project, psd, and the Photoshop script that exports the JSON data. 

This concept is based on some of steps from this post bellow and is still very much work in progress. 

http://www.html5gamedevs.com/forum/14-phaser/?do=add

projectNameZip.zip

[samriggs]

Really great idea, I am just wondering if this can be ported over to gimp (my main program)

If I get some time (rare these days) Maybe I'll check to see if this is possible.

Sam