Jump to content

Photoshop as Game Editor

Recommended Posts

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. 


Link to post
Share on other sites

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.

Link to post
Share on other sites

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. 



Link to post
Share on other sites

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 :lol:

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...