In article introduction_to_isometric_avatars.xml#B2 Designing 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 to have 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 quite limited, we will not be able to outline more than a handful of such features. Which ones? Let's make 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 maintaining a distance of approx. 60 cm between your eyes and 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 about 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 the observed 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 as "adolescent", "adult" and similar), and it's more often than not possible to find 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

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 arbitrarily the following representable avatar properties:

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 kind of 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.

"Ok, but why is such a separation important?" you might 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:

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.

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.

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" would not work.

An example to clarify: a robe, usually associated with "covering the body", typically 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.

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; 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).

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© (should you use another OS, there will be some similar utility as well which allows you to express yourself artistically).

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 introduction_to_isometric_avatars.xml#B2 Introduction 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 http://www.dancesport.uk.com/shoes/conchart.htm conversion 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.

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.

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 in this step 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).

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 inspect the result from 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).

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.

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 all at a sudden. 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.

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, they neither won't go unnoticed. Or in other words: this job is technical, not artistical.

img/cia_fig8.jpg Designing the rear views Fig. 8: Designing the rear views img/cia_fig9.jpg 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 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 pixels 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 than 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.

Now that we tediously have designed our avatar, we are going to "destroy" it again: for the reasons discussed previously in section #A 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 × 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.

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).

For this reason we put the individual parts in the closest possible rectangle surrounding the according part (Fig. 11 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.

Recomposing 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 intend 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.

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 just 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 with 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.

Hair Short hair (fig. 12a) is only affected by a movement of the head. Long hair (b), 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).

img/cia_fig12_hr_sh.jpg Short hair Fig. 12a: Short hair

img/cia_fig12_hr_lg.jpg Long hair Fig. 12b: Long hair

Tube top and shirt These 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.

img/cia_fig12_tt.jpg Tube top Fig. 12c: Tube top

img/cia_fig12_sh.jpg 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.

img/cia_fig12_sk_mn.jpg Mini skirt Fig. 12e: Mini skirt

img/cia_fig12_sk_md.jpg Midi skirt Fig. 12f: Midi skirt

img/cia_fig12_sk_mx.jpg Maxi skirt Fig. 12g: Maxi skirt

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.

img/cia_fig12_pt_sh.jpg Shorts Fig. 12h: Shorts

img/cia_fig12_pt_tr.jpg Trousers Fig. 12i: Trousers

Gowns, dresses and robes The garment which is easiest to draw 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.

img/cia_fig12_dr_mn.jpg Gown Fig. 12k: Gown

img/cia_fig12_dr_md.jpg Dress Fig. 12l: Dress

img/cia_fig12_dr_mx.jpg 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.

img/cia_fig12_sw_ch.jpg Sweater, chest component Fig. 12n: Sweater, chest component

img/cia_fig12_sw_ar.jpg 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.

img/cia_fig12_jt_ch.jpg Jacket, chest component Fig. 12p: Jacket, chest component

img/cia_fig12_jt_ar.jpg Jacket, arm components Fig. 12q: Jacket, arm components

img/cia_fig12_ct.jpg Shirt 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 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).

img/cia_fig12_fw_sh.jpg Shoes Fig. 12s: Shoes

img/cia_fig12_fw_bt.jpg Boots Fig. 12t: Boots

If one of the goals of your work is aimed 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 http://en.wikipedia.org/wiki/Decision_table decision table we would need quite some space to catch all possibilities.

Also, 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").

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 of a million distinct appearances

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

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.