Photoshop as game editor

Most of the time to get Artwork into your game your workflow looks like this:

This process may vary from project to project, and you probably have some scripts to automate some of the steps involved. As this is a highly iterative process you have to walk through this steps many, many times each day. And it's very time consuming.

Using the Assets-Plugin for Photoshop Generator you have a great tool at hand so you don't have to export each image manually by naming your layers.

For example by adding .png at the end of the layername, the current layer (or group with all its contents) gets flattend, rasterized, cropped and saved automatically. You can also resize or output multiple files dynamically by using a special syntax (You can read about the func specs here).

What's cool about it, is that the files are generated on the fly, not only when you explicitly save your document, but each time you change anything. More about this later and why this is important.

So what to do with it?

We've extended this Plugin with a few additonal features.

In our game we can load in the JSON file with all assets with a single function. Not only we're ready to use them, but we can also add properties/behvaiour to them based on the meta data in the json file.

So with this very simple system we have a lot of power at our hands. Here are a few examples:

GUI Editor    
We use this system for all our GUIs and HUDs in our game. We simple load in the json, create a scene/elements out of it and attach functionality to things. This has the advantage that if an artist updates the layout or adds new elements to it, we have it in our game automatically without doing anything. We can start to add funtionality to it immediately.

In the past we used own or third party GUI-Editors (for example Cocos-Studio, Cocos-Builder, Custom-Tools). They are great, but the problem is that most of the time when you need a new Button or want to change something, you first change it in Photoshop, then you have to rebuild it in the GUI-Editor to use it in the game. This is a very annoying experience, so we wanted to simplify this process.

First we specify some rules (they can vary from project to project): For example a Button should be inside a group where the name starts with "BTN" and contains 3 images for default, hover, pressed. The Loader then automatically creates a Button out of it for you and we can add an OnClick-Event-Handler to it. You can do all kinds of GUI Elements you require, and with smart objects you can also reuse them easily. You can also easily do dynamic resizing if you throw 9-Slice Scaling into it.

The disadvantage is that the you have to force yourself to the naming conventions, while in a external tool those things are handled through a nice GUI. So you should keep things as simple and possible and you shouldn't make the mistake to abuse this system or going crazy by adding business logic to it.

Live Assets Updates

To fasten up this process even more, we've added a File-Watcher to our client (only Debug-Builds of course). It's only a few lines of code that watches the filesystem and if some files changed it will reload the assets in realtime without restarting / closing the client.

As Photoshop updates the files based on Change-Events and not on document save you can drag and drop layers around and the client will update positions, transform, textures etc in realtime.

This is especially helpful if you have placeholders in the PSD File that generate complex widgets at loading time. So, the artist can see the whole thing how it looks like in real time while working in the PSD-File.

We want to extend this feature in the future, so we put this stuff into an own simple file server where the client can connect himself to get noticed about changes. This will allow us also to update multiple devices at the same time. Imagine you change something in photoshop and the iPhone, Samsung Galaxy and iPad that lays next to you around your desktop are automatically updating itself - so you have a very nice preview of how your assets look like on the final devices.

   
An example of the live update in Action.

Sprite Editor    
It's very nice to have all sprites of a level or even game in one document and having the game assets updated automatically whenever you change something in the source PSD. We've added antoher rule here, whenever you enumerate your layers (like player1.gif, player2.gif, player3.gif) the sprites are exported as animation. So now we can update animations, add or remove frames dynamically without changing the code that plays it, which is very nice.

   
This is the Sprites-PSD Document of our current game Tiny Thor.

Level Editor    
We haven't used Photoshop as Level-Editor yet, because mostly we've used external Tools like Tiledmap or custom level Editors in our past productions. But for some games this could work out very well. Remember that Photoshop also contains a great Path-Tool, so it is easy to output Vector-Paths, for example as collision information.