Live Texture Updater Plugin for Photoshop CC

Posted on September 26, 2013 | 3 comments

Pixi.js with Live Texture UploaderPhotoshop 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.

What do you need?

Live Texture Updater Adobe Generator for Photoshop CC plugin
Adobe Photoshop CC
Sample Pixi.js Application

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:

  • Jakobud

    This is awesome. Excellent additions. I was wishing the other day that the default plugin worked with slashes (/) and would create subdirectories for you. Thanks!

  • Steve Krichten

    I followed your instructions, but the plugin never shows up in the photoshop generate menu. Restarted many times. I also ran npm install.

    Also, how do you go about developing generator plugins… as you make code changes, do you have to keep restarting photoshop?

    • renaun

      You wont need to restart photoshop each time, just the node plugin app.