Photoshop as game editor
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.
Most of the time to get Artwork into your game your workflow looks like this:
- Create Design / Assets in Photoshop
- Export each asset as single Image
- Generate Texture Atlases from the Images
- Use seperate Editor or config file to add properties to Assets, or generate stuff like HUD, Gui etc. with them
- Load them into the engine and use them
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.
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.
- A JSON-File is generated containing meta data of each exported Layer. We also save meta data of each Layer that starts with an exclamation mark. (This is how the JSON looks in our mobile game Demon Drop).
This is how the corresponding PSD-File looks:
- If you add .font to a text-layer a Bitmap-Font and a correspoding XML-File is generated automatically.
- If you add an asteriks sign to a group, all containing images that are marked for export are cropped relativly to the biggest image (required for sprite sheet animation where each frame has a different size).
- We've included Texture-Packer into the plugin, so everytime we change something a new texture atlas is created or updated.
- With some directives inside the PSD we can control the generator script. For example the filenames and paths of the generated files etc. Or if we want to have anti aliasing enabled for the Bitmap Font Generator.
- Every layer that contains a Equal-sign will exported as key-value pair into the JSON-File. So you can add custom properties to the JSON-File for various stuff.
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:
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.
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.
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.