Poses, one after another

Posen, eine nach der anderen

The hero's model has a skeleton: invisible bones inside it. Turn a bone, and the skin around it follows.

Das Modell des Helden hat ein Skelett: unsichtbare Knochen darin. Dreh einen Knochen, und die Haut drumherum folgt.

An animation, called a clip, is a list of poses: where every bone points, 30 times a second. Play them one after another, and the hero walks. Like a flipbook again, but for bones.

Eine Animation, ein sogenannter Clip, ist eine Liste von Posen: wohin jeder Knochen zeigt, 30-mal pro Sekunde. Spiel sie nacheinander ab, und der Held läuft. Wieder wie ein Daumenkino, aber für Knochen.

The hero has a whole set of clips: standing, walking, running, jumping, falling, landing, swimming, climbing, swinging the sword, getting up...

Der Held hat einen ganzen Satz Clips: Stehen, Gehen, Rennen, Springen, Fallen, Landen, Schwimmen, Klettern, Schwerthieb, Aufstehen...

How bones and clips are made Wie Knochen und Clips gemacht werden

The hard part

Der schwierige Teil

Playing one clip is easy. But a game is never just one clip:

Einen Clip abzuspielen ist leicht. Aber ein Spiel ist nie nur ein Clip:

  • You speed up slowly from standing to running. Which clip is that?
  • Du wirst langsam schneller, vom Stehen zum Rennen. Welcher Clip ist das?
  • You run at any speed. The clip was made for one speed.
  • Du rennst in jedem Tempo. Der Clip wurde für ein Tempo gemacht.
  • You land in the middle of a run, fall into water, get knocked over...
  • Du landest mitten im Rennen, fällst ins Wasser, wirst umgeworfen...

That's what this room is about: making a few clips look like a body that moves.

Darum geht es in diesem Raum: aus ein paar Clips einen Körper zu machen, der sich bewegt.

Try it: mixing walk and run

Probier es: Gehen und Rennen mischen

The game doesn't switch from walking to running. It mixes them. Every bone gets a bit of the walk pose and a bit of the run pose, by weights:

Das Spiel schaltet nicht vom Gehen aufs Rennen um. Es mischt sie. Jeder Knochen bekommt ein bisschen von der Geh-Pose und ein bisschen von der Renn-Pose, nach Gewichten:

  • standing still: all idle,
  • Stillstehen: alles Stehen,
  • walking speed (1.9 cells a second): all walk,
  • Gehtempo (1,9 Zellen pro Sekunde): alles Gehen,
  • full speed (2.8): all run,
  • volles Tempo (2,8): alles Rennen,
  • in between: some of each.
  • dazwischen: von jedem etwas.

Game makers call this a blend tree. Move the speed slowly and watch the bars. Then switch off "the cycle follows the speed".

Spielemacher nennen das einen Blend Tree (Mischbaum). Beweg das Tempo langsam und schau auf die Balken. Dann schalte "der Zyklus folgt dem Tempo" aus.

Feet that don't slide

Füße, die nicht rutschen

If a clip plays at its own pace while the hero moves at a different one, the feet skate over the ground. People notice that at once, even if they can't say what's wrong.

Wenn ein Clip in seinem eigenen Tempo spielt, während sich der Held in einem anderen bewegt, schlittern die Füße über den Boden. Das merken Leute sofort, auch wenn sie nicht sagen können, was nicht stimmt.

So the game moves the clip forward by the distance walked, not by the time that passed. One full cycle (two steps) for every stride length. Stand still, and the cycle stops too.

Darum schiebt das Spiel den Clip um die gelaufene Strecke weiter, nicht um die vergangene Zeit. Ein ganzer Zyklus (zwei Schritte) für jede Schrittlänge. Steh still, und der Zyklus hält auch an.

One more trick: the walk clip looks best at 1.4 cells a second, the run clip at 2.8. When the hero is faster than its clip, the game doesn't play the clip faster (that looks like a cartoon). It swings the legs a bit further instead: longer strides.

Noch ein Trick: Der Geh-Clip sieht bei 1,4 Zellen pro Sekunde am besten aus, der Renn-Clip bei 2,8. Wenn der Held schneller ist als sein Clip, spielt das Spiel den Clip nicht schneller ab (das sieht aus wie ein Zeichentrickfilm). Es schwingt die Beine stattdessen etwas weiter: längere Schritte.


      
For both thighs and both upper arms: start from the standing pose, go to the clip's pose, and then keep going a bit further along the same curve. slerp is how you mix two rotations; a number above 1 goes past the second one.

      
Für beide Oberschenkel und beide Oberarme: Fang bei der Steh-Pose an, geh zur Pose des Clips und dann noch ein Stück weiter auf derselben Kurve. slerp ist, wie man zwei Drehungen mischt; eine Zahl über 1 geht über die zweite hinaus.

      A real change: matching the run
      Eine echte Änderung: das Rennen anpassen
    

  






  
One mode at a time

  
Ein Modus zur Zeit

  

    

      
Walking and running mix. But jumping, falling and swimming don't mix with walking. So the animation has modes, and it's always in exactly one of them:

      
Gehen und Rennen mischen sich. Aber Springen, Fallen und Schwimmen mischen sich nicht mit Gehen. Darum hat die Animation Modi, und sie ist immer in genau einem davon:

      

        
locoon the ground: standing, walking, running (mixed) auf dem Boden: stehen, gehen, rennen (gemischt)

        
jump → falla jump turns into falling when you start going down ein Sprung wird zum Fallen, sobald es abwärts geht

        
landa short landing, then back to loco eine kurze Landung, dann zurück zu loco

        
sitlanded faster than 10: you fall onto your bottom schneller gelandet als 10: du fällst auf den Hintern

        
swimin water: treading water, or paddling (mixed by speed) im Wasser: Wasser treten oder paddeln (nach Tempo gemischt)

        
climbon a ladder; the cycle runs backwards going down auf einer Leiter; beim Runtergehen läuft der Zyklus rückwärts

      

    

    

      
That's a state machine, just like a monster's brain. Every frame, it asks: did the hero jump? Land? Fall into water? And moves to the right mode.

      
Das ist ein Zustandsautomat, genau wie das Gehirn eines Monsters. In jedem Bild fragt er: Ist der Held gesprungen? Gelandet? Ins Wasser gefallen? Und wechselt in den passenden Modus.

      
The switch is never instant: the old clip fades out and the new one fades in, within a fraction of a second. Landing switches fast, swimming slowly. It's the same "catch up a little every frame" trick as the camera.

      
Der Wechsel passiert nie sofort: Der alte Clip blendet aus und der neue ein, in einem Bruchteil einer Sekunde. Landen wechselt schnell, Schwimmen langsam. Es ist derselbe Trick "jedes Bild ein bisschen aufholen" wie bei der Kamera.

      A monster's state machine
      Der Zustandsautomat eines Monsters
      Catching up, a little every frame
      Jedes Bild ein bisschen aufholen
    

  






  
From floppy to standing

  
Von schlabbrig zu stehend

  

    

      
When the hero is knocked over, no clip plays at all: the ragdoll's physics moves the bones. When it stops, the hero gets up with a clip: one for lying on the back, one for lying on the front.

      
Wenn der Held umgeworfen wird, spielt gar kein Clip: Die Physik der Ragdoll bewegt die Knochen. Wenn sie liegen bleibt, steht der Held mit einem Clip auf: einem für auf dem Rücken liegen, einem für auf dem Bauch.

      
But the ragdoll can end up in any pose: an arm twisted here, a leg there. The clip starts from its pose. Switching straight to the clip would make the body jump.

      
Aber die Ragdoll kann in jeder Pose landen: ein Arm hier verdreht, ein Bein dort. Der Clip fängt bei seiner Pose an. Direkt auf den Clip umzuschalten würde den Körper springen lassen.

      
So the game first remembers the ragdoll's pose, and then morphs from it into the clip, bone by bone, in 0.3 seconds. Too quick to notice, slow enough not to jump.

      
Darum merkt sich das Spiel erst die Pose der Ragdoll und verwandelt sie dann Knochen für Knochen in den Clip, in 0,3 Sekunden. Zu schnell, um es zu bemerken, langsam genug, um nicht zu springen.

      
The get-up clips also play 1.35 times faster than they were made. In a fight, nobody wants to wait.

      
Die Aufsteh-Clips spielen außerdem 1,35-mal schneller, als sie gemacht wurden. Im Kampf will niemand warten.

    

    

      

      
k goes smoothly from 1 to 0 in MORPH seconds: "how much of the ragdoll is left". Every bone is turned that much back towards where the ragdoll left it. At 0 the morph is done, and only the clip is left.

      
k geht in MORPH Sekunden sanft von 1 auf 0: "wie viel von der Ragdoll noch übrig ist". Jeder Knochen wird so weit zurück dorthin gedreht, wo die Ragdoll ihn gelassen hat. Bei 0 ist die Verwandlung fertig, und nur der Clip ist übrig.

      The ragdoll
      Die Ragdoll
    

  






  
Footsteps on the beat

  
Schritte im Takt

  

    

      
You can hear the hero walk. When does a step sound? Not on a timer: then the sound would drift away from the feet.

      
Du hörst den Helden gehen. Wann klingt ein Schritt? Nicht nach einer Uhr: Dann würde der Klang von den Füßen wegdriften.

      
The game measured in the clips where in the cycle each foot touches the ground. Every frame, it checks: did the cycle just pass a foot's touchdown? Then a step plays, made for the ground under that foot: grass, stone, wood, snow, mud.

      
Das Spiel hat in den Clips gemessen, wo im Zyklus jeder Fuß den Boden berührt. In jedem Bild prüft es: Ist der Zyklus gerade an der Landung eines Fußes vorbeigekommen? Dann spielt ein Schritt, passend zum Boden unter diesem Fuß: Gras, Stein, Holz, Schnee, Matsch.

      
That's why the footsteps are updated right after the animation in the conductor's list: they listen to the cycle the animator just moved.

      
Darum werden die Schritte in der Liste des Dirigenten direkt nach der Animation aktualisiert: Sie hören auf den Zyklus, den der Animator gerade weitergeschoben hat.

    

    

      

      How a footstep sound is made
      Wie ein Schrittgeräusch gemacht wird
    

  






  
The real code: walk, run, or both

  
Der echte Code: gehen, rennen oder beides

  

    
if (mode === 'loco') {
  // idle -> walk -> run by speed with one shared phase; the cycle plays at the pace of
  // WALK_ANIM / RUN_ANIM and longer strides make up the rest of the distance
  const loco = smooth(0.05, 0.35, speed), t = clamp((speed - WALK_SPEED) / (RUN_SPEED - WALK_SPEED), 0, 1);
  T.idle = 1 - loco; T.walk = loco * (1 - t); T.run = loco * t;
  const move = WALK_SPEED + (RUN_SPEED - WALK_SPEED) * t, anim = WALK_ANIM + (RUN_ANIM - WALK_ANIM) * t;
  const stride = character.walkStride + (character.runStride - character.walkStride) * t;
  phase = (phase + dt * speed * (anim / move) / stride) % 1;
  blend.stretch = move / anim; blend.run = t;
}

    

      
    
        
  • loco: 0 when standing, 1 when moving. smooth makes it go gently from 0 to 1 between the speeds 0.05 and 0.35.
    • 
        
  • loco: 0 beim Stehen, 1 beim Bewegen. smooth lässt es zwischen den Tempos 0,05 und 0,35 sanft von 0 auf 1 gehen.
    • 
        
  • t: how far between walking and running speed, from 0 to 1. clamp keeps it in between.
    • 
        
  • t: wie weit zwischen Geh- und Renntempo, von 0 bis 1. clamp hält es dazwischen.
    • 
        
  • T.idle, T.walk, T.run: the weights. They always add up to 1.
    • 
        
  • T.idle, T.walk, T.run: die Gewichte. Sie ergeben zusammen immer 1.
    • 
        
  • phase: where in the cycle we are, from 0 to 1. It moves by the distance walked (dt * speed), divided by the stride. % 1 starts it over at 1.
    • 
        
  • phase: wo im Zyklus wir sind, von 0 bis 1. Es bewegt sich um die gelaufene Strecke (dt * speed), geteilt durch die Schrittlänge. % 1 fängt bei 1 wieder von vorn an.
    • 
        
  • blend.stretch: how much longer the strides are than in the clip.
    • 
        
  • blend.stretch: um wie viel die Schritte länger sind als im Clip.
    • 
      

    

  






  
The real code: choosing the mode

  
Der echte Code: den Modus wählen

  

    

    

      
A long list of ifs, read from top to bottom. Later ones can change what earlier ones decided, so the order matters:

      
Eine lange Liste von ifs, von oben nach unten gelesen. Spätere können ändern, was frühere entschieden haben, darum ist die Reihenfolge wichtig:

      
    
        
  • A ladder comes first and wins over everything.
    • 
        
  • Eine Leiter kommt zuerst und gewinnt gegen alles.
    • 
        
  • p.jumpCount !== seen.jump: the body counts its jumps, the animation remembers the last count it saw. Different? A new jump happened.
    • 
        
  • p.jumpCount !== seen.jump: Der Körper zählt seine Sprünge, die Animation merkt sich die letzte Zahl, die sie gesehen hat. Anders? Ein neuer Sprung ist passiert.
    • 
        
  • Landing hard means sit, landing softly land.
    • 
        
  • Hart landen heißt sit, sanft landen land.
    • 
        
  • modeT counts how long we've been in a mode: a landing ends after half a second, or sooner if you walk on.
    • 
        
  • modeT zählt, wie lange wir schon in einem Modus sind: Eine Landung endet nach einer halben Sekunde, oder früher, wenn du weitergehst.
    • 
        
  • Water comes last, so it wins over everything except the start of a jump out of it.
    • 
        
  • Wasser kommt zuletzt, darum gewinnt es gegen alles außer den Anfang eines Sprungs hinaus.
    • 
      

    

  






  
Making it feel alive

  
Damit es lebendig wirkt

  
    
    
  1. Mix, don't switch: walk and run blend by speed.
    2. 
    
  2. Mischen, nicht umschalten: Gehen und Rennen werden nach Tempo gemischt.
    3. 
    
  3. Follow the ground: the cycle moves by distance, so feet stay planted.
    4. 
    
  4. Dem Boden folgen: Der Zyklus bewegt sich nach Strecke, damit die Füße stehen bleiben.
    5. 
    
  5. One mode at a time, with soft fades between them.
    6. 
    
  6. Ein Modus zur Zeit, mit weichen Übergängen dazwischen.
    7. 
    
  7. Never jump: morph from wherever the body is.
    8. 
    
  8. Nie springen: Verwandle von dort aus, wo der Körper gerade ist.
    9. 
    
  9. Sound on the beat: steps follow the feet, not a clock.
    10. 
    
  10. Klang im Takt: Schritte folgen den Füßen, nicht einer Uhr.
    11.