Walking Isometric Avatars, Part IV (Designing Garment)

URI:	http://herbert.gandraxa.com/herbert/wia4.asp
HTML template:	<a href="http://herbert.gandraxa.com/herbert/wia4.asp">Walking Isometric Avatars, Part IV (Designing Garment)</a>
Link symbols:	On current page | On this site | On external site | Wikipedia article | ZIP archive | PDF | E-Mail

---

Article

Organization

Home » Articles » Designing Isometric Avatars » Walking Isometric Avatars » Part IV (Designing Garment)

Scope

This article is the third one within the series Designing Isometric Avatars, following the articles Introduction to Isometric Avatars and Components of Isometric Avatars.

This article's Part I (Motion Parameters) introduced the theoretical background to design animated frames, and Part II (Designing Legs) demonstrated, how one could research biometric locomotion parameters and how the findings were implemented in the actual design. As a result, the avatar learned to walk (presented as animated GIF images). Part III (Designing Arms) analyzed the motions of the arms and finalized all outlines of a walking avatar.

This fourth part discusses the basic techniques to design garment, to which we count also hair.

Author

Herbert Glarner

Published

2007-Apr-28

External Links

• Locomotion (PDF), by the UCSD
• Foundations of Human Movement (PDF)

---

Point of No Return

This is the point of no return: be sure to be satisfied with your previous drafts (legs and arms). Sleep over your work, then look at your designs critically, if they really fulfill your need.

If you are not satisfied to 100 percent, correct your designs before going on, as we proceed with designing the garment on what we have. A later correction of any body part will also result in the adjustment of many additional garment frames, which consequently will cost you much of your precious time. – You were warned.

---

Garment

General Approach

The basic approach is to start out with garment covering only small parts of an avatar's body. From there we will derive other garment by shifting hemlines and elongating contour lines, possibly straigthening out "too round" contours to make a particular garment appear thicker.

Tubetop, Miniskirt and Shoes

This 3 components do not overlap each other. For this reason we can design them simultaneously. Recall to save them as individual components, though.

Note: The avatar's arms would hide some parts of the clothes, which is why we initially omit them in our frames.

Because the tubetop is sleeveless, it affects only parts of the trunk and such it does not change in appearance between the frames. This makes the design of the tubetop quite trivial: the same design can be used in all frames. However, the trunk moves vertically between the frames, which means, that we need to pay attention to get the vertical offset right.

The miniskirt covers parts of the legs and thus we are not as lucky here as well: it must be designed individually for all frames. Note, that Pixie makes rather large strides, i.e. 67.2 cm. For this reason it is best to start out with the frames in which the legs are separated from each other the most (frames 6 and 14): the skirt must be able to extend to the given distances. Assuming that our skirt is not kept in place by elasticity, the same circumference must be maintained throughout all frames. From this follows, that it would be wrong to design the miniskirt all too tight when the legs are close together. For this reason, the skirt will fall straight down and not directly follow the legs' contours. Of course, the shorter the miniskirt is made, the less circumference is needed and the tighter it can be designed.

Shoes must be designed on a frame by frame basis as well. However, once we have decided about their height, it's just a matter of maintaining that height throughout all frames. Other than that they should follow the outline of the feet (recall that a deviation of 1 pixel along an edge and all its parallels translates to 2.8 cm, which would be too large a gap to be justified for shoes).

Motion	Details	SE	NW
Tubetop, Miniskirt and Shoes	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Shirt, Shorts and Boots

The most important property of a shirt is its length, because it does define the drawing order: if it's longer than the upper waist line of skirts and trousers, shirts must be designed with priority, and furthermore they need to follow the body's contour lines from the waist line downwards. If it is to be worn below other short leg-covering garment, like miniskirt or shorts, it in no case should be designed to be longer than the hemline of such other garment. If it is to be worn above leg-covering garment (skirts, shorts, trousers), then it may have a longer length, and also a wider width. In that case it must be designed later than that other garment. Note however, that when playing with the width, you need to supply at least that width as well for jackets and coats. If we want both options, either we need to follow the body's contour lines, or we need to design two different kind of garment.

Another important property is, if the shirt has to have sleeves. If not, only the trunk is affected (depending on its length possibly also the legs): in most cases (if not too long) we can get away with one image for all frames. If yes, then the arms are affected as well, requiring the design of 2 × 16 additional frames.

In our case, we keep it simple: a shirt is sleeveless (i.e. it has holes for the arms), and its lower borderline is identical with the upper borderline of leg-covering garment.

Shorts are easier to design than a miniskirt: they follow the contour lines of the legs. We just need to pay attention, that the height is maintained throughout all frames.

Prior to designing boots we need to answer a similar question as with the shirt: are trousers worn above boots, or boots above trousers? If the answer to this is clear in your context, then there is the freedom to make the appropriate garment wider. If both shall be possible with the same design, you must follow the avatar's contour lines. Other than that, we again just need to pay attention to keep the upper line of the boots the same within all the frames.

Motion	Details	SE	NW
Shirt, Shorts and Boots	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Midi- and Maxiskirt

Since we already have the upper waist line (it is the same as with a miniskirt), the only thing left to do is to define the desired hemline for the longer skirts. Remember, that the circumference must allow for the large stride, with the consequence that there is some falling cloth when the feet are close together, causing a more elliptical bottom shape rather than the otherwise more straight hemlines.

Motion	Details	SE	NW
Tubetop, Maxiskirt and Shoes	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Shown here is the maxiskirt. To design a midiskirt with a length between a miniskirt and a maxiskirt, just define the hemline somewhat higher, e.g. approx. at the middle of the calves.

Gown, Dress and Robe

Now that we have all necessary border lines, we can play around and combine different garment to form new pieces. For example is it just a matter of omitting the waist line to obtain gowns etc. in any already defined length.

For the upper part we even have the choice between using the Shirt to obtain a classical dress covering the shoulders, and using a tubetop (connecting the two garments appropriately) to obtain a shoulder-free garment.

Note, however, that such a combined garment does include two body parts (the trunk and the legs). If it is the case, that these two parts most of the time act as a single unit (as in walking, standing), it is advisable to draw the garment as a single graphic only (as done here). Of course, you may choose to design an individual component for the upper and lower part each, if that is more convenient for you.

Since the terms gown, dress and robe are somewhat ambiguous, at least with respect to their length, we define for our purposes: a gown shall have the same hemline as a miniskirt, a dress' hemline then corresponds to a midiskirt and a robe's to the one of a maxiskirt.

Motion	Details	SE	NW
Gown, shoulders free, shoes	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)
Robe, shoulders covered, shoes	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Trousers

As before, also for trousers we need to answer the question, if they are to be worn above or below boots and (which) upper garment. Maybe you decide to allow both, depending on circumstances: in this case you either need to follow the avatar's contour lines (as shown in the following animations), or you need to design two different frame sets.

Motion	Details	SE	NW
Trousers, Shirt and Shoes	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)
Trousers underneath gown and boots	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Sweater, Jacket and Coat

So far the avatar's clothes did not involve the arms. There is a reason why we spared the design for this type of garment until now, though: it is an absolute requirement, that the parts covering the arms are drawn as separate components, because they are in different layers.

This fact is important: for example, if you plan to have your avatar carry any type of gear, the chance is high that parts of either arm (or both) will be partially or completely obscured by a such. If you do not want to take that into consideration for each frame when designing such gear, the order of layers must be painstakingly observed.

The actual design of a sweater, jacket or coat is not too difficult: the hemline must me defined, e.g. for a sweater below the waistline, i.e. a few below the shirt's hemline, even a bit lower for the jacket (but above the hemline for short gowns so that the latter still can be seen partially), and for a coat the hemline of the long dress may be used (unless you want the robe to be partially visible as well).

Furthermore keep in mind, that both jackets and coats usually are made from heavier materials, and thus they won't follow body outlines too well, i.e. we can straighten too round curves (which leads to the desired consequence, that the garment appears to be thicker). To a certain extent, this applies to sweaters as well (woven fabric has little elasticity).

It is convenient to design all frames for the parts covering the trunk and legs first, then work on a copy of these frames and add the two arms (which need to be saved separately!). It should be avoided to design the whole garment in one frames set with the goal of a later separation in mind: such would cause the torso part to be incomplete and would require later correction (at latest when the avatar is actually doing something else with its front arm).

The design of the body part of the actual sweater shown here is based on the shirt, its hem line being lowered by 1 to 2 pixels and some "added thickness" by straightening out some curves. The new hem line is not low enough to interfere with the different outlines of the legs: the same design can be re-used in all frames without any modification. Note, that we do the design with future arms in mind: no need to leave a hole for the arms in the garment's main part.

Similarly, the jacket is based on the sweater, because it shall be possible to wear a jacket over a sweater. The hem line was lowered once again, but not enough to cause different frames. Parts of the arms were made thicker.

Note: shown in the following animated GIFs are the actual compositions with all three parts.

Motion	Details	SE	NW
Sweater over Shorts, Boots	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)
Jacket over Shorts, Boots	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

To design a coat you basically extend the jacket down to the desired length. Note, that the materials used for coats usually dictate a quite stiff design: a coat's hemline won't be distorted much when walking.

Hair

(Reminder: the reasons to treat hair as garment were explained in article Components of Isometric Avatars, section "Interfering Clothes and hair".)

Hair must be designed as one of the last components, because it can affect many previously designed components, including clothes. For example does not too short hair fall over the avatar's shoulders, covering whatever garment exists there.

Long hair may interact with the front arm in an undesirable way: because the front arm will cover some of the long hair, it must be designed later. However, then there is the problem, that the arm's shoulder will cover hair which was designed to be over the shoulder. Should your design include very long hair, it would be best to use 2 components for the hair: one part not covering the shoulder at all, and an "extension part" in the desired length. Then the proper overlay order (i.e. extension part first which may be covered by the arm, then the arm including the shoulder, the shoulder possibly being covered by the hair, and ultimately the main hair) will do the job.

It is best to design hair without an outline, just with the intended color. An outline would would make the boundaries too hard and easily give the impression, that the avatar wears a helmet.

If the hair is not very short, it may be worth to vary the individual frames just a bit, in order to give the hair a somewhat dynamic look when the avatar is walking. However, if you do, be very moderate: just a pixel here and there will do – walking at a speed of 5 km/h does not imply a strong wind yet.

Motion	Details	SE	NW
Hair, middle, RGB color 0x800000	Frames 3-16 and 1-2 All with 60 ms/frame (16.67 Hz)

Above images are free to use without any restriction, provided that appropriate credits are given.

---

Outlook

With this fourth part the article Walking Isometric Avatars ends.

A future article will combine all the material presented in the previous 3 articles into an attempt to design a program to automatize some of the more tedious of the involved tasks.

---