smithmw7

Photoshop to Phaser Script - Automated UI Pipeline

Recommended Posts

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.