Let's start this section with re-iterating the graphically relevant statements: An avatar starts and stops at the center of a tile. We need 16 pictures to advance the avatar 2 tiles. A double step starts out with the avatar's right leg. An avatar can be stopped after a step with either leg.

What does this all mean in detail?

Because we move 2 × 24 = 48 horizontal pixels with each double step, each of the 16 frames moves the avatar 48 / 16 = 3 horizontal pixels into the desired direction. In parallel, also a vertical movement takes place. However, because we have a 2:1 ratio, the total vertical movement will span only 2 × 12 = 24 vertical pixels, resulting in 24 / 16 = 1.5 vertical pixels per frame.

The seemingly disturbing odd vertical measure of 1.5 pixels is not really a disadvantage, though, because lifting a foot and swinging it through the air requires a vertical movement anyway: such a movement at times must be steeper and sometimes flatter, making the height difference negligible when it comes to half pixels (that's different in the horizontal, though, but "fortunately" there we have an integer number of pixels).

To some extent, the avatar's feet are the most prominent features for the intended motion: it is them who touch or leave the ground in an observable manner. If we got the feet right, the other components will fall in place practically automatically. But how do we get them right?

This section demonstrates a technique, how available 2-dimensional images can be transformed into the isometric system we are using.

Fortunately, there are studies in that field. For example does an http://www.harkema.ucla.edu/robotics.html UCLA study provide a trajectory line of a foot's ankle in normal forward locomotion (fig. 4, only the trajectory line is original, although scaled down; the text is not part of the original image).

Note, that the horizontal distance between the outermost bounds of the shown violet trajectory line amounts to approx. 0.66 m: this matches the definition of our step length (0.672 m) almost perfectly.

img/wia_fig05a.jpg Adjusted trajectory line Fig. 5a: Adjusting trajectory img/wia_fig05b.jpg Deblurred trajectory line Fig. 5b: Deblurring img/wia_fig05c.jpg Trajectory line for both feet Fig. 5c: Trajectory for both feet

The trajectory line shows the movement of a human's ankle from the side. What we need is an angle of arctan(1/2)=26.565°, though: therefore we distort the image accordingly.

Furthermore we know, that a vertical (and therefore also a horizontal) pixel represents 2.5 cm, but a pixel along an edge 2.8 cm: therefore the picture needs an additional foreshortening in teh$ horizontal direction to a new width of 2.5/2.8=89%.

The resulting picture measures 112 pixels in width, but the distance between the centers of two tiles 24 pixels only. This makes it necessary to scale down the already transformed picture to 21% of that size.

The picture is blurry because we worked with the original picture showing a multitude of trajectory lines. It's about time to give it a clear shape now: we just use the outermost line to get our final trajectory line (fig. 5b).

So far for one foot. Alas, our avatar has two of them. Let's have a look at our standing avatar once again. It is easy to see, that the tips of the two feet are apart from each other, namely 6 pixels horizontally and 3 pixels vertically.

To add the other foot's trajectory line, we simply add a copy of it, but translated by the same offsets (fig. 5c).

Now it already can be imagined, how the future motion with respect to the feet's ankles will look like: at any given point in time, one foot's ankle is somewhere on the red line, while the other one is located somewhere on the blue line.

It is obvious, that when both feet are firmly on the ground they must reach their largest distance (because at that point, continuation of the motion results in one leg approaching the other, thus reducing the distance). However, a double step consists of two steps, and so we have two situations: one in which the rear foot (on the red line) is the foot which is ahead of the other, and one in which the opposite is true.

By the way: at first glance it might not be similarly obvious, that the horizontal width between the two tips differ in the two situations: when the red foot is ahead and the blue one behind, then the distance between the two ankles measures 30 pixels; in the opposite case this distance is just 18 pixels. Similarly, the vertical distances differ as well: 12 pixels in the former case, but 18 pixels in the latter.

Now that we already have singled one of the prominent spots (largest feet distance), let's also locate the other one: when the feet are as close together as possible when walking. This must happen somewhere in the middle of the trajectory line. However, note, that one of the feet is on the ground, while the other one is not (obviously, as it is in the process of swinging by).

The implications are similar as with the other prominent spot: when it is the red foot which is on the ground, then the ankle of the blue foot is 6 pixels to the left of the red ankle and 3 pixels above it; in the other case the ankle of the red foot is 6 pixels to the right of the blue one and 9 pixels above it.

Now let's recall for a moment, why we preferred 8 frames over 12 frames for the intended motion ( walking_isometric_avatars_part_1.xml#A5 Part I, section "Frames and Animation" ): we said it would be easier to locate the positions we need, because we continuously can half the involved distances.

Well, that is, what we just did a first time: we first found the extreme positions and halved the overall distance to obtain another position pair. Let's repeat this process of halving each segment two more times in order to obtain all the points at which we want to take a snapshot of our avatar's ankles.

Fig. 6 shows the result of that process in a magnified picture of the trajectory lines: the interesting points are colored differently and are labeled with a digit. Notice, that identical digits belong to identical frames; e.g.: the red 1 and the blue 1 both belong to the same frame number 1.

You may have suspected already, that the numbering sequence is not coincidental, but was given in exactly this way on purpose. Here is the reason:

Assume, that the avatar is standing still on the center of a tile. This on our trajectory lines correspond to the red 8 for the left foot and the blue 4 for the right foot.

Remember, that we defined to always start out with the right foot? This means, that from the standing position the right foot lifts off and moves forward (red 1), dragging the attached leg and body with it, but still leaving the left foot on the ground. However, the left foot now appears to be behind (blue 1), because we want our avatar's body centered. Now it should be obvious, that both "1" reflect the positions of the first frame, both "2" the second frame, etc.

You might have asked yourself already: "of what use is it to move ankles?" Well, ankles are a fix turning point, even if we don't display them explicitely, as in giving them a highlighted color or similar. To the ankles continuations in both directions (i.e. feet and legs) are attached. If we get the ankles right, we won't have much difficulty to append the feet. This is what we are going to do right now.

First of all, it is clear, that the feet protrude forward into the walking direction. However, they do not form a plane parallel to the underground (at least not most of the time). Let's examine how the angle between a foot and a flat terrain changes during locomotion:

Once again, we only need to care for one foot: the other one will just be a transposed copy of the first. Let's draw the 8 pictures for the soles of the right foot (displayed magnified):

Currently it does make no sense to go any further before we discussed the legs: the outline of the foot depends from the angle the heel makes with the "attached" leg. We will complete the whole picture in the next section.

When discussing the movement of legs we also need to consider the upper points where the legs are attached (pelvis). In our avatar this is not just one point, but an axis at which ends the legs are attached.

When we compare the position "standing still" with the position in which both feet support the body at the maximum distance of a step, it becomes obvious, that the axis is closer to the ground in the latter. This will result in a vertical movement of the body. The height of that movement depends on the difference of the aperture angle between the legs. This angle is 0 during midstance and largest at the time of double feet support.

However, normal human walking employs the feet as well, in that the feet's rolling motion in fact lengthens the legs (i.e. the distance between the upper axis and the ground). Because the length changes (longer at max. angle), the vertical movement of the body is not as large as it would be without such lengthening. For a detailed analysis, see the study about the http://www.oandp.org/jpo/library/2001_03_064.asp vertical displacement of the body during walking by the American Academy of Orthotists and Prosthetists.

Important for a realistic representation of the movement are the observed facts of aforementioned study:

Therefore our avatar will have a moving body. In the vertical, a pixel represents 2.5 cm, and thus 5 cm translate to a vertical movement of 2 pixels, i.e., at the point at which both feet have the maximum distance, the body will be 2 pixels lower when compared to midstance (or standing still).

The same study also provides useful rotation angles for the knee's flexion during a step (fig. 8, reconstructed from a picture in aforementioned document).

It can be seen, that the stance phase (when the foot has contact with the underground) amounts to 60% of the whole cycle, whereas the swing phase is done in the remaining 40%.

Also shown in the figure is the relative vertical displacement of the body: the maximum occurs when the feet are close together.

Now we know enough to put it all together and create a series of initially 8 pictures (rather than the final 16), involving both feet and legs.

Note, that once a foot has made contact with the floor, it stays on that spot until the foot is raised again. This may sound trivial, but it has implications on our design: since we partition the whole cycle of a double step into (for now) 8 pictures, we have 4 pictures per single step, in which we advance a total of 24 pixels. Within the stance phase, the foot with ground contact apparently slides backwards, and this apparent sliding must be synchronized with the apparent sliding of the landscape, i.e. must have the same speed. In other words: we need 4 sliding phases at 6 pixels each.

A single sliding phase means, that we need 2 pictures with foot contact (to represent the beginning and the ending of the sliding motion). Consequently we need 5 pictures to represent 4 sliding phases: fig. 9 shows ground contact in 5 of the 8 positions, and only 3 pictures show the foot off the ground. This is perfect, because the stance phase (with foot contact) lasts about 60%, and 5/8=62.5% is the closest we can come to that.

Also note, that there is just one brief moment between each single step at which both feet support the body (start = end position, plus the middle position): the distance between the two feet must measure 24 pixels, since that is what we move in one single step.

So far we have drafted only 8 of the 16 needed positions. The missing ones will be interpolated between each two adjacent ones, taking into consideration all of the parameters knee angle, foot angles, vertical body displacement and ankle trajectory line.

For the visualization, we use the phases identified above in section walking_isometric_avatars_part_1.xml#A3 Part I , section "Biomechanics and Phases", beginning with phase 0 ("standing still"). Note, however, that the start of the motion lies in the middle of phase 1: the first two frames serve to complete a previous step with the right leg. This means, that the first displayed frame must be frame number 3.

Similarly, the end of a step is possible just after the first frame of phase 1 (i.e., after frame number 1) or then after the first frame of phase 3 (i.e., after frame number 9). Both positions allow for a stop by displaying the standing still frame (phase 0) instead of frame number 2 or 10, resp.

In other words: a complete cycle runs from frame 3 to frame 16 and from frame 1 to frame 2 (a total of 16 frames), from where the next cycle repeats with frame 3; but when the avatar has to come to a halt, frame 2 is replaced with frame 0. If the avatar already must halt in the middle of the cycle, it is frame 10 which is replaced with frame 0.

The even-numbered sketches in the column labeled "Positions of body parts" are copies from fig. 9, the odd-numbered sketches are interpolations between two adjacent sketches (considering the verbose parameters next to the according sketch). (Of course, the drafts don't need to be perfect: they just serve the purpose to envisage the descriptions.)

Technique When designing the images for the different frames, it is a very good idea to start out with the feet's soles as depicted in fig. 7. To keep track of the apparent motion, it also helps to retain the tile's edges on which the avatar "moves": they facilitate orientation. An other facilitation can be achieved if you color adjacent tiles differently.

As can be seen in the column labeled "Outline", I actually used "two sets of feet". The red pair is always parallel and reflects, where the feet would be if our avatar would simply slide over the underground. Then there in some of the images is one or two feet shown as blue lines: they are there when a foot touches the ground. Once they touched down, they need to retain their position relative to the tile, thus participating in the apparent sliding motion.

The second fix point after the feet is the body (including head). Drop it into place. Of course, the body needs to be kept at the same horizontal offset measured from the left border of the surrounding box. The vertical offset does vary slightly though (by 2 pixels), as outlined above.

Save the outline images, consisting only of the body (incl. the head) and the 2 pairs of feet positions: they will be needed again when we design walking into the opposite direction.

From the outline it's not too far to the final images: it is mainly a matter of getting the position of the knees right, observing the angle: peek at the little drafts while doing so. The legs then will fall into place practically automatically.

Following are some animated GIFs, composed from above artwork, still without any corrections (which demonstrates that the technique will do acceptably if it is followed step by step).

Note Certainly, Pixie might need some corrections here and there: she walks quite "rural". (Probably the knees are lifted a tad too high, and the feet could approach ground more smoothly.) On the other side, the intended 5 km/h is a quite fast walking speed, close to marching, actually. Well, you have the technique: correct whatever you need to. If you manage a more fluent design, let me know and I might gladly link to it.

If you do not have a tool to create animated GIFs and if you run Windows, I can recommend http://www.whitsoftdev.com/unfreez/ UnFREEz (WhitSoft Developments): it is a simple and very lean tool, and it's s freeware.

By the way: to convert your BMP images into GIF images under Windows, just drag the bmp file into Microsoft Photo Editor and save as a GIF file. (Don't use Microsoft Paint for this task: the quality may suffer unacceptably.)

As pointed out already, asymmetric motions can not be mirrored directly. Well, they can, of course, but in the case of our walking avatar, locomotion would start out with the left leg rather than with the right leg.

However, with that particular motion we are somewhat lucky, as it does not really consist of an asymmetric motion, but of two sub-series involving 8 pictures for the right leg and 8 pictures for the left leg. We can look at the whole motion as being a periodic wave: at a phase angle of 0° we have the animations as created above, and at a such of 180° we achieve the desired start with the right leg even for mirrored frames.

The following table lists the frame numbers of the mirrored images and associates them with the unmirrored frame numbers:

These are the according animations:

The first of the two missing orientations (towards the NW and NE) can not be mirrored: we actually need to design 16 new frames. However, we can make use of the already drafted feet positions (column "Outline" in the large table of above section #A4 "Designing the Frames" .

We just need to replace the body/head component with its corresponding view from behind and re-arrange the frame numbers such, that the right leg apparently starts out moving towards the NW rather than to the SE. N ote that we basically just play the sequence in backward order: previously, for the motion into the SE direction, we started out with frame 3. Three frames later the swinging right leg touches ground again. The same is true for a movement into the NW direction, only that we need to start out with frame 9: three tiles later (i.e., frame 6, since we play the sequence backward), the right foot touches down as well.

It is easiest to copy aforementioned table and adjust it where it is needed. In the new table, let's retain the same frame numbering as above: doing so allows us to keep the descriptions in the column "Positions of body parts" unchanged. (However, the accompanying draft of the legs positions should be mirrored to better reflect the new walking direction towards the NW.) It also allows us keep the pointed out start and stop frames without any changes.

The coordinates given in the column "Displacement" need to change, though, since now we move the avatar to the left rather than to the right, and upward rather than downward. However, the absolute distances per frame won't change. This means, that we just need to change the sign of both coordinates.

Like before, we start with the outline images. Note, that the avatar is shown from behind this time, and that the legs are swapped (in the SE direction the right leg was the one closer to us, now in the NW orientation it is the one farther away). For this reason, we start with what was frame 10 before (replacing former frame 2) and work our way backwards towards frame 1, then resuming with frame 16 to frame 11: this gives us the proper foot positions.

Be careful, though, it is not a 1:1 transition, as the frames in which the feet have ground contact are slightly different (e.g.: formerly, 5 frames after frame 2, i.e. frame 7, still shows ground contact for the left foot; now, 5 frames "after" frame 10, i.e. frame 5, shows the left foot already lift off).

Eventually also the animated GIFs as per the technique described earlier.

And the animated gifs after mirroring and shifting the phase, as explained above in Southward motion.