Turning 3D characters into Sprite Art

For an indie developer on a budget going 2D is a big time-saver. It’s generally much faster to draw and colour a prop or background asset then it is to model one. If you’re only viewing your game from one point-of-view then this is a great way to go.

But what about animated characters? Side-scrollers and simple top-down style games can probably go with the hand-drawn approach, but the isometric view is going to be much harder. For every angle you want to view a character from you’ll need to redraw all of the animation frames!

Luckily you can have the best of both worlds. You can draw/paint your backgrounds/props and then render 3D animated characters down to a sprite animations. This is the tactic that @SuperGiantGames used for Bastion and Transistor.

I was intrigued with this idea so I spent a few days prototyping a process for doing this for my own projects. You can checkout the demo on my Dropbox:

sprite-style

The code, sample MODO scene and packing script are all available on GitHub.

These are the technologies I used at a glance:

• MODO (really any 3D modelling/animation package would work)
• ImageMagick Command Line Tools
• TexturePacker

To get something working quickly I used the Bolo character from the MODO ACS kit as a sample animated character. Firstly, I setup a bunch of cameras to render him from 36 different angles:

In theory you could accomplish this with a script. But I figured I’d only need to do this the one time. I positioned a single camera above the character looking downwards by 30 degrees. I nested this item under a locator that I positioned at the origin. Rotating this locator around the Y-axis has the effect of rotating it’s child camera around the origin.

I created the rest by duplicating each hierarchy and incrementing the rotation in 10 degrees. Finally, I created a root locator and nested all of the hierarchies under it which is handy for quickly re-positioning all of the cameras vertically or for zooming in and out.

Each camera is named with an angle about the unit circle. This is important because both the packing script and animation code expect this naming convention.

With the scene setup. It was time to render the animation from each camera angle. I accomplished this with the RenderAllCameras.pl script from @Ethereal3D. But first, I needed to configure the rendering properties in MODO:

• Render Outputs: Alpha and Diffuse Coefficient.
• Frame Dimensions: 512 x 512
• Unpremultiply Colors enabled (for transparent background).

With this all setup, rendering a single frame looks like this:

I found that rendering just the diffuse color was much faster than rendering the fully illuminated model. Also, the fully lit render had a kind of Diablo-esque feel, whereas I was aiming for simple block colors.

Half an hour later MODO had finished rendering out 1296 (36 x 36) frames and now I needed a way to shrink (pixelate) each frame and pack it into a sprite-sheet. This would be tedius to do by hand so I wrote a Ruby script to do it (view it here on GitHub). Each animation cycle is packed into a spritesheet and corresponding JSON file:

bolo-walk-180.json bolo-walk-180.png

Finally, armed with a bunch of packed sprite sheets in my assets directory it was time to hack together a prototype using ClojureScript and Pixi.JS. You can peruse all of the code on the GitHub repository. But this a snippet of the code that drives the animated sprite: