Skip to content

Tutorials · Animation and Cutscenes · Chapter 4

Frame events

20 minutes Uses: AudioSource, Area

By the end

  • An Audio Source on the knight that answers three names: step, with five takes, never the same one twice running, swish and thud
  • Event tracks on his clips: step on frames 0 and 6 of run, thud on land, swish on frame 2 of slash, and hitbox on its frames 2 and 3
  • A child node, blade, an Area that is live only while hitbox is
  • A number, 220, carried by recoil on the second frame of hurt
On this page

Footsteps you hear

A clip can say that something happens on one of its frames, with an event track. A track has a name, and when the clip reaches a frame the track marks, the node hears the name. A Trigger on step is not a sound by itself: the knight’s Audio Source is what turns the name into one. It holds a list of Triggers, each a name and the sound that name plays.

  1. Copy the footsteps, the thud and the knife below into the project’s audio folder.
  2. Select knight, click Add component and choose AudioSourceComponent. Leave Clip empty, Bus on Sfx and Autoplay unticked: this source plays nothing on its own.
  3. Press the + at the right of Triggers three times. Three rows, [0], [1] and [2], appear, folded. Open [0]: set Name to step, and the row reads 1 step, its place and its name. Drag footstep_wood_000.ogg onto its Clip.
  4. In 1 step, press the + beside Clips four times, open each of the four rows, and drag footstep_wood_001.ogg to footstep_wood_004.ogg onto their Clip. Leave each Weight at 1.
  5. Set 1 step’s Mode to RandomNoRepeat, Pitch Min to 0.9 and Max to 1.1, and Volume Min to 0.8. Volume Max stays 1.
  6. Open [1]: Name swish, Clip knifeSlice.ogg; it reads 2 swish. Open [2]: Name thud, Clip impactSoft_heavy_000.ogg; it reads 3 thud.
The knight selected, its Inspector narrowed with the search box, audio, to its Audio Source: Clip none, Bus Sfx, Volume 1.000, Pitch 1.00, Looping and Autoplay unticked, the Spatial group folded, and under Triggers, three items, the first open: Name step, Clip footstep_wood, a Clips list of four items, Mode RandomNoRepeat, Pitch Min 0.90 and Max 1.10, Volume Min 0.80 and Max 1.00; the Viewport looks through the game camera at the hall with the knight at the left
The knight’s Audio Source, with its first trigger, step, open.
Triggers
The Audio Source’s list of names it answers. Each row holds a Name, which a clip’s event track spells the same way, and the sound that name plays. A name no row has makes no sound.
Name and Clip
A trigger’s Name is the name the event track raises, step. Its Clip is the sound it plays. With Clips empty, it plays that one every time.
Clips and Weight
More recordings of the same sound, played instead of the Clip alone, so that a footstep is not the same take over and over. Each row has its own Clip and a Weight: how often it comes up against the others under Random and RandomNoRepeat, 1 for all of them here. Shuffle and Sequential pass over it, and in every Mode 0 mutes a take. step has five takes in all, the Clip and the four rows.
Mode
The order the takes are drawn in. Random picks any, by weight. Shuffle, which a new trigger has, goes through all the takes in a random order before it repeats one. Sequential goes down the list. RandomNoRepeat picks at random, by weight, but never the take it just played, which is what a footstep wants.
Pitch and Volume
A range each, Min to Max, from which every play draws its own multiplier: 0.9 to 1.1 shifts the pitch a tenth either way, and 0.8 to 1 takes up to a fifth off the volume. A new trigger has 1 to 1, which is no change. A little spread is what stops five takes sounding like one.
Bus
The mix the source plays through: Master, Music or Sfx. Sounds of the show’s own, like these, go on Sfx, which is what a new Audio Source has.

Trigger tracks

The knight puts a foot down twice in a stride: on the first frame of run, and on its seventh. A Trigger track marks those frames. Each time the clip reaches one, it raises the track’s name once.

  1. In the Animation tab, in the Frames mode, click the run tab. Under Frames, below the frame’s details, type step into Track name, choose Trigger and press Add track. A row step appears, with a cell for each of the twelve frames.
  2. Click the first cell and the seventh. They light: frames 0 and 6. Each cell is a frame, counted from 0.
  3. Click the land tab. Add a Trigger track thud and click its one cell.
  4. Click the slash tab. Add a Trigger track swish, and click its third cell: frame 2, where the blade sweeps.
The Animation tab on the run clip, with its twelve frames across the top: under them the band Values on frame 0 with an Add value button for step, and one row, step, a diamond for a Trigger, with twelve cells, the first and the seventh lit yellow
run’s step track: the first and the seventh frames.
Trigger
A kind of event track: an edge, fired once. When the clip arrives on a marked frame, the track’s name is raised for that step, and the node’s Audio Source, and in later chapters its scripts, hear it. A cell is a frame, and only the frames you light fire. The first frame of a clip fires on the first step after the clip starts.
Active
The other kind: a state, held across a span of frames. It is on for as long as the clip’s frame is inside the lit run, and off outside it. It is for something that is live for a while, as the next section’s blade is.
Track name and Add track
The name a track raises, and which kind it is. The name is what a Trigger binding, an Area’s Track or a script spells the same way; one clip cannot have two tracks of one name. A bin on the row removes the track, and the three small switches before it, S, M and L, solo, mute and lock it, for a clip with many.

A slash that hits

A slash that cannot hit anything is a wave. The blade is a node with an Area, a box that notices what overlaps it, and the Area has a Track: the name of an event track that switches it on. While the knight’s clip is on a frame the track covers, the Area is live. On every other frame it is not.

  1. In the slash clip, add an Active track called hitbox. Drag across its third and fourth cells, frames 2 and 3: the two frames where the blade is out. The cells light as one span.
  2. Press Save in the Animation tab.
  3. Select knight, click + Add node and choose Area. Rename the node blade.
  4. In its Area, set Shape Size to 96 and 24, Offset to 0 and -22, and Track to hitbox. Leave Solid unticked.
  5. Type blade into the Groups box and press +, so the node is in a group of that name. Press Ctrl+S.
The Animation tab on the slash clip, six frames across the top: two rows under them, swish with a diamond and a single yellow cell, the third, and hitbox with the Active icon and two orange cells joined, the third and the fourth
slash’s two tracks: swish on frame 2, hitbox on frames 2 and 3.
The blade selected and framed in the Viewport: a yellow rectangle, wide and low, across the knight’s head and chest, with the knight standing in his idle pose inside it; the Inspector shows its Area: Shape Kind Rectangle, Size 96.0 and 24.0, Offset 0.0 and -22.0, Solid and One Way unticked, and at the foot Track hitbox
The blade’s Area: a 96 by 24 box, up at the knight’s chest, switched by hitbox.
The Area’s Track
The name of an event track on the clip the knight is playing. While that track covers the clip’s frame, the Area is live, and notices what overlaps it; on every other frame the Area is as if it were not there. Empty, an Area is live all the time, which is what a pickup wants.
The Area’s Shape: Size and Offset
The box the Area covers: its Size in world units, and its Offset from the node’s place, which is the knight’s feet. A Size of 96 by 24 is as wide as a slash frame, and not much taller than a sword, and an Offset of -22 lifts it so that it sits across his chest. Solid stays unticked: an Area notices, it never blocks.

The blade is centred on the knight, so it reaches both sides of him: a slash behind him would reach what is behind him too. The blade is in the group blade already. Chapter 5 puts the knight in a group of his own, so that a script can tell the two apart.

A number on a frame

A Trigger can carry a number, or a word, along with its name. The knight’s hurt clip raises recoil on its second frame, and carries 220, how hard to throw him back, for a script to read in chapter 5.

  1. In the hurt clip, add a Trigger track recoil and click its second cell: frame 1.
  2. Click the second frame in the strip of frames at the top, to put the playhead on it. A band, Values on frame 1, opens over the tracks, with a row for recoil and an Add value button.
  3. Press Add value, choose Float, and set it to 220.
  4. Press Save in the Animation tab, and Ctrl+S.
The Animation tab on the hurt clip, three frames across the top with the second chosen: a band called Values on frame 1 with a row, recoil, holding the number 220.00 and a bin, and under it the recoil track with three cells, the second lit with a dot in it
hurt’s recoil: the dot in the cell says the frame carries a number, and the band says which.
Values on frame and Add value
The band that opens when the playhead is on a frame a track covers. Its row for a track is where that frame’s payload is set: a Text, an Int, a Float or a Bool. The engine reads none of them for you: what 220 means is what the script that hears recoil makes of it. A dot in the cell says the frame has one, and the bin clears it.

Seeing the slash

The knight has no way to slash yet: nothing tells his graph. Chapter 5 does. What you can do now is play the slash by name, as chapter 1 did, and watch what it raises.

  1. Press F5. Select knight, and set the Animated Sprite’s Clip to slash. He slashes, once. The knife is heard on the third frame.
  2. Click Render on the toolbar and tick Debug draw. Set Speed to 0.25, Clip to idle, then to slash again. A box is drawn across his chest for two frames, the blade’s, and is gone. Set Speed back to 1.
  3. Set Clip to hurt. Nothing is heard: no script listens for recoil yet. Press F5 to stop.
Six pictures of the knight slashing, side by side: he stands ready, draws back, sweeps a broad white arc in front of him, thrusts with a thin blade, and then recovers in two last frames
The slash, six frames at steps 1, 4, 7, 10, 14 and 20, 0.02 s to 0.33 s, which are the clip’s frames 0 to 5: the arc is frame 2, where swish and hitbox begin. Taken as typing slash into Clip in Play shows it.
A close view of the editor in Play with debug drawing on: the knight in the middle of his slash, a white arc in front of him, inside the thin blue outline of his Sprite frame, with a faint amber rectangle across his chest, the blade’s box
Step 9, the slash’s third frame: the blade’s box is drawn, the faint amber rectangle across him.
The same close view five steps later: the knight has drawn back and no amber rectangle is drawn, only the blue outline of his Sprite frame
For comparison, step 14, the fifth frame: the track no longer covers it, and the box is gone.

The events, as this chapter leaves them

The event tracks

ClipTrackKindFramesPayload
runstepTrigger0, 6
landthudTrigger0
slashswishTrigger2
hitboxActive2 to 3
hurtrecoilTrigger1Float 220

The knight’s Audio Source

TriggerFieldValue
1 stepNamestep
Clipfootstep_wood_000.ogg
Clipsfootstep_wood_001.ogg, footstep_wood_002.ogg, footstep_wood_003.ogg, footstep_wood_004.ogg, each Weight 1
ModeRandomNoRepeat
PitchMin 0.9, Max 1.1
VolumeMin 0.8, Max 1
2 swishName, Clipswish, knifeSlice.ogg
3 thudName, Clipthud, impactSoft_heavy_000.ogg

The blade

NodeComponentFieldValue
blade, a child of knightAreaShape Size96, 24
Shape Offset0, -22
Trackhitbox
groupblade

Every other field of every node is as it comes.

Check it works