Live Texture Updater Plugin for Photoshop CC
In this blog post and video I want to show off how a custom plugin called, Live Texture Updater, lets you have more control of where the outputted images are from the PSD file as well as implementing WebSockets for update notification (no polling of images).
For example the default Image Assets plugin that I modified pushed all assets into a folder with the name of the PSD file + “-assets”. Also layers could not have certain characters like “/” in them. What I did was extend the plugin to allow the designer to set where to output the assets by looking for a top most empty layer with the name of “root=./” where the path could be relative or full path. This root path is then used instead of the PSD filename + “-assets”.
The other feature I added was the ability to add folders in the layer or group names that you are exporting. So you could have “images/enemy/ship1.png” and “images/ui/panel.png” in the same PSD and they would be put in the root + layer/group name folder. This new layer/group name is also what is sent through the WebSocket logic to the client to tell it what has changed to make the live texture update.
I used Pixi.js in the example below but the plugin just send generic image filename data over WebSockets and could easily be used in other frameworks that want to have live texture updating. There is a HTML5 game framework called Phaser that uses Pixi.js so you could use the example code below to do live design of your textures in your Phaser games.
What do you need?
How to Use
- Grab the code off https://github.com/renaun/WorkflowExamples
- Copy the live-texture-updater folder into your /Applications/Adobe Photoshop CC/Plugins/Generator folder (create the Generator folder if it does not exist).
- Restart Adobe Photoshop CC if it was open.
- Open up the GameAssets.psd in the PhotoshopCCGeneratorPixiJS folder.
- Go to File -> Generate and make sure the Live Texture Updater plugin is checked.
- Create a webserver (I use httpster) on the PhotoshopCCGeneratorPixiJS folder and run index.html page.
- Now make changes to the layers or group in the GameAssets.psd and watch the texture update in real time.
Here is a video showing off the plugin and Pixi.js app running on the desktop:
Here is a video showing off the plugin and Pixi.js app running on the a mobile device: