A test. The plan is a side-scrolling game along a forest road with
three battles on the way, where you equip your heroes before you set
off — so the first question worth answering is whether a
character built in the browser, with no artwork, can look like
something you would want to play.
She is drawn with WebGL, which hands the work to the graphics
card rather than the browser. Nothing here is a picture: every part of
her is a shape worked out from numbers when the page loads —
balls, tubes, cones and one bent tube that is her smile.
Why she looks drawn rather than modelled
Three things. The light wraps round her instead of stopping dead, so
there is no black side. The shading steps through a few soft bands
like painted cel art. And there is a black ink line round her
silhouette, which is a second copy of every shape, slightly swollen,
with the front faces removed. Switch it off with the
Ink line button to see how much work it is doing.
Walking on the spot
She never moves. The forest does. How fast the trees go past is
worked out from the length of her stride and how often she takes one,
so her feet cannot skate however far the tempo slider is pushed.
The legs are not a sine wave. They run on keyframed curves, the way
an animator would set them: the knee stays nearly straight through
the whole time the foot is on the ground and folds right up once it
leaves, and the ankle does something different at each end.
The hair
Not animated. Her ponytail hangs on a spring and gets shoved about by
whatever the rest of her did a moment earlier, so it always arrives
slightly late. It is two numbers, and it is most of what stops her
looking like clockwork. The cape does the same, more slowly, because
wool is heavier than hair.
The equipment
Sword, shield, cape and hat are shapes hung on named joints —
the hand, the chest, the head. The walk has never heard of any of
them, which is the point: it writes angles into a skeleton and the
gear comes along for the ride. A better sword is a different shape on
the same joint.
The art is temporary
All of it. The shapes live in one file and the skeleton lives in
another, and when there are proper drawings to use, the shapes file
is the only thing that gets thrown away.
Getting about
- Drag
- Swing the camera round her
- Wheel, or pinch
- Closer and further away
- Space, or P
- Pause
- Reset view
- Put the camera back where it started