Tutorials · Animation and Cutscenes · Chapter 2

A state machine

A graph for the knight

1. Select knight, click Add component and choose StateMachineComponent. Its Graph is empty.
2. Click the Graph tab, in the row with Viewport and Sprite sheet at the top of the window. It says there is no graph yet.
3. Click New state machine. It writes art/knight.asm beside art/knight.anim, with one state, idle, that plays the clip idle, and puts it in the State Machine’s Graph.

Graph

The State Machine’s Graph: the .asm file that decides which clip the node’s Animated Sprite plays. Here art/knight.asm. Empty, the State Machine does nothing, and the Graph tab offers to make one. A graph names clips of the animation beside it, so knight.asm goes next to knight.anim and works for every node that plays that animation.

States, and a state inside a state

1. In the row under the Graph tab’s bar, type run into the State box and run into the Clip box, and press Add state. A box called run appears, with its clip written under its name. (Left empty, Clip takes the state’s own name, which is the same here.)
2. Add land the same way, with the clip land.
3. Type air into the State box, leave Clip empty, and press Add sub-graph. The tab opens the new graph, one level down: the bar above the canvas reads knight / air.
4. Add rise, with the clip rise, and fall, with the clip fall. If the bar says Entry is not rise, select rise and press Set entry.
5. Click knight in the bar above the canvas to go back up. A new box lands on the first free place of a grid; drag the boxes where you like. In the picture, idle and run are on top and air and land under them.

State and Clip

A state is a box with a name and the name of the clip it plays. While the knight is in it, his Animated Sprite plays that clip. The two boxes in the bar make a state; the name must be new, and the clip is one of the animation’s own, run for run. A state’s clip can be changed afterwards by selecting it and choosing another clip’s chip.

Entry

The state the graph starts in. The bar names it, Entry: idle, and Set entry on any other state moves it. Every graph and every sub-graph has one: air’s is rise, so the knight enters it rising.

Sub-graph

A state that holds a graph. Double-click its box, or press Open, to look inside; the bar shows where you are, and clicking a name in it goes up. Inside, a state called Exit ends the sub-graph and hands control back to the level above, which decides what comes next.

Any State

The dashed box at the top left of a graph. It is not a state: an arrow from it can fire from every state but the one it enters. Nothing in the knight’s graph uses it yet. Chapter 5 does.

What his body tells the graph

The arrows, in order

1. Select idle. In its band over the Transitions list, press Link, then click air: the row under the bar says Linking from idle — click a state, and the click ends it. A row idle to air appears in the list, with the condition Always.
2. In that row, click Is. Type grounded into the box, and untick the checkbox, so it reads false: the arrow now fires when he is not on the ground.
3. Add the rest of the root’s arrows the same way, in this order, with the condition and the blend of the table below. A blend is the box with an s after its number, in the row’s head: click it once, which selects its number, type the new one and press Enter.
4. Open air. Add its three arrows in order, rise to fall, rise to the dashed Exit, and fall to Exit. Go back up to knight.
5. Press Save in the Graph tab’s bar, and Ctrl+S.

Condition

The test that decides whether an arrow fires, chosen in the row. Always fires at once. Finished fires when the state’s clip has run out, or, for a state that holds a graph, when that graph has reached Exit. > and < compare a number parameter with a value you type. Is compares a switch with on or off. Trigger fires on a one-shot the game raises, which chapter 5 uses.

Blend

How long the cross-fade lasts, in seconds: the old state’s clip fades out while the new one fades in. 0 is a cut. About 0.1 to 0.15 suits two poses that are close, as idle and run are, and a longer one blurs a quick move. A blend never needs more than a few steps of the game.

First match wins

The Transitions list is the priority. The graph tries the arrows leaving the state it is in, top to bottom, and takes the first whose condition holds. The up and down arrows in a row move it, and the number is its place.

Rehearse it

1. In Rehearse, drag the speed slider to the right, past 10.
2. Press Step. The graph takes the first arrow that fires from idle: the section says In: run, and Took: idle to run, and the arrow lights green.
3. Press Restart to go back to idle. The values you set stay.

Step and Restart

Rehearse’s two buttons. Step takes whichever arrow fires from the state the rehearsal is in, spending any trigger it read, and says where it ended. Restart puts the rehearsal back in the entry state and leaves the numbers as you set them.

Clip finished

A checkbox in Rehearse, for the one condition no parameter stands in for: whether the state’s clip has run out. Tick it and press Step to take a Finished arrow.

He plays it

1. Select knight, and press F5.
2. Hold D. The Inspector’s Clip changes from idle to run by itself. Let go, and it goes back.
3. Press Space. It reads rise, then fall, then land, then idle.
4. Press F5 again to stop. Clip is idle again in your project.

The graph, as this chapter leaves it

Check it works