Tutorials · Sound and Music · Chapter 12

A gallery of sound

Two scenes beside the crypt

1. Download Heavy Boss Battle 1 and Music Jingles from their pages below. Copy the files the list names into your project’s audio folder, each from where it says, the five steps on boards from Impact Sounds with them, and press Refresh in the Assets panel.
2. Leave them all on Auto, as they come: the song is long and streams, and each jingle and step is short and is held whole.

Nine pictures from the sheet

1. In Assets, double-click art/tilemap_packed.png. In the Sprite sheet tab’s Grid band, set Cell to 16 by 16.
2. For each row of the table below, click its cell on the sheet, or drag across the cells for one bigger than a cell, type its name into Name in the Regions band, and press Name it.

A third button

1. Open scenes/title.ron. Select options, under title_menu, and press Ctrl+D: a copy under it. Rename it gallery.
2. In its Text, set Text to Gallery. In its Button, set Action to gallery.
3. In its Focus, set Up and Previous to options, and Down and Next to play. Select play and set its Up and Previous to gallery; select options and set its Down and Next to gallery. The three are a ring.
4. Select title_frame and set its Rect’s Offset Max y from 480 to 541: 61 taller, a button and its gap.
5. Double-click title_menu.rgs and replace everything in it with the script below. Press Ctrl+S.

/// The title's menu: Play opens the crypt, Gallery opens the gallery of sound,
/// and Options swaps this menu for the options panel, whose Back swaps it
/// back. A press clicks, and a move of the focus round the menu blips: the
/// triggers of this node's Audio Source.
component TitleMenu {
    /// Whether the menu is showing, so that it blips for its own focus moves
    /// and not for the options panel's.
    #[hidden]
    shown: bool = true,

    fn loop() {
        // A click on Play, Gallery or Options, or Enter or Space while it
        // holds the focus, presses its action on the game's next step. A
        // sound asked for on the step that changes scene plays on after it.
        if pressed("play") {
            play_sound("click");
            change_scene("crypt");
        }
        if pressed("gallery") {
            play_sound("click");
            change_scene("gallery");
        }
        if pressed("options") {
            play_sound("click");
            hide();
            shown = false;
        }
        // A click on the options panel's Back, Enter or Space while it holds
        // the focus, or Escape through its Shortcut.
        if pressed("back") {
            show();
            shown = true;
        }
        // W or S, or the Up and Down arrows, move the focus round the menu.
        if shown && (pressed("ui_up") || pressed("ui_down")) {
            play_sound("select");
        }
    }
}

The gallery

1. Click the Levels tab. Type Gallery into the box in the panel’s bar and press Add level. The new row names a scene for it, scenes/gallery.ron, and warns that the file does not exist. Press Create scene under the warning: the editor writes an empty gallery.ron and opens it.
2. Click + Add node and choose Node. Rename it Gallery.
3. Select Gallery, click + Add node and choose Camera Confiner. Rename it confiner, set its Position to 648, 96, the gallery’s middle, and its Bounds to 1296, 192. Until the camera arrives with the knight, confiner carries a warning, and Problems reads “This Confiner works on the active camera and this scene has no active Camera”: leave it.
4. Select Gallery, click + Add node and choose Tilemap. Rename it stone, and set its Sort Layer to -3, as the crypt’s stone has it: under the rooms’ boards, which come below on -2.
5. With stone selected, open the Tilemap tab beside the Inspector. Drag art/tilemap_packed.png from Assets onto New tilemap…. The editor writes a new tilemap beside the sheet, art/tilemap_packed.tilemap, and points stone at it; the status line at the foot of the window names the file. Its Tileset fold reads the sheet as it is: tiles 16 by 16, 12 columns, no Margin.
6. Before you change anything in it, rename it: in Assets, right-click the new file, choose Rename, and type gallery.tilemap. stone still shows it.
7. In the Layers fold, the new tilemap has two layers, back and ground. Double-click back: its name turns into a box, the name selected. Type floor and press Enter. Rename ground walls the same way. walls, the second layer, is the solid one as it comes: the gear button at the end of its row reads SN, Solid and Blocks nav, and a click on it shows the two ticked. floor’s gear reads nothing.
8. Click walls, then the + under the rows, which adds an empty layer over the selected one: layer 1, after walls. Rename it decoration. Its gear reads nothing: it stops nobody.
9. Under Tools, click Rect. Choosing a tool turns on Paint mode at the top of the tab: a drag in the Viewport now paints, and selects nothing.
10. Paint the table below, a layer at a time: click the layer’s name first, so it is the one you paint on. For each tile the table names, hover the tiles in the picker at the tab’s foot until the tooltip reads its number, #41 for the wall’s face, and click it: the Tile line over the picker shows it. Then drag over the cells it covers, from inside the first to inside the last: both corner cells are painted. Columns count from 0 at x 0 and rows from 0 at y 0, a cell every 16; the cursor row under the Viewport reads where the pointer is.
11. Press the tab’s Save, which writes the tilemap, and Ctrl+S for the scene. Physics and Mechanisms paints a gallery tile by tile too, if you want the tab at more length.

1. For each room of the table below, select Gallery, add a Node with its name at its Position, and under it a Sprite, <room>_boards: Texture art/planks.png, Atlas Region deck, Draw Mode Tiled, Size 144, 144, Tile Size 16, 16, Sort Layer -2.
2. Copy knight from crypt.ron, his camera under him, and paste him under Gallery at the foyer’s start, 392, 120. His lantern comes with him: select it and delete it. The gallery has no lights, and one would make it a lit scene, dark but for the circle round him.
3. Make leave.rgs with the script below: in Assets, click Assets in the path bar, then Create → New script, type leave and press Enter. Every script this chapter makes is made so, at the project’s top beside the others. Select Gallery, press Add component and choose Leave.

/// Escape, which the input map calls pause, leaves the gallery for the title.
/// It sits on the root of each of the gallery's two scenes.
component Leave {
    fn loop() {
        if pressed("pause") {
            change_scene("title");
        }
    }
}

1. Select a room, click + Add node and choose Shape. Rename it <room>_sign and set its Position to 0, -80. Set its Kind to Rectangle, its Size to the sign’s width by 12, its Color to the pack’s navy, 38, 43, 68, its Outline to 1 in the pack’s dark outline, 63, 38, 49, and its Sort Layer to 0.
2. On the same node, press Add component and choose WorldTextComponent: Text the room’s sign, Scale 0.25, Color the pack’s beige, 236, 227, 206, Offset 0, 0, Pixel Size unticked, Sort Layer 1, Outline Width 0.
3. The width is the words’ and 4 either side: 30 for Radio, 78 for Through the wall, 42 for the rest.

The gallery’s music

1. In Assets, click the music folder, so the path bar reads Assets / music. Choose Create → New data asset → Music, type gallery over the name and press Enter: music/gallery.data, made as chapter 10 made crypt.data, and open in the Inspector.
2. Its Tracks: fanfare, Clip jingles_STEEL05.ogg, Looping unticked; and calm, Clip crypt-calm.wav, Looping ticked.
3. Its Rules: (any) to fanfare, Immediate; and fanfare to calm, AtEnd. Leave the Default Transition as it comes, a CrossFade of 1 second, and the Playlist empty. Press Save.
4. In the Levels tab, on the Gallery row, drop gallery.data on Music and pick fanfare in Track.

The gallery’s mix

1. Select Gallery, click + Add node and choose Audio Mix. Rename it mix, give it the slots of the table below, each set as chapter 6’s and chapter 7’s were, and the two snapshots after it, each made as chapter 7’s were: + beside Snapshots, its Name, a press of + beside Master’s Effects and three beside Sfx’s, and then the switches ticked as it says. Press Ctrl+S.

A BandPass’s Cutoff

The middle of the band it lets through, in hertz: here 1200. Below it and above it, the sound falls away.

A BandPass’s Resonance

How narrow the band is: higher is narrower, at the same level in its middle. 1 here.

A Distortion’s Drive

How hard the sound is pushed into the clipper that flattens its peaks: higher is rougher. A quiet sound comes out louder as well as rougher, as the whisper does below.

A Distortion’s Mix

How much of what comes out is clipped rather than the sound as it came, from 0, none, to 1, all of it: here 0.7.

A radio through the wall

1. Under radio_room, add a Sprite, radio, at 0, -48 (the world’s 88, 56), of the region radio, with a Collider 14 by 12, Offset 0, 2.
2. Press Add component and choose AudioSourceComponent: Clip heavy_boss_battle_1_bpm200_0.ogg, Bus Sfx, Volume 0.8, Looping, Autoplay and Positional ticked; Max Distance 256, Rolloff Linear, Min Distance 16.
3. Under listening_room, click + Add node and choose Audio Zone. Rename it listening_zone; set its Area’s Size to 144, 144, the room’s floor, and its Snapshot to through_wall. Leave Fade 0.5 and Priority 0, as they come.

A ghost’s whisper

1. Under haunted_room, add a Sprite, ghost, at 0, -48, of the region ghost, its Color alpha 0.8. Add an AreaComponent, Size 144, 144, Offset 0, 48: the room’s floor.
2. Add an AudioSourceComponent: no Clip, Bus Sfx, Volume 1, Positional ticked, Max Distance 160, Rolloff Quadratic, Min Distance 32; and a trigger whisper, its Clip whisper.wav.
3. Make haunt.rgs with the script below, and add Haunt to ghost. Leave its Haunting at 3 s.

/// The ghost in the haunted room. As the knight comes in, it whispers, and
/// while it whispers the gallery's mix is haunted: that snapshot's Distortion
/// roughens everything on Sfx, the whisper, his steps and the bell far off.
/// Then it lets the mix go, back to the room's own.
component Haunt : Area {
    /// How long the mix stays haunted: the whisper's 2.6 s and a little more.
    #[suffix("s")]
    haunting: f32 = 3.0,

    fn on_enter(other: NodeId) {
        if in_group(other, "knight") {
            // The mix holds haunted, whatever zone he is in, until the
            // script lets it go.
            set_mix("haunted", 0.25);
            play_sound("whisper");
            await wait(haunting);
            clear_mix(1.0);
        }
    }
}

A machine that winds up and down

1. Under machine_room, add a Sprite, machine, at 0, -48, of the region machine, with a Collider 14 by 12, Offset 0, 2.
2. Add an AudioSourceComponent: Clip gate-grind.wav, Bus Sfx, Volume 0.2, Pitch 0.6, Looping, Autoplay and Positional ticked; Max Distance 160, Rolloff Quadratic, Min Distance 32.
3. Make machine.rgs with the script below, and add Machine to machine, leaving its fields as they come.

/// The machine in the machine room. Its hum is its Audio Source's own loop,
/// set low and slow; this winds it up and down for ever, its Pitch up to
/// wound and back and its Volume up to roar and back, each over winding
/// seconds, so it speeds up as it grows louder.
component Machine {
    /// How fast it runs wound up, as a Pitch.
    wound: f32 = 1.6,
    /// How loud it is wound up, as a Volume.
    roar: f32 = 0.6,
    /// How long it takes to wind up, and again to wind down.
    #[suffix("s")]
    winding: f32 = 3.0,

    fn on_create() {
        pulse_number("AudioSourceComponent", "pitch", wound, winding, .InOutSine);
        pulse_number("AudioSourceComponent", "volume", roar, winding, .InOutSine);
    }
}

pulse_number

Anneals a number field of a component on the script’s own node to a value and back, over its seconds each way, on its curve, for ever. Two of them run side by side here, the Audio Source’s pitch to Wound and its volume to Roar, each over Winding seconds on an InOutSine curve, so the hum speeds up as it grows louder. A playing sound hears its Pitch and Volume change as they change; chapter 4’s gate wound its Pitch once, with anneal_number.

Wound, Roar and Winding, the machine’s

How high the Pitch winds, 1.6; how loud the Volume grows, 0.6; and the seconds it takes each way, 3.

A fanfare handed over

1. Under treasury, add a Sprite, chest, at 0, -48, of the region chest, with a Collider 14 by 10, Offset 0, 3, and an AreaComponent 32 by 32, Offset 0, 24: the floor in front of it.
2. Make chest.rgs with the script below, and add Chest to chest.

/// The chest in the treasury. Walked up to, it plays the gallery's fanfare,
/// once, and calm takes over as the fanfare ends, with no gap between them.
/// Walking away stops the music.
component Chest : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "knight") {
            // A track of the gallery's music asset, its Looping unticked: it
            // plays once. The rule to it from any track is Immediate.
            play_music("fanfare");
            // Asked at once, calm waits: the rule from the fanfare to calm is
            // At End, so calm comes in as the fanfare's one pass ends.
            play_music("calm");
        }
    }

    fn on_exit(other: NodeId) {
        if in_group(other, "knight") {
            stop_music();
        }
    }
}

A short cutscene with audio cues

1. Under theatre, add dais, a Sprite of the region dais at 0, -42 on Sort Layer -1, and performer, a Sprite of the region performer at 0, -48, with Visible unticked.
2. Select theatre, click + Add node and choose Cutscene. Rename it stage and set its Position to 0, -56.
3. With stage selected, open the Cutscene tab and press New cutscene: it writes scenes/stage.timeline, beside the scene, named after the node, and points Timeline at it.
4. Type 4.5 into the length box beside its name, in the tab’s bar: the show is 4.5 seconds long.
5. Add an AudioSourceComponent: Bus Sfx, Volume 1, Positional unticked; a trigger theme, its Clip abandoned_castle_music_-_starninjas_6.ogg, and a trigger bow, its Clip jingles_STEEL05.ogg.
6. Add an AreaComponent, Size 144, 144, Offset 0, 56: the theatre’s floor. Make show.rgs with the script below and add Show.
7. In the Cutscene tab, on stage, add an Audio track on stage with three cues, and an Activation track on performer, as the table below. Press the tab’s Save.

/// The theatre's show, its cutscene: the knight walking into the theatre
/// starts it. Its Audio track plays the show's music, the performer's bow and,
/// at the end, stops the music. Walked into again while it plays, it plays on;
/// once it is over, the next visit plays it again.
component Show : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "knight") {
            await play_cutscene();
        }
    }
}

A Play music cue

Asks the level’s music asset for a track of the cue’s name first, by its rules; only if the asset has none, it plays the node’s trigger of that name as the music, on the music channel. The gallery’s asset has no track theme, so the stage’s trigger plays, the title’s music, one music at a time.

A Play sound cue

Plays the node’s trigger of that name as a sound, through the node’s Audio Source, on its Bus: the bow, on Sfx, over the music.

A Stop music cue

Stops the music, whoever asked for it, as stop_music() does.

A sound that carries far

1. Under belfry, add a Sprite, bell, at 40, -48 (the world’s 1248, 56), of art/bell.png, with a Collider 12 by 8, Offset 0, 3.
2. Add an AudioSourceComponent: Clip bell.wav, Bus Sfx, Volume 0.4, Looping, Autoplay and Positional ticked; Max Distance 576, Min Distance 32, Blend 0.9, and Rolloff Custom.
3. Open the Curve’s fold under Rolloff: its canvas, from 0 at Min Distance to 1 at Max Distance. Double-click the line to add a key, drag it, or select it and type its numbers in the fields under the canvas. Make the four keys of the table below.
4. Select each key that leaves on a curve or a step, open Shape under the canvas, and choose its segment under Segment leaving this key. Press Ctrl+S.

A curve key’s x

Where the key sits along the canvas, left to right: for a rolloff, 0 at Min Distance and 1 at Max Distance.

A curve key’s y

What the curve reads at the key, bottom to top: for a rolloff, the share of the sound heard there, 1 all of it.

A curve key’s in and out

The slopes the curve arrives at the key on and leaves it on. Each is shown, as an arm on the canvas and a field under it, only where a Cubic segment reads it: out on a key whose own segment is Cubic, in on the key after one. Drag an arm, or type the slope; hold Shift while dragging an arm to break it from the other.

Segment leaving this key, in the Shape menu

How the curve is filled in from the selected key to the next. Constant holds the key’s value to the next key and steps there; Linear runs straight; Cubic bends by the two keys’ slopes. The menu’s Start from seeds the whole curve from a shape.

Steps on boards

1. Select the gallery’s knight. In his Audio Source’s trigger step, drop footstep_wood_000.ogg on its Clip, and the other four on the four takes of its Clips, each at Weight 1.
2. Set its Mode to Shuffle, and its Pitch and Volume ranges each to 1 to 1, as a trigger comes. Press Ctrl+S.

The jukebox’s room

1. Under foyer, add a Sprite, jukebox_door, at 8, -80 (the world’s 416, 24), of the region door_open, with an AreaComponent 32 by 16, Offset 0, 16. Make doorway.rgs with the script below, add Doorway, and set its To to jukebox.
2. In the Levels tab, add a level Jukebox and press Create scene: scenes/jukebox.ron. Build its room as the two tables below: one room, 11 by 9 cells, from x 16 to 192 and y 32 to 176.
3. Its stone is made as the gallery’s: a Tilemap on Sort Layer -3, and New tilemap… from art/tilemap_packed.png. This time the editor writes art/tilemap_packed-2.tilemap, as the status line says: the gallery’s file kept the first name’s id, so that name is not free. Rename it jukebox.tilemap, give it the same three layers, and paint it as the first table below. Press the tab’s Save.
4. In Assets, click music and make jukebox.data in it the same way: Create → New data asset → Music, jukebox, Enter. Leave its Tracks and Rules empty. Press + beside its Playlist’s Clips: a first item at its default. Drop jingles_NES00.ogg on it; press + three times more and drop jingles_PIZZI07.ogg, jingles_SAX07.ogg and jingles_STEEL07.ogg on the three. Tick Shuffle, set Seed to 12, and leave Position at 0. Press Save.
5. On the Jukebox row in Levels, drop jukebox.data on Music. Its Track list reads (no tracks).

/// A door to a room that is a scene of its own: walked into, it opens that
/// scene. The jukebox's room is one, since its music is its own level's.
component Doorway : Area {
    /// The scene the door leads to, by its name.
    to: String = "",

    fn on_enter(other: NodeId) {
        if in_group(other, "knight") {
            change_scene(to);
        }
    }
}

/// The innkeeper, by the jukebox. As the knight comes up to him he says his
/// line, and the jukebox makes room for it: the mix's Ducking row holds the
/// Music bus down while anything on Sfx is over its Threshold, as his words
/// are. In the two breaths between them his voice falls silent and the
/// jukebox lifts a little; the Release keeps it from coming all the way back.
component Speaker : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "knight") {
            play_sound("line");
        }
    }
}

The music asset’s Playlist

Clips played one after another, each once a pass, round and round, under the level’s tracks from the level’s opening, or alone in an asset with no tracks, as here. Its songs are the game’s music, on the Music bus, from nowhere.

The playlist’s Clips

The songs, in the order they were added; each + adds a slot, and a clip is dropped on it.

The playlist’s Shuffle

Ticked, it plays the clips in a new order each pass, each clip once in a pass and never one twice running, not even across a pass’s end. Unticked, in the order they were added.

Seed

Where the shuffle is drawn from. The same seed is the same order, so the room plays the same songs in the same order every time it opens.

Position

How far through its pass the playlist stands, as it was saved: 0, the start. The game keeps its own place as it plays and never writes it back to the asset.

Who decides what you hear

The gallery, case by case

Check it works