Creating UI Atlases in Photoshop Automagically

A little over a year ago I was working on a game engine for a successful toy company. The project never ended up being finished (long, nasty story which I’ll happily tell over beers), but one of the interesting things I did for this project was build a Photoshop-to-Unity automatic UI workflow. The basic idea was:

  1. Create UI layout in Photoshop, with one “root level” layer or layer group corresponding to a control.
  2. Name the groups according to a fairly complicated naming convention (which encapsulated both behavior and functionality, e.g. how a button might change its appearance when hovered or clicked and what clicking it would do).
  3. Press a button.
  4. Select a target folder (which could be inside a Unity project’s “Resources” folder, of course).
  5. And point a script at the folder.

This worked amazingly well and allowed me to adjust to changing client requirements (e.g. random UI redesigns) very rapidly. But along the way I decided there were significant design issues with the concept, one of them being that the images needed to be texture-atlases (b) for performance reasons, but more importantly (a) because you needed to adjust import settings for each image (you can’t even select multiple images and change their import settings all at once — maybe this is fixed in Unity 4).

Another obvious problem was the embedding of behavior in names — it was convenient if you got it right the first time, but a serious pain in the ass for iterative development (either change the name in Photoshop and re-export everything or change the name in Photoshop and then edit the metadata file, and… yuck).

Anyway, I’ve had the “perfect” successor bouncing around in my head for a while and then the other day it struck me that someone probably has written a Photoshop image atlas tool already, and I might be able to rip that off and integrate it with my script.

Turns out that (a) someone has written an image atlas tool for Photoshop and (b) that the key component of that tool was a rectangle packer someone else (sadly the link is defunct) had written, implementing an algorithm documented here.

So that’s what I spent New Year’s Eve doing, and the result — Layer Group Atlas — is now availble on github.

Screen Shot 2013-01-01 at 7.00.46 PM

For the more visually-minded, you start with a UI design in Photoshop. (Stuff can overlap, you can have multiple states set up for controls, etc.) The key thing is each “root level” group/layer corresponds to an image in the final atlas (and yes, transparency/alpha will be supported, if a group/layer’s name starts with a period then it is ignored (as per UNIX “invisible files”) while a group/layer with an underscore will only have its metadata exported.

Screen Shot 2013-01-01 at 7.02.47 PM

For every layer (other than those which were ignored) metadata about the layer is stored in a JSON file. (One of the reasons I didn’t take this approach with my original tool was the lack of solid JSON support in Unity. I — cough — addressed that with another little project over the holiday break.) The JSON data is intended to be sufficient to rebuild the original Photoshop layout from the atlas, so it includes both the information as to where each element is in the atlas, but where it was in the original layout.

Screen Shot 2013-01-01 at 7.01.36 PM

Finally, the script creates and saves the atlas itself (as a PNG file, of course).

Aside from the CSS sprite support I mention in the comments in a TODO — an obvious thing for this tool to be able to do would be to export a bunch of CSS styles allowing the images in the atlas to be used as CSS sprites — there’s one more missing thing: a Unity UI library that consumes the JSON/atlas combination and produces a UI.

That’s my project for tonight.

  • Excellent Tonio, just what the doctor ordered 🙂 I just missed being able to export nested groups, most artists use it. I saw a guy doing that with a similar project but I’m not experienced enough to adjust your code to support it. Maybe you’d like to check it out? https://github.com/flyover/psd2scml/blob/master/psd2scml.jsx

  • It would be pretty easy to adapt the script to handle layer groups (indeed it struck me this would be a nice way to handle control states). The script you linked is lacking docs so i’m not clear on exactly what it does.

  • I just posted a new script to the github repo to support Texture Packer’s JSON format (which should allow Unity devs, such as myself, using UIToolkit or NGUI to export packed images direct from Photoshop). I haven’t had time to play around with either toolchain yet myself, but I think it’s probably a more efficient use of my time to learn NGUI or UIToolkit (and C#) rather than write yet another half-assed UI library from scratch (which was my original plan).

  • Pingback: Photoshop Alternatives: Acorn 4, Pixelmator 2, Photoline 17.5 | inconsequence()