Tutorials · Animation and Cutscenes · Chapter 12

The opening

A camera rig

1. In the Hierarchy, drag camera out from under knight and drop it on theatre. It goes to the end of theatre’s children, and its Position now reads 160, 180: the editor keeps a node where it stood when you give it a new parent, so the picture does not change.
2. Select theatre, click + Add node and choose Node. Rename it stage_mark and set its Position to 320, 180: the middle of the stage, a point for the stage shot to look at.
3. Select camera, click Add component and choose CameraRigComponent. Enabled is ticked, as it comes.
4. Press + beside Framings three times. Three rows appear, [0], [1] and [2]. Open the first by its arrow.
5. In [0], set Name to follow, and the row reads 1 follow, its place and its name. Set Subject to knight by choosing him from the list or dragging him from the Hierarchy. Set Duration to 1, Dead Zone to 24, 0, Soft Zone to 160, 0, Offset to 0, 108, Damping to 0.3, 0.5, Time to 0.35, Smoothing to 0.4 and Limit to 48. Active, Priority 0, Zoom 1, Rotation 0 and Ease EaseInOut stay as they come.
6. In [1], set Name to stage and Subject to stage_mark. Set Priority to 2, Zoom to 1.25, Duration to 0.8, Ease to Cut and Damping to 0, 0. The rest stays as it comes.
7. In [2], set Name to marionette and Subject to marionette. Untick Active. Set Priority to 3, Zoom to 2, Rotation to 2.86, Duration to 1.2, Ease to Linear and Offset to 0, 60. The rest stays as it comes.

Enabled

The Camera Rig’s Enabled: whether the rig drives the camera. Ticked, as it comes. Unticked, the rig holds the camera where it is and keeps its springs running, so a cutscene that takes the camera by hand and gives it back does not lurch on the way. Chapter 13’s boss holds a shot that way.

Framings

The Camera Rig’s shots, one row each, in no particular order: which one is live is decided by Active and Priority, not by position in the list. The Cut to live framing button under them lands the camera on the winning shot at once, abandoning any blend, so you can nudge a priority and see the result without waiting out the move.

Name

A framing’s Name: what to call it. A script switches a framing by its name, as the operator does below: framings.stage.active is the Active of the framing called stage.

Subject

The node a framing follows: knight, stage_mark and marionette. Empty, it holds a fixed point. stage_mark is an empty node that never moves, so the stage shot holds still however the knight runs.

Active

Whether a framing is in the running. follow and stage are; marionette starts out of it, and the opening switches it on and off by name.

Priority

Who wins: of the active framings, the higher number takes the camera. stage, 2, beats follow, 0, for as long as it is active, so the show opens on the stage and the knight’s shot waits. marionette, 3, beats both once it is switched on.

Zoom

A framing’s magnification, matching the Camera’s own Zoom. At 1 the view is the whole 640 wide; 1.25 shows 512 of them, a closer stage; 2 shows 320, the marionette filling the picture.

Rotation

A framing’s roll, a Dutch angle; zero is level. The Inspector shows it in degrees: the marionette’s 2.86° leans the picture about three degrees, so the close shot feels staged. Every other framing is level.

Duration

A framing’s blend time: seconds to get into this shot from whatever was live. It belongs to the shot being arrived at, so follow takes a second to come back to the knight and marionette takes 1.2 to get to the wings.

Ease

The shape of the blend into a framing: Cut is no blend at all, Linear is constant speed, EaseInOut speeds up out of the old shot and slows into the new, and Overshoot carries a little past the mark and settles back. stage is a Cut: its Duration, 0.8, is kept but not used while it is, so that switching the shot to an ease does not lose the number. marionette is Linear: a dolly on rails.

Dead Zone

How far the subject may move from where it is supposed to sit, per axis, in world units, before the camera follows: the middle of the picture moved by the Offset. follow’s 24, 0 lets the knight run 24 units either way of his place before it moves, and has it follow his height at once.

Soft Zone

The half-size of the box the subject may not leave, per axis; the camera lags behind him by at most that. 0 on an axis is no limit there. follow’s 160, 0 keeps the camera from ever being more than 160 units behind him sideways, whatever Damping says, and puts no such limit on his height.

Offset

Where in the picture the subject sits, relative to its middle. follow’s 0, 108 puts the knight 108 units below the middle, which is where he stood when the camera hung 108 above him; marionette’s 0, 60 puts the marionette’s feet 60 below it, so the whole figure, cross and feet, fits in the picture.

Damping

Seconds the camera takes to close nine tenths of the gap to its subject, per axis. follow’s 0.3, 0.5 is a little slower going up and down than along, so a jump is mostly ignored and a run is tracked. A new framing’s is 0.25, 0.5; stage holds a fixed point, so its 0, 0 is only tidy.

Time

A framing’s look-ahead: seconds of the subject’s motion the camera leads by. follow’s 0.35 puts the camera where the knight will be a third of a second from now, so it shows more of where he is running. 0 is no lead, and is what the other two have.

Smoothing

Seconds over which the look-ahead itself is damped. Without it the lead would flip the instant the knight turned round, snapping the camera across him. follow’s is 0.4; a new framing’s is 0.2.

Limit

The largest look-ahead, in world units: 48. 0 is uncapped.

The cutscene

1. Select curtain. Chapter 3 saved it standing up, at 96, -240, where its rise ends. Set its Position to 96, 48: it hangs down, and the cutscene will raise it.
2. In its Property Animation, untick Playing: the cutscene will start rise, so the curtain should not start it itself.
3. In its Audio Source, untick Autoplay, so that cloth1.ogg stops playing as the game starts. Press + beside Triggers, open the new row, and set Name to cloth and Clip to cloth1.ogg. The cutscene will play it by that name.

1. Select theatre, click + Add node and choose Cutscene. Rename it opening. It comes with a Timeline component, its Timeline slot empty.
2. On opening, click Add component and choose AudioSourceComponent. Set Bus to Music, untick Positional, and leave Autoplay off. Add two Triggers: Name music with Clip the castle loop, and Name fanfare with Clip jingles_STEEL07.ogg.
3. Add a SignalComponent to opening. Press + beside Connections, open the new row, and set Signal to show and To to camera. The director, below, says show when the opening is over, and the camera’s operator hears it.
4. With opening selected, open the Cutscene tab and press New cutscene. It writes scenes/opening.timeline, beside the scene, named after the node, and points the Timeline at it.
5. In the bar, set the length, the box that reads 0.00 s, to 10.

Positional

An Audio Source’s Positional: whether its sound is placed in the room. Ticked, as a new Audio Source has it, the sound is quieter the further the node is from the camera, to nothing at its Max Distance, 512, and leans to the left or right of the picture. Unticked, it plays at full volume, centred, wherever the camera is: the Inspector hides Blend, Rolloff and Min Distance, which only a placed sound uses, and dims Max Distance, which a sound that is not placed does not read. The opening’s is unticked.

Timeline

A Timeline Component’s Timeline: the .timeline asset this node runs, here opening.timeline, the file New cutscene wrote. Its tracks and cues are what the Cutscene tab edits.

Playing

A Timeline’s Playing: whether its playhead advances. Unticked, as it comes: a cutscene starts only when something begins it, not when the room loads. The Director script below begins this one by calling play_cutscene. Set on a cutscene that has ended, it plays again from the start.

Speed

A Timeline’s Speed: how fast its clock runs against the game’s. 1 is as authored. Negative plays it backwards from its end, silently: markers and sounds never fire backwards. Chapter 13 rewinds one.

Activation

Shows its node for a stretch, or from a time on. Before its first stretch the node is hidden, so the footlights are dark until their cue.

Audio

Does something with sound, by the name of a trigger the node’s Audio Source has. Play sound plays it once, through the node’s Audio Source: placed in the room if Positional is ticked, centred if not. Play music hands it to the Music bus as the room’s music, looping, the same everywhere, replacing whatever music played before. Stop music names no sound and stops the room’s music.

Animation

Starts a clip on the node: a sprite clip from its Animated Sprite, a property clip from its Property Animation, or both if both have the name. It starts from the clip’s first frame.

Event

Names a moment, with a number or word if you like, for a script to hear. It plays nothing itself.

1. Press Add track, choose Activation, press Pick a node and choose footlights. Add the other six the same way, in this order: Audio on opening, Animation on curtain, Audio on curtain, Event on camera, Event on marionette, and Animation on knight.
2. To place a cue exactly, click the ruler at its time first: the readout beside the transport shows the playhead, 3.50 s of 10.00, and the red line runs down every lane. Then click the lane on the red line. A cue lands on the nearest sixtieth of a second, which is as exact as the file keeps; drag it if it is a frame off.
3. On footlights, click the lane at 1.5. A bar a second long appears. Right-click it and tick Open end: it runs to the end, drawn with >>. The lights come on at 1.5 seconds and stay on.
4. On opening’s Audio track, click at 0.5: a green cue named music appears, a Play sound cue for the node’s first sound. Right-click it and, under Action, press Play music. The cue turns purple and reads Music: music. Click at 5, right-click the new cue and, under Sound, choose fanfare; leave Action on Play sound.
5. On curtain’s Animation track, click at 2, right-click the cue and choose rise. On its Audio track, click at 2: the cue is cloth, its only sound.
6. On camera’s Event track, click at 3.5, right-click the marker and type wings into its Marker box. Click at 7, name it stage, and under Payload choose Float and set it to 6.
7. On marionette’s Event track, click at 5 and name it bow; click at 6.6 and name it rise.
8. On knight’s Animation track, click at 7.2: the cue names knight, his first clip. Right-click it and choose slash. Press the bar’s Save to write the file.

The marionette’s bow

1. Select marionette. In the Animation tab’s Properties mode, press the + beside the clip tabs, type bow and press Enter.
2. Turn Record on. Key the middle time first. Move the playhead to 0.6, select torso, set its Position to 0, -45.3, and the clip keys it there. Do the same on bar (0, -95.3), on upper_arm_right (its Rotation, -51.57, typed in degrees, as the Inspector takes them) and on head (157.08). The torso and the bar dip 10; the head tips and the right arm sweeps.
3. Move the playhead to 0 and set each of the four back to where it stood: torso to 0, -55.3, bar to 0, -105.3, upper_arm_right to 0 and head to 180. Do it again at 1.6. At the ends the clip lays the 0.6 pose, so putting the value back is an edit, and the clip keys it; a key at the value the node already had would be no edit, which is why the middle goes first. The bow’s table at the end of the chapter has every key.
4. At 0 only, select lower_leg_left, lower_leg_right, foot_left and foot_right in turn and set the Weight of its chain to 1, as the idle keys them, so the soles stay on their marks while the knees fold.
5. On the right arm’s row and the head’s, open the interpolation menu and choose Linear (angle). On the four weight rows choose Step. The two translation rows stay Linear.
6. Click Ease on the torso translation row. A box shows a straight line from the bottom left to the top right. Double-click the line to add a point, and drag it to about 0.3 across and 0.8 up. Do the same on the bar translation row. The bow starts fast and settles slowly. Turn Record off and press Save in the Properties bar, which writes marionette.propanim.
7. Select marionette and open the Graph tab. It opens on Layer: base, chapter 9’s graph. In the Parameters list, type bow into the name box, choose trigger in the list of kinds beside it and press Add. Do the same for rise.
8. In the row over the canvas, type bow into State and bow into Clip, and press Add state. Drag the new box below idle and dance.
9. Click the Any State box, press Link and click bow. Choose Trigger in its row, type bow in the name box under it and set its blend to 0.3. Press the up arrow at the row’s left until the number at its left reads 0: transitions are tried in order, and this one must not wait behind idle to dance.
10. Click bow, press Link and click idle. Choose Trigger, type rise and set the blend to 0.3. Press Save in the Graph tab’s bar, and Ctrl+S.

    fn on_signal() {
        if heard("marker:bow") {
            trigger("bow");
        }
        if heard("marker:rise") {
            trigger("rise");
        }
    }

Who plays it

1. In Assets, press Create, choose New script, type director, and press Enter. Replace its text in the Code tab with the script below, and press Ctrl+S. Select opening, click Add component and choose Director.
2. Make operator the same way, and add Operator to camera.

/// The opening: it plays as the show starts, and when it has played, it
/// tells the camera the show is the knight's.
component Director {
    fn on_create() {
        await play_cutscene();
        emit("show");
    }
}

/// The camera operator: takes the shots the opening calls for, by their
/// names, and hands the picture to the knight once the opening is over.
component Operator {
    fn on_signal() {
        if heard("marker:wings") {
            set_flag("CameraRigComponent", "framings.marionette.active", true);
        }
        if heard("marker:stage") {
            set_flag("CameraRigComponent", "framings.marionette.active", false);
            cut();
            shake(heard_value("marker:stage"), 0.4);
        }
        if heard("show") {
            set_flag("CameraRigComponent", "framings.stage.active", false);
        }
    }
}

play_cutscene

Plays the Timeline on this node from its start. With await in front, the hook waits until it ends: on the step the cutscene reaches its end. If the node has no Timeline, or the file cannot be loaded, the call is said once in the Console and still ends on the next step, so an await never hangs.

set_flag

Writes a true or false onto another component on this node: here "CameraRigComponent", the path "framings.marionette.active", and true. A path segment on a list that is not a number reaches the first row whose Name is that word, so framings.marionette.active is the Active of the framing called marionette, wherever it stands in the list.

cut

Cuts the game’s camera straight to its live framing, with no blend, on the next step.

shake

Shakes the game’s camera by up to strength world units for seconds; a weaker shake during a stronger one changes nothing. The picture moves, not the camera: the shake is drawn on top of the Camera component’s own Offset, never written into it or into a framing, and the room’s Confiner, which holds where the camera rests, never swallows it.

heard_value

The number a signal carried into this node’s inbox this step: marker:stage carries the 6 you typed into its payload, so shake(6, 0.4) is a shake of up to six units for four tenths of a second.

marker:wings

Heard on the step the cutscene’s playhead passes a marker called wings on an Event track of this node: at 3.5. The same goes for marker:stage, at 7, and, on the marionette, marker:bow and marker:rise.

The show, exported

1. Save with File → Save all: Export copies the files as they are on disk.
2. Click the Build tab, or choose View → Panels → Build if it is not there.
3. In its Export section, a line under Export says where the game will be written, ending in animation-and-cutscenes/dist/animation-and-cutscenes/animation-and-cutscenes: your project’s folder, then dist, then a folder and a file both named after it.
4. Press Export. When it is done, the editor opens the new folder in your file manager.
5. Double-click animation-and-cutscenes, or animation-and-cutscenes.exe on Windows. On Linux, if double-clicking does not start it, run ./animation-and-cutscenes in a terminal in that folder.

The rig, the cutscene and the bow

Check it works