Components of Isometric Avatars


URI:

http://herbert.gandraxa.com/herbert/cia.asp

Link template:   

<a href="http://herbert.gandraxa.com/herbert/cia.asp">Components of Isometric Avatars</a>


Link symbols:   

Local LinkOn current page | DocumentOn this site | External PageOn external site | WikipediaWikipedia article | Compressed ArchiveZIP archive | PDF documentPDF | E-MailE-Mail


Article

Organization

DocumentHome » DocumentArticles » DocumentDesigning Isometric Avatars » Components of Isometric Avatars

Scope

This article is the second one within the series Designing Isometric Avatars, following the article DocumentIntroduction to Isometric Avatars. It outlines the necessity to separate an avatar's body into distinct parts and shows how this can be done.

Author

DocumentHerbert Glarner

Published

2007-Apr-09

External Links


An Avatar's Components

The Task

Surrounding box around upright avatar
Fig. 1: Surrounding box
around upright avatar
In article DocumentDesigning Isometric Avatars, section "Dimension and Measurements", we defined the dimensions of a box around an upright avatar (fig. 1).

It is within this box into which we sketch a first avatar. Note, that this sketch does not need to be a perfect drawing: we are just interested in identifying the components of which an avatar consists.

Of course, first of all we need a clear idea about what object to sketch. Since our avatar is to represent a human, we need to identify those features, which contribute most to a distinct appearance. Because the available space within our box is rather small, we will not be able to outline more than a handful of such features. Which ones? Let's make an experiment.

An experiment

Assuming you are sitting in front of an average monitor of about 20 inches in diameter (corresponding to about 50 cm), the height of a box' edge will measure about 2 cm. Furthermore assuming you are sitting approx. 60 cm before your monitor, we can calculate the angle between your eyes and the edge's height with arctan(0.02/0.6)=1.9°. How distant must a human of 1.8m height be, that it appears to be 2 cm height in 0.6m distance?

Well, the angle of 1.9° remains the same and so our function is linear; e.g. an object really being located at a distance of 1.2m, but appearing to be 2 cm high at a distance of 0.6 m would measure around 4 cm. Therefore, an 1.8 m tall human must be in a distance of approx. 0.02:0.6=1.8:x -> x=(0.6×1.8)/0.02 = 54 m to appear 0.2 m tall in 0.6m distance. You can verify this the following way (assuming that your arm is long enough): hold your hand 60 cm before your eye and use two fingers to make a gap with a height of 2 cm. If 1.8 m tall people fit in between the gap, they are approximately 50 m away. (Of course, if this shall work for you, you need to be able to do an educated guess about that person's real height.)

Now find random people (of the right height) passing by at a distance of approx. 50 m and try to describe them. At that distance, it almost always is possible to tell the gender of the person, and also to give an educated guess about its age (at the very least categorizing them in "adolescent", "adult" and similar), and it's more often than not possible to make out several other features, such as telling a person's hair length and color, also its skin color (but not the color of the person's eyes), and we also are able to categorize a person's body weight (unless the person wears thick winter coats, that is) and more.

Furthermore, it is of importance to note that we easily can tell in what direction a person standing still is looking (the same is even easier for a moving person, of course). Let's call this property orientation and define it as the direction into which the person would walk if not changing the current direction.

And one last property shall be mentioned: we are instantly able to tell if a person is standing still or moving (and at what pace and gait: walking slowly, "normally" or fast, or if the person is even running).

All in all we find, that we can quite easily distinguish

Outline of the Avatar

Because these properties are such easily recognizable when looking at people being 50 m away, we can assume that the same properties also are representable in a drawing of the same relative height (2 cm), at least if we have a good enough screen resolution. (In our example, the screen resolution actually is out of topic, because we defined 1.8 m to be represented by 72 pixels.) Let's call these observed and recognizable properties our representable avatar properties.

So, what representable avatar properties are we going to use for our first draft? With two exceptions, all properties can be selected quite arbitrarily as per your personal preference or requirements.

One of the two exceptions is "movement". This is due to the fact, that we are concentrating on an avatar which is standing still in this article: movement requires itself a quite elaborate analysis, as you will see, and therefore will be covered in a separate article.

The other exception is "orientation". Because it is a good idea to include the avatar's face into our sketch, and assuming that we are going to distinguish just the 4 orientations parallel to a tile's edges, there are only two possibilities: pointing towards the SW or towards the SE.

Filling in the arbitrary choices (as per personal preference) and observing the restrictions, the rest of the article assumes the following representable avatar properties:

A Closer Look

Let's go back to our experiment for an instant, this time with the goal to clearly identify different body parts.

First of all, we find that all limbs are well distinguishable from the given distance (especially when a person is moving): each leg and each arm can clearly be identified, and also the head can be recognized with ease.

Having a closer look, we also see a person's feet, mainly because of their distinct angle they make with the upright legs. It is by far more difficult to make out hands, though, especially if they are in neutral positions and do not perform special gestures. However, with a normal eye-sight they still should be recognizable.

The chest, usually a person's main mass, seems to be quite inseparable and we should treat it as an individual part. The hip now is not quite as static: it's shape changes along with the movement of the legs: for our purposes it seems sensible to treat hip and legs as an inseparable unit.

Anticipating Motion

"Ok, but why is such a separation important?" you may ask, "let's just go along and draw that avatar". Well, it is important, because thinking about components makes our later work much easier. This is mainly because we need to anticipate motion: as a person moves, some parts are covered by other parts, and different parts are newly exposed. Depending on the orientation of a moving avatar, some parts are exposed wholly or partially, and during the motion, the parts change their appearance (angle, perceived size).

However, other parts barely change: at the given distance, a person's head always seems the same (when it is not being turned into another direction while walking), and the same is true for the chest (which latter may partially be covered by one of the arms, though).

Therefore it makes sense to identify the components which need to be drawn just once during a normal motion (e.g. the head and the chest in normal walk): such, our designs can be re-used throughout the motion and only need to be assembled to the complete avatar by adding the (partially) exposed and (partially) hiding parts.

Note, that despite the defined unity of hip and legs, it makes sense to treat the feet as individual components, for a variety of reasons:

Depth Layers

By now it should have become clear, that our approach is a minimalistic one: as long as it is of advantage for us, we try to draw just what is necessary, i.e. the parts which are exposed. Care must be taken of the extent, though, as it does not make sense all the time: for example is it better (because faster) to define a mostly invariable chest just once and overlay the front arm above it, than to draw different chest shapes and fill in the gaps with the arm. However, in parts being partially hidden anyway (as is the case with the rear arm), it does make no sense to draw the hidden parts, not even during motions (and because the motion requires a multitude of drawings in any case, this will speed up things once again).

Depending on the avatar's orientation (which may change also if the user chooses an other viewing direction), different body parts may sometimes be hidden, and sometimes may not be hidden at all. For us this means, that we have to define different depth layers for different orientations. With ease we can identify at least a rear layer (rear arm), a middle layer (head, hair, chest, hip with legs), and a front layer (front arm). Note, however, that there is also some overlap between legs and arms, as parts of the arm in certain poses do overlap with parts of the legs, so that it is better to distinguish 5 layers: a "far" and "near" back and front layer each.

Seen from top, and assuming that the observer is located in the South and looks towards the North, we can identify the layers for an avatar oriented towards the Southeast as per fig. 2:

An avatar's multiple depth layers seen from top
Fig. 2: An avatar's multiple
depth layers seen from top

Far back (blue stripe): rear arm (note, that for this orientation the rear arm is the left arm, for other orientations it is very well possible, that the left arm becomes the front arm; and the same applies for the other arm, of course)

Near back: rear foot (same remarks as above)

Middle layer: central parts like head, hair, chest, hip

Far front: front foot

Near front (green stripe): front arm

Note, that these layers define the order in which different components need to be drawn, because some components (like the chest) will be defined just once for that particular direction and activity (standing still), but still may be hidden at least partially by components being located more in the front.

Interfering Clothes and Hair

So far, only an avatar's body parts have been brought into a drawing order, but since humans usually don't run around completely naked, we need to examine the effect of clothes as well.

Unfortunately for us, we can't just associate a garment with a specific body part: the instruction "draw the garment associated with a body part just after that body part" thus would not work.

An example to clarify: a robe, usually associated with "covering the body", usually does not only cover (parts) of the body, but also parts of both legs, possibly even involving the arms (which latter is certainly always the case with coats). As we can see: clothes complicate things, as they may include as little as one and as many as all layers.

The quintessence is: we must carefully plan, with what clothes we want to equip our avatar. Once this is decided, each and every particular garment needs to be given its own priority (in terms of drawing sequence). Also note, that different clothes may overlap in several ways: for example can t-shirts be worn above or underneath trousers; boots may cover parts of trousers, but also the opposite is possible, etc.

And last but not least let's look at the hair. When talking about avatars, it is best to treat hair as an additional garment and not to associate it directly with the head. Depending on the hair length, hair must be positioned into the depth layers very carefully, because sometimes it may cover even the foremost components (e.g. a robe's shoulder piece); but also the contrary is possible.

A Component List

By now we are ready to define an unordered list of components, consisting of body parts and cloth pieces (which latter as per definition shall include the avatar's hair).

However, before actually listing with which garment we want to equip (in our case female) avatars, let's define, how they shall look when not wearing any of them. Of course, it's up to you to define this for your application, but in our examples within this series, we are not going do draft a completely undressed avatar (after all, we have an External SiteICRA label for our site); our bare avatar shall at least wear underwear.

Also note, that in order to depict the various overlapping instances of cloth pieces, we want to include quite a large assortment of garment (which you in your individual case may or may not need).

The body parts:

And a possible list of the garment with which we want to equip our female avatars, grouped as per covered body parts:

Note, that you want to keep the garment list as minimal as possible: all these parts need to be designed in 4 orientations for avatars standing still (of which 2 orientations are horizontal mirrors, unless you design your garment asymmetric), even more times if motion requires body parts to be modified in different frames (such as sweaters or trousers in walking avatars).


Designing the Avatar

The First Orientation

It's about time to eventually start with our first draft. Of course, due to the chosen size we will be pretty restricted when it comes to point out details. However, feel free to adjust the measures as per your requirements.

By the way: You really don't need an expensive software to do this - all my drafts were done in MS™ Paint© which is included in your copy of Windows©, and should you use another OS, there will be some similar utility which allows you to express yourself artistically.

Sketch to determine the avatar's sizes
Fig. 3: Sketch to determine
the avatar's sizes
We start out with a very simplicistic draft to get a feeling for the dimensions (fig. 3). There are two important facts to observe:

Firstly, the chosen 2:1 ratio in lines parallel to the edges must be maintained in all lines laying in the x/z plane, e.g. the feet's base or the shoulder line.

And secondly, the proportions of a human should be translated such, that the whole draft fits into the height of the defined surrounding box as per fig. 1.

For the length of the feet I've chosen 7 diagonal pixels (note, that these 7 pixels are parallel to the tile's edges). A diagonal pixel was defined to be 2.8 cm (in document DocumentIntroduction to Isometric Avatars, section "Dimensions and Measurements"), and therefore the feet length amounts to 7 × 2.8 cm = 19.6 cm, which is very small (I won't give you a shoe size, because there are plenty of concuring systems: if you really are interested in our pixel woman's shoe size, consult this External Pageconversion table, although, the chosen size isn't in the conversion table for ladies, but in that for girls).

The width from shoulder to shoulder (outer ends) was estimated to be 18 diagonal pixels, amounting to 18 × 2.8 cm = 50.4 cm, a width which suits Pixie's overall height of 64 pixels (160 cm) well.

Outlining the body omitting the arms
Fig. 4: Outlining the body
omitting the arms
Now we add some flesh around the lines (fig. 4), and this is where your artistic talent and creativity come into play. However, should you lack a such, it might help to look at a picture while doing your design.

Do this incrementally, advancing picture for picture. It is a good idea to use helping lines to maintain the proper proportions while doing so.

Note, that it is important to leave out the arms for the time being: they would obscure parts of the chest and legs, and since we will need those parts in their entirety later on, it is better to draw them right already from the beginning, rather than adding the missing parts later on.

We already mentioned, that Pixie will be bald: hair will be treated as a garment, because it may interfer quite heavily with body parts, especially when we discuss motion.

The single most important advice I can give you for your design is to always observe the parallelity to the edges: it looks awfully wrong in the end if you mess this up. If it is needed, draw additional supporting lines (using a different color to get rid of them easily when done). And remember, that the lengths along edges (and thus also along their parallels) differ from the vertical lengths along the y axis.

Adding arms will obscure body parts
Fig. 5: Adding arms will
obscure body parts
You guessed it already: on the basis of the previous picture we complete the draft by adding the still missing arms and hands (fig. 5).

During this step, you will inevitably "overwrite" some of the pixels having been defined in the previous picture (i.e. erase and replace by parts of the arm or hand). You must make sure that you work on a copy of the previous picture, because we will need both the previous and this picture.

Also, be very careful to not alter any other pixel of the picture having been designed in the previous step: should such be required, you must change the previous picture first, or you will end up with quite a mess in the end (i.e., apparent holes where you expect a part of the body).

Finalizing the draft
Fig. 6: Finalizing the
draft
In the final step we get rid of any remaining help lines and choose some fill-in color to get the whole picture (fig. 6).

Then let's lean back and look at our work a while. Actually, due to the small size it might be a better idea to move very close to the screen.

Well, in my opinion Pixie looks quite okay. By the way, didn't I tell you that I am a programmer and not an artist? Feel free to improve my attempts (and send along a copy). (But don't mail me for a picture without underwear: I didn't have any.)

As the fill-in color for the skin I used 255/255 red, 207/255 green and 185/255 blue, which seems quite close to untanned Caucasian skin. However, I did not look up any color for this draft and just played around with MS Paint's palette. If you want to use exactly this color and work in another tool, the color's RGB value might be of help. Here it is: 0xFFCFB9.

Mirror Images

Mirroring the image
Fig. 7: Mirroring the
image
Creating the second of the 4 orientations costs almost no work: we are just going to mirror fig. 6 horizontally.

Be advised, though, that in general you have to be very careful with such an approach, because it almost never works.

This has to do with the difference between the left and the right side: whereas in the first orientation (pic. 6) the left hand was the rear hand, it now (pic. 7) is exposed as the front hand. If, for instance, your avatar is to hold an item of whatever kind in one hand, then simply mirroring would result in the avatar holding the item in the wrong hand. Trust me when I tell you, that you can't get away with it: it will be noticed almost instantly.

However, in this particular case with a perfect symmetry it does work.

The Rear Side

Of course, it would be nice if we could tell MS Paint to solve the problem of drawing the avatar's back side as comfortably as mirroring. Alas, to draw the avatar in a NW and NE orientation, i.e. to see the avatar from behind, we need to draw a new set of pictures.

To some extent, this is an easier task than drawing the avatar for the first time: after all, we already have all needed measures and all according research is still valid. Oftentimes, we will just need to measure the heights and horizontal transposition of body parts to successfully integrate them into the new pictures.

On the other hand, we have many more restrictions than before and practically no artistic freedom any longer: the two additional orientations simply must "match" the already drawn ones: if they don't, it won't go unnoticed. Or in other words: this job is mainly technical, not artistical.

Designing the rear views
Fig. 8: Designing
the rear views

 
Including arms
Fig. 9: Including arms
Like before, we start out with a simplicistic draft and enhance our images as we proceed. Note however, that several things must be changed. First the obvious: we need to adjust the orientation of the feet and omit the face. This is quite easy, but there's more than just this.

Let's talk about the rotation axis. It is clear, that we need to rotate Pixie by 180° around the vertical y axis, but where exactly? Well, we want to take the position of the feet as our reference point, that is, after the rotation the feet shall be at the same location. This ensures, that the avatar always is standing in the middle of a tile.

However, this has implications. Notice the position of the head in our two "forward" orientations (SE and SW): it is not exactly above the tile's center. Actually, it is quite a lot off. Because the head is located more or less above the heels, and because we chose to place the feet in the center of the tile, the head is "behind" the center (where "behind" refers to the opposite direction of the avatar's orientation). Between the "fore-head" and the tip of the toes there is a horizontal gap of 4 pixels. The same must be the case when we look at the avatar from behind. However, it isn't yet: we need to shift the head some pixel in order to achieve this. This seems quite natural, when thinking about it, because the "hind-head" forms more of a straight line with the heels that the fore-head does with the toes. After this adjustment, also the distance between the hind-head and the heel of the right foot should be sync again.

At first glance it might come as a surprise, that this also leads to a reduction of the pictures' overall height. This is because our "upright skeleton" is resting on its heels, but the heels' position now is changing: in the forward orientations, the heels were to the NW, now they are in the SE, and since the two positions differ, this also explains the overall height difference.

All in all, just "think backwards" and permanently compare with the front images: the overall appearance must make it credible that it is the same avatar.


Creating Reusable Parts

Decomposing the Parts

Now that we tediously have designed our avatar, we are going to "destroy" it again: for the reasons discussed previously in section Internal page "An Avatar's Compenents", we need to provide the avatar's components, not the whole pictures.

We already defined the needed individual body parts, now how to proceed? To obtain the required parts, it is best to copy the original pictures (all four orientations) so many times as there are parts (in our examples, there are 7) and erase the parts not belonging to those. Thus, we need to create 4 orientations × 7 parts = 28 parts in total.

It is wise to keep the tiles when doing so: they enable us to give an accurate position (in terms of horizontal and vertical offsets relative to any desired point on the tile). Such, we are able to quickly place the according part to the right position.

SE SW NW NE
Head Head SE Head SW Head NW Head NE
Chest Head SE Head SW Head NW Head NE
Hip and legs Head SE Head SW Head NW Head NE
Left foot Head SE Head SW Head NW Head NE
Right foot Head SE Head SW Head NW Head NE
Left arm Head SE Head SW Head NW Head NE
Right arm Head SE Head SW Head NW Head NE
Fig. 10: Decomposing the individual parts

Make sure, that the disassembled parts really can be re-assembled to the actual avatar before continuing: it is very easy to make a mistake during disassembly. (Hint: Observe the drawing order while re-assembling.)

Storing the Parts

Of course, we don't want to store pictures in the size shown, they consume far too much space. The less we store, the better (and the faster the drawing).

Storing body part and offsets
Fig. 11: Storing body part and offsets
For this reason we put the individual parts in the closest possible rectangle surrounding the according part (b).

This saves a lot of space, but would we store just this minimal rectangle, we'd lose the information at what position the part was, relative to the tile. Therefore, we also need to store a positional information. We do so by adding the horizontal and vertical offsets of the surrounding box' top left corner relative to a tile's corner (we arbitrarily chose the tile's leftmost corner) (c).

The offsets need to be stored along with the picture (d). Note, that both offsets can be negative. Which directions you want to be positive or negative is up to you: it's just a matter of definition. In the examples within this series, horizontally negative is when the surrounding rectangle starts to the left of a tile's leftmost corner, and vertically negative when it starts above it: such we follow the convention which is usual with screen coordinates.

Re-composing the original picture from the stored parts then is a quite trivial task: just draw the appropriate parts in the correct drawing order.

There is even another very important advantage when modularizing body parts: it enables us to efficiently bring motion into play. Would we want to draw a walking avatar, for example, we only would need to design the frames for the components really affected by that movement, i.e. hip with legs, feet and arms. At least if you don't want the avatar to perform other movements simultaneously, like turning around the head etc.


Designing Garment

Practical Advices

In this last section of the article we are going to apply the technique outlined above: the avatar receives some clothes.

Before actually designing garment, it is always a good idea to look at some pictures (or hire a model and take photographs). This will eliminate a lot of guesswork on how a particular garment should be worn to look at least somewhat realistic.

Of course, we need to draw clothes suitable for each orientation, i.e. we need 4 different designs per garment. Furthermore, we will need to decompose the clothes the same way as we did with the body parts, i.e. whereas a tube top does only involve the design of one particular part covering the chest, a coat additionally will include the legs and the arms. Later on we will even need more parts, as we will see as soon as we discuss motion. (Didn't I mention in the preceding article that we will need a lot more graphics than in 3D-design?)

There's also a caveat: if different garment needs to be worn over each other, you must make sure, that the garment closer to the body indeed stays below, i.e. does not expose parts of it where it is not appropriate. Such can easily and inadvertently happen if you decide to design a garment which is wider than the avatar's body: then any garment which potentially can be worn above a such must have at least the same width as well.

This last issue must be addressed also in another context. You must answer the question what can be worn together: not all combinations do make sense. For example should you not allow your avatar to simultaneously wear shoes and boots, or a dress and a sweater, or (since we treat hair as garment) short hair and long hair. However, many combinations do make sense: for example is it possible to wear a tube top with shorts, but also with trousers or a skirt.

It is best to simply draw each garment just above the avatar pictures, and then to erase the parts which don't belong to that particular garment. Remember to work on copies, though.

It is advisable to grey out the contour lines of the avatar's body parts when working on clothes, in order to clearly distinguish the garment's contour lines: this makes it much easier in the end to separate the two component groups. The garment in the following images is held in a single color, but of course you can add diversity by allowing a multitude of colors.

The Garment

Hair. Short hair is only affected by a movement of the head. Long hair, however, also involves the back (i.e., 2 orientations of our "chest" component). In general, it is advisable to keep the arms out when designing garment: they might cover parts you need to design (i.e. parts which might be exposed when the arms are involved in some motion).

Short hair
Fig. 12a: Short hair

Short hair
Fig. 12b: Long hair

Tube top and shirt are just involving the chest component. As before, the arms are omitted, they would cover parts of the garment. In our design, the shirt is just a prolongation of the tube top, following the chest's contour lines. Note, however, that once a base line was defined (as is the case in the shirt's bottom line), that same line should be considered also as the top line for garment to be worn above the hips/legs component.

Tube top
Fig. 12c: Tube top

Shirt
Fig. 12d: Shirt

Skirts. As per above comment, the shirts' top line is identical with the shirt's bottom line. This enables us later on to combine any skirt with a shirt. When garment differs only by length, it is advisable to draw the shorter one before the longer ones: the latter usually are just prolongations. However, notice, that our skirts don't exactly follow the body countour lines, especially along the legs: they would appear too tight to later on enable a credible walking motion.

Miniskirt
Fig. 12e: Miniskirt

Midiskirt
Fig. 12f: Midiskirt

Maxiskirt
Fig. 12g: Maxiskirt

Pants. Both shorts and trousers use the common line as their upper bound. As before, we start out with the shorts and prolong them to get trousers. In contrast to skirts, pants of any kind may or may not be as tight as the body contour allows.

Shorts
Fig. 12h: Shorts

Trousers
Fig. 12i: Trousers

Gowns, dresses and robes. The easiest garment is the one which you can design by just combining two already existing pieces into a single one. Such we create a gown, a dress, a robe by combining the differently sized skirts with the shirt, omitting the separating common border line.

Gown
Fig. 12k: Gown

Dress
Fig. 12l: Dress

Robe
Fig. 12m: Robe

Sweater. The sweater is our first real challenge: we must design also separate arm pieces for this garment. Once again, when drawing additional parts, it is advised to grey out the already designed components: this will facilitate later extraction of the really needed parts.

Sweater, chest component
Fig. 12n: Sweater, chest component

Sweater, arm components
Fig. 12o: Sweater, arm components

Jacket and coat. Once we have the sweater, we can easily modify it to become a jacket, and similarly we can convert the jacket into a coat. Notice, that all this garment (including the sweater) should not follow the body's contour lines too closely, since they usually are worn on top of other garment. The jacket's arm components can be re-used also for the coat, since in our pictures coats are just a prolongation of jackets.

Jacket, chest component
Fig. 12p: Jacket, chest component

Jacket, arm components
Fig. 12q: Jacket, arm components (also used for the coat)

Coat, chest component
Fig. 12r: Coat, chest component

Footwear. As before, we start out with the shortest version we want to implement: in our case that's "shoes". Their prolongation then will result in "boots". Theoretically we'd need to provide two individual pictures, one for each shoe or boot, resp., but since they are absolutely parallel in our layout, we can get away with one picture of each: the other one completing the pair is just transposed some pixels (2 vertically and 4 horizontally). However, if you opted for a different pose in your design, you indeed need to design both components (each).

Shoes
Fig. 12s: Shoes

Boots
Fig. 12t: Boots

Diversity

If one of the goals of your work aims at a large diversity, we should be interested in the number of possible combinations. To get an idea about the number of possible combinations, we need to look at the allowed combinations, i.e. what garment can be worn together with other pieces.

Because we can locate 4 individual locations where garment can be worn (head, chest, hips/legs, feet), we would need to compose a 4 dimensional table to list all possibilities. Even if flattened out in a Wikipediadecision table we would need quite some space to catch all possibilities.

Note, that some garment involves more than just one location. It is best to proceed location-wise from top to bottom, grouping the critical locations (chest plus hip/legs) into a single one (body). An additional group lists the garment which can be worn over all other garment, whatever this might me: I named this group "weatherwear" and it includes jacket and coat). In each group we list what is individually allowed. The sums in each group are then the factors of the final product, which eventually tells us the number of possible combinations.

As for the listed garment: it is as per your particular application's requirements if "no such garment" is a valid option (e.g. if "bald" is an additional choice within the group "hair", or "barefoot" within the group "feet").

Location Garment Number
Head

Bald

Short hair

Long hair

3 3×18×3×3=486
Body

Tube top

Shirt

Sweater

Miniskirt

Midiskirt

Maxiskirt

Shorts

Trousers

3×5=15 15+3=18

Gown

Dress

Robe

3
Feet

Barefoot

Shoes

Boots

3
Weatherwear

None

Jacket

Coat

3

Some combinations
Fig. 13: Some combinations
All in all, our garment allows for 486 different combinations, of which 4 are shown in fig. 13. Whether these are too many or by far not many enough for your application is up to you to decide. Note, however, that if you allow different fill colors rather than our uniform red-only coloring, this will result in huge numbers very fast: even if you allow just for, say, 256 differently colored garment and, for example, 4 distinct hair and footwear colors each, you would end up with approx. a quarter million distinct appearances [1].

Furthermore recall, that this is just one avatar type, but that we found to be able to distinguish several more, namely gender, age group, skin color, and body weight. If you aim for a large variety, you might want to include more types within the age group (e.g.: child, adolescent, adult, old), skin color group and body weight group, because they all come in as additional multipliers.

[1] (1+4+4) × ( ( (256×3)×(256×5) )+(256×3) ) × (1+4+4) × (1+256+256) = 249,318


Outlook

With this the second article of the series DocumentDesigning Isometric Avatars ends.

The next article of the series dives into biometrics and introduces the concepts of motion in order to draw the necessary frames for walking avatars. Due to that article's size it needed to be split into 4 parts. Proceed to DocumentWalking Isometric Avatars, Part I.