Mondriano :: Foe design
Basic steps in the development of foe (rake) animation frames.
Requisites
Let’s start by listing properties we already know of:
• As of structure we have a crouched crawling humanoid quadruped viewed from above (pure top-down).
• It should have a larger size than the avatar (bounding box: 20×20 px), and a ratio of ~3:4, so we try 20×27 px.
• Its head mustn’t be as comically big as the avatar’s head, but should at least have 6 px (maybe 8 px) width to allow for placing 2 distinct bright white pixels for its glowing eyes.
• Its hands and feet should be positioned at the borders of the road (width: 6 px), as if grabbing it like a chameleon, pulling itself along the path.
• While the avatar’s walk sequence (4 frames: left leg, neutral, right leg, neutral) appears like a hasty pitter-patter, being appropriate for the cute little character, our rake as sneaky predator needs a much more refined movement, so we give it fourfold the temporal resolution: 16 frames. This yields a relatively slow (compared to the avatar), almost realistic limb motion, underlining its apparent resemblance to a chameleon.
Also, as mentioned in the specs, sprite frames move at a speed of 1 px per tick, thus we'll need a high resolution anyway, to avoid foot gliding effects in this case.
• Being in top-down view doesn’t require side view frames (e.g. back or front), thus a single crawl sequence (here: heading north) is sufficient; a sprite can simply be rotated (90°, 180°, 270°) by CSS as necessary.
Workflow
- In a first draft anchor points and lines for limb positions are defined.
- The resulting structure sheet is then scaled up, serving as template for elaborated design.
- Depending on required quality, drawings are made by the developer or external artists.
- Finally, the drawing is scaled down to its target size, optionally postprocessed, and inserted in the sprite sheet.
Construction
We’re sketching skeletal poses for the frames (20×27 px each) on a double size area (40×54 px, plus 4 px padding = 48×62), shown below at zoom 200% for better visibility.
A square dot in the top left corner represents the size of a target scale pixel, a top center rectangle depicts the road’s width (guiding horizontal hand/foot positioning).
Construction :: Body Part
The stable centered body part – consisting of head, backbone, shoulders and pelvis – is placed more to the north, because its forward leaning body needs less front space for the stretching arms than rear space for the pushing legs.
Construction :: Hand/foot positions
Due to symmetry, just one side needs to be constructed. Relevant elements will easily be copied, mirrored and complemented in the end.
First we estimate the total vertical range of hand positions, here shown as green bar, with extreme (frontmost and rearmost) positions inserted.
It spans 13 points/frames, which cover a touch phase, leaving the remaining 3 (of 16) frames for a lift (hand/foot repositioning) phase, which seems about right.
Limb cycle (here: left hand, right foot)
| Frame | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
|---|
| Phase | Touch | (Lift) |
|---|
Note that hands/feet should still be in contact with the road border during a lift phase, to make them appear gliding along the edge. This means there are no x-offsets in the hand/foot positions, which also simplifies our sketchings.
Let’s mark some points, but only odd-numbered ones to keep our overview from visual clogging. Missing points/frames can always be inserted later, via interpolation.
And, while we’re at it, let’s also mark analogous foot positions.
Construction :: Ellbow/knee positions
These are intuitively placed marks for the joints (ellbows and knees) in the respective ranges, split in odd/even depictions only for clarity (preventing points clumped together).
| 1 | 2 | 3 | 4 |
|---|
 |
 |
 |
 |
| 5 | 6 | 7 | 8 |
|---|
 |
 |
 |
 |
| 9 | 10 | 11 | 12 |
|---|
 |
 |
 |
 |
| 13 | 14 | 15 | 16 |
|---|
 |
 |
 |
 |
Now, with all milestones defined, the frame images can be set up, including interpolated points and mirrored side parts (shifted by 8 frames to create alternating motion).
| 1 | 2 | 3 | 4 |
|---|
 |
 |
 |
 |
| 5 | 6 | 7 | 8 |
|---|
 |
 |
 |
 |
| 9 | 10 | 11 | 12 |
|---|
 |
 |
 |
 |
| 13 | 14 | 15 | 16 |
|---|
 |
 |
 |
 |
After connecting the dots it looks technically usable at first glance, for sure as a chameleon, but the legs might need some prolongation to emphasize the rake’s anthropomorphic shape.
Construction :: Pose revision
| 1 | 2 | 3 | 4 |
|---|
 |
 |
 |
 |
| 5 | 6 | 7 | 8 |
|---|
 |
 |
 |
 |
| 9 | 10 | 11 | 12 |
|---|
 |
 |
 |
 |
| 13 | 14 | 15 | 16 |
|---|
 |
 |
 |
 |
Two quick tweaks:
• All leg areas have been stretched outwards, so the knees land just outside the old bounding box. This minor adjustment at least makes the entire leg 2…4 px (up to 14%) longer.
• Also, because even integers are preferable for technical reasons, the old odd frame height (27 px) has been reduced by 1 px (removed from the spine), effectively changing frame size from 20×27 to 22×26 px.
Composition
Now, with ready template frames at hand (they could also be zipped and sent to a designated graphic artist), it’s time for the drawing board. Upfront, as usual, a bit of research and analysis.
The smallest part, which holds characteristic information, is the Rake’s face, so why not begin with defining its head…
Composition :: Head/face
Cut out from the classic depiction, then rotated to get an upright version,
then isolated via hand-drawn mask.
... facial features should be preserved ...
Composition :: Rump & limbs
...