2D Isometric Creature Animation


First of all, and not the simplest part of the process, we must decide what we want to create. In this case I decided to create a crab. You can always take a picture or two of the animal your choice if it exist or if doesn't exist you have to imagine what it would look like and how you will do it. Remember that your final picture is not very big ... so do not create too much detail or an animal too small. For example if I create an ant and I produce it in it's true scale, I will never notice it on the screen ! The final picture must fit the scale of all other objects. (Link to Uta's 2D art tutorial removed: website/media/2d/documentation/.)

After this process I start modeling my creature. At the beginning it will be static and without textures.

Big Crab - 335K AVI Movie

This could take a while if your creature is complex. In my case it's not too hard because most body parts are just cones and spheres. The body was created by a swept polygon.

The 3rd step is apply textures to your mesh. This could be a very important step in a big picture but in our case the final output is so small that it is better to use very simple textures/bump maps. As this was really a simple creature, I have only created a bump map that I used for all the crab with the exception of the eyes.

Bump map

The darker parts of the picture will be interpreted as lower areas on my surface and the lighter parts as the high areas.


Results of the bump map

The bump map produces more varied and "real" looking surfaces on the creature :-)

Before Texturing

After Texturing

Now we have a full textured creature but it's still without animation. With my software I can employ a bone structure inside a mesh to move it quite easily, epending on the movement I want to accomplish. In the case of the crab is not hard at all. Just need patience ! So far so good... I create the bone structure with the appropriate joints on top on my mesh. The bones are shown in green, joints in yellow while the meshes are in white.

Crab's bones

Blue lines in the center of the crab are the nail. This is the central point of my mesh. The point that doesn't move. And finally (before rendering it) we have to animate the creature. With the bones glued to my mesh I only need to move the legs and keyframe (save) this position in a determined time. I create my animation in order to produce the PNG files directly so every frame of my animation will produce a different output file with a different leg position. In simpler words if I need to create 10 pictures for a direction I use 10 frames for my animation. Generally you will need 12-30 frames / sec to create an animation but in our case it's the client that will display the anim with the correct frame rate. Remember that an animation must be a loop. So after the last frame, the first frame will be displayed again.

6 frames of the animation

Now for the final part: Rendering the creature from 8 different points of view. You have to produce 10 PNG files (with alpha channel) for each point of view, yet this is not so complicated. First setup a camera with the zoom put at his maximum (we have to produce an isometric view and maybe your renderer can do that, but not mine. So this is a workaround) and a plane. The camera must render the plane to produce more or less a picture like that:

The isometric template

When the result is OK I glued the plane with my camera to have the center of the rotation of the camera in middle of my square. I setup my lights. 1 MUST be from the right part of the picture and I add a second one less intense. Just to see the 2 sides of my mesh. Finally, I load my crab on the template and toggle invisible the square. Rendering the animation directly in 10 separate files is one option of my renderer but you may produce an AVI (or whatever) and extract the files later with some tools. To produce a different point of view I just rotate my grouped square-camera by 45 deg. and render the anim again. Remember the scale of the isometric view ! In my case, the crab is a giant crab so it can be bigger than the real one.

Big Crab - 335K AVI Movie

Scaled Crab - 100K AVI Movie

Two last things to remember: the background of your creature must be black, and you have to follow a "naming convention". This is the name of a part of my crab anim:


Walking can be different actions, like running, jumping, ..., E is the direction he's walking, the number is the frame number (from 1 to 10) and AB are the first letters of my name (Alain Bertrand)

That's all folks ! Now it's your turn to create amazing creatures for our games!