Motion Parameters
Motion and Relativity
Motion is relative. Consider the following scenarios:
- An avatar turns up in some corner of the screen and walks along a diagonal across the screen: the landscape does not change due to that motion (apart from the small parts alternately being obscured and re-exposed by the avatar's shape).
- An avatar which represents the observer in front of the screen walks over a landscape: in this case you don't expect the avatar to move out of the screen's center (the focus), instead, you expect the landscape to scroll below the avatar, keeping the avatar centered and exposing new parts of the landscape as long as the movement continues.
- And then there is a combination of the two previous cases: while "your" (centered) avatar walks, causing the landscape to scroll, there may be other avatars moving over the landscape, seemingly at a higher speed if they approach from the opposite direction, or seemingly at no different speed than your own avatar, if they walk alongside your avatar (at the same speed).
In this article we concentrate on the second case. We assume, that an avatar is to represent you, the reader sitting in front of your screen. This avatar will not change its position: it will remain centered at a particular spot. The notion of motion will be achieved
- by scrolling a rudimentary landscape below the avatar, and
- by modifying the appropriate components of your avatar.
Scrolling the Landscape
In the previous articles of this series our avatars stood on a single tile within an imagined landscape. Because the avatar was static and thus immobile this was working well, but now we are going to move the avatar and need some more space.
Fig. 1: Creating the illusion of movement
As the avatar walks, the tile it stands on will be scrolled away into the opposite walking direction ("behind" the avatar), and simultaneously a new tile will appear from the direction into which it walks ("in front" of the avatar).
Such, the avatar's imaginary point of gravity at any given time is above just one specific tile, although its body (depending on the avatar body's overall screen width) can involve several tiles.
In order to discuss the needed tasks, our landscape needs to be expanded to a total of 3 tiles, neatly lined up one after each other: a "central" tile and one tile each behind and in front of the avatar.
Inevitably some questions arise: what does "moving the landscape" mean? How much do we need to move it, how many times? In what overall time? And what does movement mean for the avatar? These questions and some more are answered in the next sections. We begin with answering the question "what exactly is a step?"
Biomechanics and Phases
When walking, humans follow a technique called the
double pendulum: one leg is raised from the surface and swings forward, until the heel eventually touches the surface in some distance from the origin. The leg then rolls through until it reaches the toe, at which point the process is repeated for the other leg.
Notice, that during such a motion one leg always is in touch with the ground (this is different when running, which is why we can not just make the avatar "walk faster" to have it running).
Now let's assume, that our avatar already is in the process of walking, i.e. it is not standing still. What would make up a repeatable motion? It obviously is not a single step, which would involve the movement of just one leg: we must consider the movement of both legs, until they are in the same position again with which we started out. From there we can repeat that motion over and over again to create the illusion of continuous locomotion.
Okay, we need to examine a "double step" rather than just a single step. But what does this mean in terms of effective distances? How many pixels does such a double step span?
Let's look at an individual tile again: in article
Introduction to Isometric Avatars, section "Dimensions and Measurements" we already anticipated motion and defined the length of a tile's edge (the diagonal of a bounding rectangle with dimensions 24 × 12 pixels) to represent a single step length (or more accurately, exactly 67.2 cm).
Fig. 2: Double step
spanning two tiles
Therefore, the answer seems to be obvious: the motion we need to examine spans exactly two tiles, one tile for each leg's step.
However, there's a caveat. Should we indeed plan our design based on above observation alone, we would needlessly restrict ourselves too much: we could start and stop such a motion only on every second tile. The complication arises because our inital assumption started out with an already walking avatar, and we implied the avatar is to walk forever. Of course, such needs not necessarily to be the case: at some point the avatar starts to walk, and at some point it ends such a motion. Let's have a closer look at these two events.
The transition from standing still to walking at first glance could imply, that we just need to start out from a double step's middle point. However, this would be wrong: having the legs above the same spot in the x/z plane does not imply, that the avatar does look the same. During locomotion, one of the legs does not touch the ground and is in the process of swinging by the other leg. Similarly, stopping a walk calls for a motion which ends in both legs touching the ground next to each other.
Starting the locomotion in some aspect is easier than stopping it: we can freely decide with which leg we want to start out the locomotion: it does not really matter, if that's the right or the left one. Note, however, that this decision is asymmetric: if you for some reason want or need to start out always with the same leg, then you can not mirror two of the avatar's orientations to obtain the other two orientations.
Ending the motion, on the other hand, needs two individual transitions: whatever leg happens to be the one behind the avatar's mass center needs to come to a halt by moving it next to the other leg.
The good news is, that we can handle the transitions without additional work, if we plan the motions carefully enough.
Let's sum up the identified phases:
| Phase |
Name |
Activity at phase start |
Activity at phase end |
Possible continuation at phase end |
| 0 |
Standing still |
Standing still |
Standing still |
0 or 1 |
| 1 |
Advancing right leg |
Feet close together while doing right foot step (also first step after standing still) |
End position right foot step = before start position left foot step |
2 |
| 2 |
Following suit left leg |
Start position left foot step |
Before feet close while doing left foot step (near tile's center) |
3 or 0 |
| 3 |
Advancing left leg |
Feet close together while doing right foot step |
End position left foot step = before start position right foot step |
4 |
| 4 |
Following suit right leg |
Start position right foot step |
Before feet close while doing right foot step (near tile's center) |
1 or 0 |
Distance, Time and Speed
Now that we know more about what phases we need, let's talk about how the individual phases shall be displayed to obtain the illusion of motion.
First of all, we need to clarify what real environment facts we want to simulate with such a motion. Well, walking means to relocate an object (our avatar) from one place to an other in a given amount of time. The involved physical properties thus are distance and time, or, more precisely, distance per time. In other words: speed.
Physically, we measure speed in meters per second (m/s). One of the two units is already known: we know, that the distance between two adjacent tiles represents 67.2 cm (or 0.672 m). What we need to find out, is the time needed to cover that distance. For this we need to research a human's average walking speed.
Alas, there is no such thing like a standardized walking speed for humans: the individual speed depends on many circumstances, such as body weight, height, age, cultural environment and last, but not least, simply on the motivation for the walk. The literature gives varying indications in the range of usually between 1 and 1.3 m/s. However, it can be found empirically, that a walking speed of around 3 km/h (3,000 m/3,600 s = 0.83 m/s) is perceived as slow by most people (close to strolling actually), whereas 6 km/h (1.67 m/s) is mainly regarded as fast (as in military marching). For our purposes, let's start out with the given range of 4.5±1.5 km/h (1.25±0.42 m/s) and see, if we can find a speed suitable enough to create the illusion of motion.
At 1.25±0.42 m/s we cover 1m in 0.9±0.3s, and a tile measuring 0.672m in 0.6±0.2s.
Frames and Animation
We know the physical constraints by now, but this does not tell us anything yet about the process of animating a motion. To do so, we need to discuss animation first.
An animation in the end is nothing else than an optical illusion due to the persistence of our eyes: show pictures fast enough and we will perceive the individual pictures as a continuous movement. Such an individual picture is called a
frame and the number of pictures displayed in any second is known as the
frame rate (expressed in Hertz, for short Hz = occurrences per second).
If we'd strive for a perfect quality, the frame rate would need to be very high, because below a certain threshold the sequence of pictures may be perceived as flickering. This threshold depends from many variables, including a person's fatigue, but in general it is assumed to be around 75 Hz. However, for the purpose of simulating motion the threshold is significantly lower and usually taken to be approximately 16 Hz: this is the value which we want to come close to. (TV cameras usually operate with 24, 25 or 30 Hz, depending on the used system.)
Now let's see, how we can transform our avatar's locomotion into frames, i.e. to take a series of snapshots of the particular movement. Of course, it is of a big advantage, if we can split our tile into equal portions: such we can guarantee that equal durations are needed for the same distance. It is exactly for this reason that we defined our tiles to have an edge length of 24 pixels: 24 is divisible by 2, 3, 4, 6, 8 and 12, such giving us several choices to select from. The subdivision should not consist of a very small number of individual frames, since this would appear pretty bulky. Thus, subdividing the tiles into 2, 3 or even 4 parts only belongs not to the best of all choices. Obviously, 12 or even 24 would be the best choices, but recall, that this comes at a price: we would need to draw 12 or 24 pictures per tile, i.e. 24 or 48 pictures for a double step. But, is this needed? Let's see.
We want to catch a motion spanning a double step, which equals a distance of 2 × 0.672 m = 1.344 m. Our avatar shall move with a speed of 0.6±0.2s per tile. Therefore we have 2 × 0.6±0.2s = 1.2±0.4s of time for the whole motion.
Let's check what subdivisions yield what frame rates:
| Subdivision of tile |
Pictures/tile |
Time per picture |
Frame rate
fast...slow (normal) |
| 1/6 (every 4th horiz. pixel) |
6 |
0.6±0.2s / 6 = 0.1±0.033s |
15...7.5 (10) Hz |
| 1/8 (every 3rd horiz. pixel) |
8 |
0.6±0.2s / 8 = 0.075±0.025s |
20...10 (13.33) Hz |
| 1/12 (every 2nd horiz. pixel) |
12 |
0.6±0.2s / 12 = 0.05±0.017s |
30...15 (20) Hz |
| 1/24 (every horiz. pixel) |
24 |
0.6±0.2s / 24 = 0.025±0.008s |
60...30 (40) Hz |
As outlined above, our goal is to achieve approx. 16 Hz. A subdivision of the tile into segments of 1/24 thus is over-engineering, a such of 1/6 definitely not good enough. Remain the choices of 1/12 (12 pictures per tile or 24 for a double step) and 1/8 (8 pictures per tile or 16 for a double step).
Whereas 1/12 is acceptable in the whole speed range, 1/8 is acceptable only if we don't use the slow end within the given range. For example would a speed of 5 km/h = 5,000 m/3,600 s = 1.39 m/s = 0.72 s/m = 0.484 s/tile yield a frame rate of 0.484 s/tile = 0.0605 s/8th tile = 16.53 Hz. This value is absolutely acceptable and can be achieved when we have the avatar walk at a speed of 5 km/h (i.e., displaying each frame for 60.5 ms).
Preferring 1/8 over 1/12 has an additional advantage over the obvious one (which is less pictures and thus less work): because 8 is a power of 2, we can easily separate the motion between any two tiles into 2 halves, which we both separate again into 2 halves, repeating this process again with the 4 resulting quarters. You will see, that halving will help us tremendously in finding the correct positions in our designs.
Summary
The previous subsections discussed, how we can find the number of pictures into which we need to partition an arbitrary motion, and for how long we need to show each such picture in order to ensure a fluent motion, while at the same time we attempt to avoid over-engineering.
These numbers ultimately depend on the intended (perceived) speed of the object and the desired animation quality. For the task at hand the requirements were:
- We want a frame rate of at least 16 Hz.
- We want a perceived walking speed of no less than 5 km/h (1.39 m/s).
Above requirements lead to the following consequences:
- We represent the avatar's locomotion with 8 pictures per tile (with a total of 16 pictures for a double step).
- We display each picture for a duration of 0.06 seconds.
Outlook
Designing the required frames will be the task of the next three parts. Parts II and III will deal with designing the limbs, while part IV will take care of garment. Proceed with
Part II (Designing Legs).