Photoshop as Game Editor

[Jochen]

Hi my HTML5 Gamedev fellows.

A few months ago I started using a very interesting workflow / toolset in developing my games.

Basically I use a Photoshop Generator to automatically do magic things

• Automatically generates spritesheets of all sprites included in the PSD Document
• Automatically generate bitmap fonts of the fonts I use in the PSD Document
• Automatically generates a JSON-File with infos on each layer (Position, Size, Frames, State, Special Properties)
• Everything in realtime on the fly (without the need to save)

In my (custom engine) I can load the exported files and voilá everything is in the game and I can start adding functionality to it. I've used that in every game since then and I really love it. I've also implemented that the game can connect to Photoshop Generator (in Debug Mode) - so I can update assets and GUI stuff in RealTime. I also connect the Game to Tiled (but only via file watch so far) to update level geometry/design in real time.

I've put together a short video to show it to you:

 

Here is an in-depth article I wrote: Photoshop as a game editor.

Do you think this would be of interest to other devs. At the moment it only is compatible with my own engine, but I think it would be very easy to write loaders for HTML5 Frameworks/Engines. 

 

[gonzos]

yes, definitely it's great tool. I have something similar as you (without live editing) but I use Flash as "stage editor".

[alex_h]

Ha, same here, I've often used either photoshop with extendscript and flash with jsfl as tools to export level layouts to json. Having a live editing feature and atlas export tied in sounds pretty cool, although when I've tried atlas export from photoshop before it was quite slow compared to something like texturepacker.

[Jochen]

I'm actually using TexturePacker Command-Line directly to create the texture atlas. But you're right - if you work with big PSD files exporting is a little bit slow. This was the reason that I only save changes and not the whole document in each run.

[smithmw7]

This is a fantastic workflow, and could really work with any engine! I actually just posted about this only a few days ago and referenced your original article bellow. Are you planning on sharing your scripts? I didn't try using the TexturePacker command line, I assume that can auto build the atlas when image updates are detected. I used Gylph designer for my bitmap fonts and just pulled the ID name and position info from the text layers in the psd. Thanks for sharing and the inspiration, this is a lot faster then my old Photoshop to Flash with JSFL export method. 

 

 

[nazimboudeffa]

i am a fan of your games and the work you are doing in general

thx for sharing a part of you workflow it's really inspiring because i prefere to use the gimp instead in pixel mode

but i would be interest in the way you add objects in the tilemap to create new levels like the snake in the video and that it animates directly

[alex_h]

That photoshop generator stuff looks really useful actually! I've had to build a grunt powered asset pipeline before that could launch photoshop, export images, then run texturepacker etc, and getting grunt to communicate with photoshop was pretty troublesome. Looks like photoshop generator would make that process much more streamlined.

[alex_h]

One reason I tend to use flash for level layouts rather than photoshop is that it offers several ways of encoding metadata about onscreen elements as well as just transform data. For example your movieclip can contain both a bitmap and shapes that define hit areas. The base class can define which kind of element it is (eg platform / collectible / obstacle / etc) the classname can encode custom data (should this moving platform instance move left / right etc) and of course the instance name can be used too, for example to put items into a numeric sequence (eg respawn points).

I'm sure these are all things that could also be achieved somehow with photoshop, I'm just not sure they can be achieved in such a straightforward and foolproof way. Obviously you have layer names to play with, but I'm not sure there is much more than that.