Our artists at TheoWorlds.com just finished creating a new set of characters for TheoAvatar chat – they can walk, sit and even dance. Each character’s animation is made from 32 frames with multiple matching layers of clothes. It took about 400 images to assemble each character.
In case you are planning to create your own The Office Space game or the next Habbo-like online community, here are some tips from our animators on drawing avatar characters in isometric view:
- If you are trying to draw realistic human avatars with high level of details, you’ll need to use references. There are two options here: 3D and photography. If you choose 3D, the easiest way is to use characters libraries from Poser. If you are more comfortable with photography, you can just capture your co-workers on the camera. Just make sure they know about it. We used the latest approach as it was more fun. Doing it in 3D would, probably, be faster.
After you resize down these reference pictures, you can draw on top of them, adjusting the details on the pixel level. - Use minimum number of frames to represent each animation. Try to keep your total files size small and also reduce the amount of work. To keep it as smooth as possible, make the differences between frames smaller. For example, if you draw the walking animation – try smaller steps and less arm swing.
- Animate the characters in Flash early. Don’t rely on animated GIFs. Moving the characters around in Flash will help you test the animation early on. You can do corrections while it’s not too late. It also helps you find the optimal animation speed.
- Draw symmetrical characters so you can “mirror” their animations of opposite directions. For example, our characters are moving in 8 directions, 3 of them being just “mirrored”.
- Less is more. If you are using multiple layers of clothes (for customizing the look) you will have to animate each of them to match the character’s animation. So more character animations you have – more clothes animation to create. It grows almost exponentially, so stand the temptation of creating a lot of “cool moves”.
For inspiration, check devianART gallery on pixel art isometric characters:
http://browse.deviantart.com/digitalart/pixelart/characters/iso/?order=9&alltime=yes
