Tutorials · Animation and Cutscenes · Chapter 3

Keyframes

The curtain rises

1. Select curtain, click Add component and choose PropertyAnimationComponent.
2. Click the Animation tab at the bottom of the window, then Properties, the second of the two words at its top left. It says there is no .propanim yet.
3. Click New property clips. It writes scenes/curtain.propanim beside the scene and puts it in the Property Animation’s Clips.
4. Press the + at the right of the tabs, type rise and press Enter. A clip called rise opens, with no rows.

1. Turn on Record, the toggle in the row with the Play button, beside Capture RESET. The playhead is at 0.00.
2. In the Inspector, set the curtain’s Position y to 48: the curtain down, covering the stage. A row translation appears, its name cut short to translati…, with a diamond at 0.00, and Save lights.
3. Move the playhead to 1.5: click the time box, 0.00 s, beside the Play and Stop buttons. One click selects its number, so type 1.5 and press Enter. The Inspector now shows 48, the clip’s pose.
4. Set Position y to -240: the curtain up. A second diamond appears at 1.50, and the clip is 1.5 seconds long.
5. Click a diamond to select it, and hold the pointer over its row: it says the key’s time and its value. A diamond that is not on 0 or 1.5 can be dragged to it; a drag lands on the grid beside the transport, 1/60 s as it comes.
6. The row’s first dropdown reads Linear. Open it and choose Eased. A second dropdown, with the curve’s name, appears beside it; open it and choose InOutCubic.

1. Turn Record off. Set Position y to 48, which this time is an edit like any other.
2. Press Capture RESET. A second tab, RESET, appears beside rise, holding one key at 0 for the property the file keys, at 96, 48. The playhead can be anywhere.
3. Set Position y back to -240. Press Save in the Properties bar, which writes curtain.propanim.

Clips

The Property Animation’s Clips: the .propanim file it plays, with the clips in it. Here curtain.propanim, one for each prop that moves. Empty, the node plays nothing, and the Properties mode offers to write one.

Clip

The Property Animation’s Clip: the name of the clip it plays, rise here. A name the file does not have plays nothing. Empty, as a new Property Animation has it, plays nothing.

Playing

The Property Animation’s Playing: whether the clip’s playhead moves on. A new one is off, so that a node that animates when something happens waits for it. Ticked, as here, the clip plays as the room starts.

Speed

The Property Animation’s Speed: how fast the clip plays, as a multiple of its own rate. 1 plays it as keyed, 0.5 takes twice as long, 2 half the time, and a negative number plays it backwards. The curtain keeps 1, and the lantern takes 0.8, below.

Looping

The Property Animation’s Looping: what happens when the clip reaches its end, for this node only. AsAuthored keeps what the clip says, which for a clip the Properties mode makes is to play once. Once plays through and stops. Loop starts again at the first key. PingPong plays forward, then backward, and so on. The curtain keeps AsAuthored.

1. Set the Property Animation’s Clip to rise and tick Playing. Leave Speed at 1 and Looping at AsAuthored.
2. Click Add component and choose AudioSourceComponent. Copy cloth1.ogg, below, into the project’s audio folder, and drag it from Assets onto the Audio Source’s Clip. Tick Autoplay. Bus stays Sfx.
3. Press Ctrl+S. The scene saves the curtain up, at 96, -240.

The Audio Source’s Clip and Autoplay

An Audio Source’s Clip is the sound it plays, cloth1.ogg, a rustle of cloth. Autoplay starts it as the room starts, rather than waiting for a script, which is what a curtain that rises as the show begins wants.

Record

While it is on, an edit made in the Inspector to this node or to any node under it is keyed at the playhead in the open clip, and not made: the scene keeps its value. The row is added if the property has none, as Linear, and a key already at that time is replaced. A drag of a field is one key and one step of the clip’s own undo, which the Properties bar’s Undo takes back; Ctrl+Z is the scene’s. A button, a Viewport drag and a field a clip cannot key are not keyed, and the last is edited as usual, with a line on the status bar saying so once. An edit to the value the field already has changes nothing, so it keys nothing.

Key a property, a key and a lane

A key is a number at a time, shown as a diamond on a row’s lane. Key a property adds an empty row for a field of the node: the list names each field as the Inspector does, intensity; when two components of the node have a field of one name it puts the component first, LightComponent.color; and it names the node first for a field of a node below it. A double-click on a row’s lane keys what the field holds now, at the time under the pointer: it is one way to key a value the field already has, on a row with no keys yet, since editing a field to what it is changes nothing. A double-click on a diamond keys nothing, and Delete removes the diamond that is selected.

Step, Linear and Eased

How a row gets from one key to the next. Step holds the earlier key’s value until the later key’s time, and then jumps: a light switching. Linear is a straight line between them: even speed. Eased is a line shaped by a curve, and the second dropdown names it: InOutCubic starts slowly, speeds up, and slows again at the end, as a curtain that has weight does; InOutSine is the gentler version of the same. The list has more, which later chapters use.

RESET and Capture RESET

The neutral pose: a clip called RESET, with one key at 0 for every field any clip in the file keys. While another clip plays, a field that clip does not key takes the value RESET holds for it, instead of staying wherever the last clip left it. Capture RESET writes it from the values the scene holds, wherever the playhead is, after the other clips are keyed. A row whose name is amber is one RESET does not hold yet: the lantern’s and the footlight’s are, since each has one clip and nothing to put back. Nothing here uses the curtain’s RESET yet; chapter 12’s cutscene does.

The ruler, the playhead and the grid

The ruler counts seconds along the top. Click or drag it to move the playhead, the red line, and the scene stands as the clip has it at that time; the time box, 0.00 s, beside the Play and Stop buttons, says where. The grid, Off, 1/60, 1/30 and 1/24, is what a click or a drag snaps to; 1/60 s is a step of the game.

The lantern swings

1. Select lantern, add a PropertyAnimationComponent, and in the Properties mode press New property clips. Add a clip called swing.
2. Turn on Record. With the playhead at 0.00, set the lantern’s Rotation to -17.19. A row rotation appears with a diamond at 0.00.
3. Move the playhead to 1.2, and set Rotation to 17.19. A second diamond appears at 1.20.
4. Set the row’s first dropdown to Eased and its second to InOutSine. Turn Record off, and press Save.
5. In the Property Animation, set Clip to swing, Speed to 0.8 and Looping to PingPong, and tick Playing. The lantern’s own Rotation is still 0. Press Ctrl+S.

A footlight flickers

1. Select footlight_3, add a PropertyAnimationComponent, and press New property clips in the Properties mode. Add a clip called flicker.
2. The first key of each row is the value the light already has: its Intensity is 2 and its Color is 1, 0.82, 0.56, alpha 1. Editing a field to what it already holds changes nothing, so there is nothing for Record to key. Click Key a property and choose intensity, then click it again and choose LightComponent.color, the light’s colour: the Sprite has a colour too, listed as SpriteComponent.color. Two empty rows appear, intensity and color. Double-click each row’s lane at 0.00, and each gets a diamond holding the value as it is.
3. Set both rows’ first dropdown to Step.
4. Turn on Record. Set Intensity to 0.5 with the playhead at 0.10, to 2.6 at 0.15, to 0.9 at 0.30 and to 2 at 0.45. Each lands as a key on the intensity row.
5. With the playhead at 0.30, click the Light’s Color, and press U8 at the top left of the picker that opens, so it reads F, which shows each value from 0 to 1. Set Color to 1, 0.7, 0.45, alpha 1. It lands as a key on the color row.
6. Turn Record off, and press Save. In the Property Animation, set Clip to flicker, Looping to Loop and tick Playing. Press Ctrl+S. The light’s own Intensity and Color are as they were.

The three clips and their nodes

Check it works