Live Texture Updater Plugin for Photoshop CC

Photoshop CC has a new Node.js based feature called Adobe Generator for Photoshop CC. What this means for developers is they can build plugins with Node.js libraries and JavaScript. I showed off how to do live texture updating of a three.js app using the standard Image Assets Adobe Generator for Photoshop CC plugin here.

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.