From 3D to sprites
Ring Run Circus was 2D from day one, but we needed the characters to move from the inside to the outside of the rings. We worked on a handful of possible movements that would allow this, but the most clear one was to rotate along the axis of movement, as shown in the animated gif above.
The first approach was that Juanma (the artist) drew all the frames by hand, using a reference rendering of a 3D model to keep the rotation smooth and in place.
This worked somehow, but it was extremely time consuming, so we tried another approach.
As the size of the characters on the game screen is small and they move continuously, we could model them in 3D without too much detail, have Juanma paint them to preserve a consistent look, animate them using an armature, and then render them using as many frames and angles as needed. Below all these stages are described in detail.
Modelling
The first step was to model based on Juanma drawings from the side and front.
I had some experience modeling in 3D Studio Max, but Blender was completely new to me. After watching some tutorials I got a couple of techniques that worked pretty well for Blender and low-poly models.
For very round and human-like heads, I started with a subdivided cube which I spherized later, cut half of it out and enabled the mirror modifier. Then I started playing around, poking holes for the eyes, and extruded the ears. Below you can see the reference shape that you need to create to start sculping the actual head.
There is another technique that involves starting with the eyelids and extruding all the way around the head. The important nodes are marked in the following image by Ben Mathis. This technique is ideal for weird-shaped heads, like the ones we use in our game.
For the bodies I started with a basic prism, that I later subdivided leaving holes to extrude the limbs. Then it was just a matter of subdividing even more and pulling out, leaving multiple edges near the knee, elbow, waist, and all the other articulations, so the rigging works fine later.
For the hands I started with a prism that I subdivied to make holes to extrude thumb from one side, and the fingers (3 for our models) from the contiguous side.
During the whole process I had also enabled the subsurf modifier, that allowed me to preview the final smooth shape, while keeping the basic mesh poly count low. Check out the images below.
Rigging
Nothing much to say about the rigging. I used the typical armature and spent some time with the weight painting mode in Blender to make sure that the mesh moved in a natural way for the final rendering sizes we needed.
Some models also have bones in the fingers, but most don’t.
Painting
The painting had two stages. The first one was cloning the the drawing made by Juanma into the model texture. This gave a rough idea of the features in the drawing. The second stage was Juanma painting all the details on the mesh, in Blender.
It took some time to find out the perfect brush settings to give the desired rough appereance, and also paint in the shadows as we were not using any kind of lighting in the rendering step laer. The tools in Blender are great, but it’s still primitive compared with the layers in Photoshop. In any case, the results were amazing.
Animation
Animating in blender is an enjoyable process as it provides a lot of control. Our characters required three or four different animations (crash, jump, punch, etc.). The most common is the side animated loop. For those characters that we made a full body armature the animation was straightforward. For some models we only did partial armatures for the arms or legs, so we animated the armatures and also moved the mesh itself. I wish I’ve done full body armatures for all the characters. Below you can se an example of Nina’s side loop.
What’s interesting about the side loops is that, as the character rotates in 3D, we need one animation loop for each of the angles. Below you can see one of the intermediate angles.
As we need about 8 different angles we had to automate the camera movement for the rendering process. We also had to track the registration of the sprite while it moves from the inside to the outside of the ring, meaning that the feet, skates, bike, etc. should move over the ring and the whole body displacement should look realistic. To accomplish this we had the same equation in both, the game engine and the position of the Blender camera to render sprites.
We used Blender Drivers to enter an equation for the camera position proportional to the rotation of the character. Below you can see the equation and how the camera moves when Nina is rotated.
So each character has four different animations, some of them with about 8 camera angles, for a total of about 140 frames per character.
Rendering solid and outline
The last touch was rendering the each frame with a black outline, which gives the characters a cartoonish look. As we wanted all the characters to have the same outline thickness even if we rendered at different rendering sizes, we used the fantastic Node editor in Blender.
There’s a lot in this picture, so let’s walk you through each part. On the left you have two Render Layer nodes. These two render the solid and the outline rendering layers. The solid is post-processed with a kind of unsharp mask filter to make it look crisp. The outline is a little more complex because it actually renders the mesh edges, so it has a lot of noise inside the drawing. Because of this we added a few filters: a couple of color ramps to compress the colors, a blur in the middle to remove high frequency noise and a sharpen at the end to obtain a a clear outline. Below you can see the filters applied step by step.
Automating the process
As we had many characters and a lot of frames to render, we created a small script. Blender uses Python as a scripting language and allows you to manipulate everything from it (data in the scene, renderer, etc.). You can see the script below.
Conclusion
This project gave me the opportunity to learn Blender and I’m really glad for it. The first time I tried to use it, and coming from 3D Studio Max, I could not understand many of the paradigms. I had to unlearn a lot of bad habits before I started to appreciate it. The cursor was one of those things that I hated at first but once I got it, I can’t understand how I lived without it.
I highly recommend Blender to any indie games developer. It’s flexible, extensible, powerful and covers from 3D manipulation to 2D image processing.
