Sunday, April 13, 2008

The joy of 2D avatars

I've been looking at 2D avatars lately. It's been a fascinating trip into a wierd little area of game art that I haven't dabbled in before. Like quite a bit of game art, there is a very obvious craft involved in the creation of 2D avatars. It reminds me a lot of the techniques that went into old school pixel art or tile creation. You build your pieces just so according to a very particular set of rules. Align the hand, align the head and voila, the end result look like a unique character.

I ran across a couple classes of 2D avatars that are worth describing. This list is by no means exhaustive and what you ultimately end up using completely depends on the type of game you are making. The different styles can be classified by:
  • Perspective: What view is the avatar seen from?
  • Construction technique: How is the avatar assembled?
  • Animation: How is the avatar animated?

Front view: A frontal view of the character. The benefit here is that the character is often symmetrical which reduces the skill needed to draw a character. The downside is that the character is almost always looking straight out at the viewer. May PlanetCute characters are a good example of this perspective.

Partial side view: A partial side view of the character where the character is rotated 45 degrees to the left or right. The example above is such a character. This character can interact with objects in the environment, but with subtle (and cheap!) animation of the eyes, look at the viewer. You can make avatars with this perpective move left, right in a believable fashion by simply flipping the avatar. Climbing ladders is less than compelling. :-)

4 (or 8) directions: For each of the cardinal directions you draw a new version of the avatar. The characters in Diablo are a nice example of this style. Having multiple directions is more realistic and allows you to show the general direction that a character is pointing. However, it is again more expensive. If you have an interchangable item on the character, you need to draw 3 different versions for 4 directions and 5 different versions for 8 directions. This multiplies your art expenses.

Isometric: This is similar the partial side view, but usually seen a bit more from the top. This is almost always done with multiple directions.


Interchangable parts: Most avatars are made out of interchangeable parts. You can swap out a shirt for another shirt. This allows for a vast range of different characters, but They all tend to be built from the same basic mold. Luckily, so does most of humanity, so this system tends to work well for humans.

One piece: Whirled and most single player games uses characters that do not have interchangable parts. All the animation is built into the character. The upside is that you can have great unique animations that really fit the character. Your dragon can breath fire and your balloon beast can float merrily along. The downside is that you need to make unique animations. This is expensive.


No animation: This is the simplest and is quite common with web-based games. If you can get away with it do so!

Cell animation: The whole avatar or the pieces of the avatar are animated by flipping through a series of frames. This tends to be a specialized skill and good 2D animators are hard to come by. Cell animation is highly evocative and has been the animation technique of choice for ages. The downside is that if you are using interchangeable parts, each part needs to be animated through all the possible animations. This means that the number of animations that your avatar supports is likely to be small since you don't want to bloat the cost of creating each item.

Vector animation: Each piece of the avatar is mapped onto a simple 2D vector rectangle that can be smoothly rotated, scaled and squashed. Add a simple skeletal animation system (the foot bone is connected to the leg bone which is connected to the hip bone) and you can do some reasonable effective animation. The characters in Book Worm Adventures are a great example of this style. If done correctly, this method lets you animate just the base skeleton and swap in parts as desired. The upside is that you can have a huge range of animations with the same basic art assets.

Little lessons learned

Optimize for ease of object creation, not richness of animation or immersiveness: If you are going for virtual item sales, your incremental profits can be broken down to # of items sold * price of items - production cost. You want lots of item variety and you want to keep your item cost down.

With this in mind, the format of your avatar begins to matter a lot. Animation is expensive and makes object creation even more expensive. Multiple directions for your avatar are cool, but are they really worth increasing your content costs by 500%?

Most items are made out of at least two pieces, not one
: When you build hair for a character, you have a section of hair that goes behind the avatar's head and a section that goes in front. I've been sketching it all out as a single piece and then chopping it up as needed during the cleanup stage.

Use flat shading or indistinct light sources if you are using vector animation: Since your pieces can be rotated in all sorts of directions, highlights will often look strange when rotated.

The number of slots in your avatar represent sales opportunities:
A character composed of a head and torso presents very little opportunity for players to customize their look and feel. After purchasing a couple of items, they are done. By allowing for tiaras, jewelry, wings, thought bubbles and other items, you win by creating additional sales opportunities. The player wins by having more ways of making their character unique.

Style matters
: I dress like the guy in The Fly. My closets is filled with row upon row of identical pragmatic clothes. I wouldn't know the difference between a cardigan and a camisole if my life depended on it (I actually had to look it up.)

Yet many avatars, especially those in online games, are ultimately about fashion and style. The cut of the fabric is important. The patterns matter. The colors...don't even get me started on the colors. It is no surprise that some online game companies (like StarDolls) build up such an expertise in fashion that they are launching their own real world clothing lines. So I've been reading women's fashion mags. It's a whole different world out there.

Next Steps
I'll continue dabbling with these sketches. My character drawing skills are not the best, so at the very least this will be good practice.

Which style should I use? I'm leaning towards a side-view avatar with interchangeable parts that uses simple vector animation. The cost of production is low and the style seems to be the best fit for some of the game design ideas I've been mulling over. The current template has spots for custom headgear, a head, eyes, mouth, nose, top, bottom, feet and items held in left or right hand.

Here is one last sketch.
Comments and critiques are welcome!

take care



  1. This is a solid analysis!

    One thing I would point out is that, in many situations, it makes sense to use a system of palette changing and masking on individual pieces.

    For example, if you have a shirt, it's often very useful to be able to stamp any logo you own onto the shirt as you see fit, or change the color of its stripes independently, or even put holes in it.

    This isn't always a good business decision - it will increase uniqueness, but it reduces the amount of buying each individual player would need to do. So it's more suitable for situations where buying avatar visuals is not the primary business model...

  2. Although it's a different style and now you're playing with vectors, the concept art for the races in The Circle was fun.

    Vector animation appeals to one's inner laziness and it'd be cool to see how far that can be taken.

    As for the perspective, it depends on what styles of games you'd be interested in appearing. I'd like to see a console adventure/RPG style game, so my vote is partial side view or multi-directional.

  3. I get the distinct impression that you've been playing (or at least looking at) Maple Story.

    Customisable avatars are an excellent way to keep people interested. Personally I played Ragnarok Online for ages and it wasn't really anything to do with the gameplay, which was reasonably tired and repetitive - the cynic in me now realises that the game was really all about pimping out your avatar with the massive variety of cute hats.

    Personally I think that the left/right 3/4 view you've got going here is the most useful. You can do a lot with that and adding new gear is easy since you only need to draw it once.

    Incidentally, ladders aren't an issue. You just don't have the ladder going up and down (requiring you to draw the character from behind) - you put it to the side from the same perspective, so that you can see the rungs and it's obvious that you're looking at a ladder. The character then can stay oriented right or left as they climb.

    Personally I'm glad that people are going back to looking at 2D art for games again. When its done well, 2D stuff can look absolutely breathtaking. Have you seen either of Vanillaware's recent offerings on the Playstation 2, GrimGrimoire or Odin Sphere? It's all hand-drawn, massively detailed 2D. Not customisable, but when it looks as good as that it doesn't need to be.

  4. I know this is off-topic, but I considered you would be probably interested: a Javascript-based web game for iPhone that shares the same game mechanisms as your SpaceCute has recently been released.

  5. One of the metaplace alpha testers has used your art for a world they've built, and mentioned you in the interview. Nice :)

  6. Danc, I couldn't find another place to contact you, so hopefully you'll read this (and feel free to nuke this comment after you do):

    You worked on Tyrian way back when, right? Check this out!

    I think there's actually been a DS port for a while now as well. It's really awesome to see something you worked on a long time ago experiencing a resurgence in popularity, eh?

  7. Holding my breath for the new art. Might I suggest starting forums to tie into the blog? is a nice example of this. Then people could start threads about projects based on your art, and converse about art, games and programming without cluttering your blog.


  8. Hi Danc - nice piece and nice artwork. I personally think that anything less than 4 directions of view will look bad if you have any kind of action. JRPGs can get away with it because the fighting is menu-driven, but lots of gamers find this boring nowadays. I think the "bones" system for 2D animation has a lot of untapped potential, especially if you dynamically add a stroke outline around the character to increase the sense of a single body.

    Quick note on your graphics - you should have thicker lines when you scale the character smaller so the detail is better defined.

  9. Hey, just wanted to say it was good to meet you yesterday albeit briefly - sorry I couldn't hang out and chat longer.


  10. Hey Danc,

    Sorry to trouble you, but I have a question about some graphics you did long ago. I believe they were labeled 2D circle graphics. You stated you made them with painter.

    I have a couple of questions about your process, if you wouldn't mind me picking your brain for a few details.

    My email is: