Alright, I have searched high and low for this, and I'm more certain that it is me finding a proper way to search (phrases/diction) that is holding me back, and not a lack of info on the topic.

I am attempting some sort of avatar customization for a small chat room my friend and I are working on. This will all be written in AS3 and the avatars are being made in Flash.

Now my question, and more than anything I am looking for advice/opinions/examples, is how would be the best way to go about this?

I am very new in what I am doing, and my friend is doing the scripting (which I am even more inept at)

The idea is for the avatars to be animated, initially this will just be simple animations like walking or sitting, but we would like to leave it open for future additions.

My understanding tells me the way this is done, is by using a base avatar/sprite, then drawing each frame individually. So for example, I want the avatar to be wearing xHat, I would go into every movieclip of the animation and place the hat there on a separate layer? Or is there a more simple way?

I also understand it that you would have one movieclip called "Hats" then every hat would be placed within it, in a different frame, so how do you get one frame to correlate with the rest?

If you can make sense of what I am asking, feedback would be appreciated. :) If not I'll attempt to rephrase my question.

It's quite difficult to add additional animations to a 2D avatar system once the system had been established because the a single new animation might require multiple new poses to be added to every existing sprite. Gaia Online is an example of a game with a 2D avatar system which evolved gradually and the choices made at the beginning forced them to make some strange adaptations when they were ready to expand to animated avatars 5 years later. Even before they added an animated environment to they game they had to completely redo the layering system at one point to allow single items to use multiple layers, and they also had to change their old policy of making male-only and female-only items to instead have all items available for all bases.

For a chat room I'm not sure whether you need a full body avatar which can walk. You might be fine with just a shoulders-up portrait that can make facial expressions. But I'll describe the 2D MMO avatar system I designed so you'll have that for comparison (not implemented, just designed). I chose a system which allows the player to control the arrangement of all item layers. Master versions of items within the game are svg files, then the massively-layered svg image is automatically flattened into a single transparent png spritesheet which takes a lot less processing power to display.

I chose to have 6 bases: muscular male, skinny male, chubby male, muscular female, skinny female, and chubby female. Other possibilities I wanted to make sure I could add in the future were centaur or animal bases, or digitigrade legs for an anthro humanoid.

One of the most important choices was the point of view of the game - a sidescroller would require fewer poses than a chessboard or isometric view. 8-directional movement requires more poses than 4-directional movement. Once the view is chosen, you can make a list of the standard necessary animations, as well as decide if you want anything like jumping, climbing, flying, swimming, kneeling or sitting, crouching or strafing. It's also important to determine the desired art style, especially as it affects the proportions of the avatar. Once these decisions are made the first step should be to get a stick figure (or a slightly more developed one drawn of circles and triangles) in the correct proportions doing the whole set of animations smoothly. That's basically the pencil test. If that works, then you can go to detailed lineart for one of the bases. Then if you get a nude base running around successfully you can try to prototype one of every kind of item you might want and see how you want to handle layering.

Another choice I made was to go with a standard game-wide color palette, and allow players to change the color of different elements within an item to any of the standard colors. This could be done mathematically in svg, or could be done by having a library of pngs of all standard colors. Some games, for example Dofus, instead use a color-picker to allow the player to choose a color-scheme for their avatar. This color-scheme might be automatically applied to any clothing that avatar equips, or it might not.

Thanks for the good response. :)

I guess I wasn't clear with the chat idea, not just a room, but kind of an environment where you can walk around.

Basically what you discussed is what I want, we are trying to do something that may eventually be able to evolve into a game. Kind of trying to use a Legend of Mana/Seiken series type style, so it would be mostly side scrolling, just want to have customizable avatars. This is basically what I'm working with:

http://i157.photobucket.com/albums/t64/Ezekyuhl/AvatarExample.jpg

Any suggestions? This is the simplest way I can think of, obviously I want to make it as easy as I can, and as every piece of gear would already need to be drawn individually per frame (unless I am mistaken) even this way will be alot of work for even a single piece.

I found a collection of the sprites from Legend of Mana, so that may be a good reference for you:
http://sdb.drshnaps.com/game.php?game=877
The one for Pearl seems to be the most complete. Looking at it, the example game seems to have a chessboard POV, not sidescrolling (there is an animation for Pearl walking directly toward and directly away from the viewer). Movement seems to be 4-directional, not 8.


What are the colored circles in your image? If you are using bone animation you need more body parts than that (specifically arms and legs need to be divided at knees and elbows, although further articulations or additions of prototype parts for handheld items, wings, tail, etc might also be useful - those would simply be hidden if an avatar had no relevant items equipped). If you are suggesting those as item layers it's unnecessarily restrictive to do it that way, I don't recommend it. At best those could be tentative layer groups you could categorize gear into, but each piece of gear should have an ID number layering handled by telling your avatar display interface a list of item IDs to retrieve layer images for. This allows players to wear arbitrary numbers of gear and layer them, for example an open vest on top of a necklace on top of an undershirt on top of a tattoo on top of a skin tone.

Pieces of gear do not need to be drawn individually per frame if the only animation is sliding or pivoting, because that can be done by copying, pasting, and moving or rotating. Simple stretching and squashing can also be done as a quick modification. Pieces of gear do need to be drawn individually per frame if they are rotating toward or away from the viewer, undulating (e.g. blowing in the wind), or otherwise changing shape.


Anyway what I'm suggesting you do here is make a nude avatar blank going through the motions such as shown by Pearl's sprite sheet. Then you make another sprite sheet on top of that where you place, for example, a hairstyle in all the correct positions to match the avatar's motions. You save the avatar base as one sprite sheet, and the hairstyle as a different sprite sheet (either svg or png with transparent background). The sprite sheets are the same size and shape so there is no complexity about telling the game where to display one relative to the other. Each frame within the sprite sheet should also be a standard size and shape, a generous squaring allowing for later additions of weapons, cloaks, wings, tails, hats, and other things that stick out much beyond the avatar's body. (for example 400x400 if you are using png and want the actual avatar to be 200 tall, or the equivalent in a vector format if you are using svg). In the avatar customization interface one or two poses of all layered sprite sheets are shown. When the player chooses to save the avatar's appearance the game engine flattens the layers to create a custom sprite for that player's avatar, which is used unless until the player changes their equipment and saves over the custom sprite with a new one.

[Edited by - sunandshadow on December 5, 2010 2:16:17 AM]

Of course, I have a tendency to over complicate things. Your feedback is great, thank you. The colored circles where intended to be layers. I was considering using the bone tool, but I have no experience with it, and it seemed too large to use on a sprite size, and I wasn't sure about how to go about changing that. (I'm basically just the artist, so the programming stuff is a bit greek to me)

I guess legend of mana is a little more isometric, I have been using a Chrono Trigger sprite sheet as an example, and am basically trying to make vectored sprites off of it- I guess that would be the closest way I can think of it.

Um, I'm pretty sure ChronoTrigger is also chessboard with 4-directional movement, not sidescrolling. The chrono trigger sprites also include animations for the characters to walk toward and away from the player.

Here are quick definitions of the 4 types of view:
In sidescrolling games the characters either do not have the ability to travel toward or away from the player at all (z-travel) because the world is totally 2-dimensional, or characters can move toward or away from the player but there is no proper animation for this movement. Examples of true side-scrolling are Super Mario 1 and 2, and Maplestory (an mmo with an avatar system). Examples of limited z-travel with no animations are Golden Axe, Teenage Mutant Ninja Turtles 2, and zOMG (Gaia Online's MMO subsection). The 2D Mortal Kombat games and Viewtiful Joe go somewhere in this category too.

In isometric games the characters move only diagonal, because the game world is like a chessboard but you are looking at one point of the board, not the side. Eternal Eyes is a classic isometric game with beautiful art. Harvest Moon: Back to Nature is another isometric game with cute art. Dofus is a 2D mmo with an avatar system which uses this perspective for combat, but for the main game world I think movement is 8 directional. I believe Trickster Online is also isometric.

Chessboard or side-on games are different from isometric in that you are looking at the board from a side, not a point. In some games of this type further away rows of the chessboard are smaller to simulate vanishing point perspective. In others there is no perspective. Chessboard games include Secret of Mana, Zelda: Link to the Past, the gameboy Harvest Moons, and most Pokemon games. There are some 2D mmos that use this system, I just can't think of one off the top of my head - most 2D mmos seem to use 8-directional movement so that makes them basically hybrids of chessboard and isometric.

There's one more possibility, a hex-based game. In a game with hexagonal tiles there is 6-directional movement. Heroes of Might and Magic 3 was an example of this system. I'm not sure if Warcraft 2 used hexes or squares.

Ah, okay, thanks for clearing it up, I guess my confusion laid in that when you enter a battle in the seiken games your directions became limited to sidescrolling, that was the eventual plan with what we are working on, in passive mode the character would have 4 directional movement (possibly 8, but only 4 animated directions) then in active/battle mode the character would be limited to animations going left or right, but would still be able to move up or down.

This would allow for much less animation for customizing appearance when a character would not need to be animated swinging a weapon facing up or down.

Ah, I see. Well, If you know you're going to have combat be basically sidescrolling, you might want to make the rest of the game sidescrolling too for consistency (and further reduction of necessary animations). But it's up to you, either way is workable.

I guess that would be simplest, my original thoughts were that players would want to view their character from the front, so they could see all of their gear, for screen shots or whatever, but I don't see any reason why not to just use that as an idle animation, so that when they stop moving they stand facing the screen. Always a more simple way, thank you for bouncing ideas with me. :)