This Is Why We Can't Have Nice Things......like friendly border guards.
Spriting WorkflowI've spent some time animating sprites now and thought to post the workflow I ended up with. The basic pipeline is to create/edit/animate the sprite frames and save/export them as individual numbered pngs. Then comes
TexturePacker to put all the frames in one sprite sheet which the game uses. I tried lots of different sprite animation programs. Everything was recommended by somebody but since I'm on a mac, I couldn't try Graphics Gale, which many say is the best.
PixenPixen is a native Mac app with all the bullet-pointed features. I animated the basic traveler idle, walk, and run anims in Pixen a few months ago. When I went back a few days ago to do the rest of the animations I quickly got frustrated. Biggest problem is the export process which requires too many clicks to save out the individual pngs. Although I remember Pixen having onion skinning, I couldn't find the toggle again and gave up before spending much effort on it.
ASEPRITEThis app is clunky as hell, especially on OSX. But after learning some shortcuts it got much easier and I made good progress in spite of the completely wonky mouse movement. The load/save process is really smooth and I created the traveler climb and guard walk+idle animations fairly quickly. The onion skinning is nice. Unfortunately, I started running into problems with the explosion. My initial test came out terrible; mostly due to the limited tools available.
PhotoshopRealizing I'd need something cushier for the explosion pixeling, I moved over to Photoshop. Best to make the drawing easier and deal with whatever painful export process there was afterwards. Photoshop's animation system is pretty nice and I felt completely at home with the tools and layers here. PS Extended has onion skinning but I ended up doing ok without it. For exporting, there's a built-in "Export Layers" script but it's absolute shit. Instead, I ended up saving for web to an animated gif, then extracting the frames using ImageMagick.
ImageMagickImageMagick is a set of command-line tools for editing images. The main tool is called "convert" and lets you do all kinds of cool stuff. I've been using ImageMagick more and more recently and it's really come in handy on this project. For example, to take an animated gif, replace the background color with transparency, and export the frames as 32-bit png:
convert -coalesce 'Boom.gif' -define png:format=png32 -channel rgba -fill none -draw "color 0,0 replace" border/Boom-%02d.png
Easy and fast.
Now that I've got the Photoshop workflow down, I'll probably stick with that for everything. In total, I spent around 6 hours yesterday on the explosion. I don't ever want to hand-pixel an explosion again. In-game, it's gone before you even notice it so I'm leaving it here for rubberneckage:
