This is the sprite sheet, or “atlas”, of Frank, the hero of The Incident. Here’s my Photoshop setup:

Incident art layers

The ‘Nonsaveables’ layer group contains the background (with a repeating grid pattern) and labels identifying the frames. I turn this group off when saving the final PNG.

To preview animations, I drop the atlas into a little JavaScript/CSS player I built. I used to make animations in Photoshop, but it’s too slow a process.

The game contains dozens of these atlases. The biggest one includes all the falling items in one ginormous grid. There’s also an XML file which defines their positions, polygons, names, materials, etc.

Monday, June 7 2010

This is the sprite sheet, or “atlas”, of Frank, the hero of The Incident. Here’s my Photoshop setup: The ‘Nonsaveables’ layer group contains the background (with a repeating grid pattern) and labels identifying the frames. I turn this group off when saving the final PNG. To preview animations, I drop the atlas into a little JavaScript/CSS player I built. I used to make animations in Photoshop, but it’s too slow a process. The game contains dozens of these atlases. The biggest one includes all the falling items in one ginormous grid. There’s also an XML file which defines their positions, polygons, names, materials, etc.