Tutorials · Crypt Knight · Chapter 13

The beast

A fight in a room

The Hall’s room

1. In Assets, open scenes, right-click crypt.ron, choose Duplicate, then right-click the copy, choose Rename, type hall.ron and press Enter. In art, do the same to crypt.tilemap, renaming its copy to hall.tilemap.
2. Double-click hall.ron. Rename its root Crypt to Hall.
3. In the Hierarchy, select hound_1, then Ctrl-click hound_2, skull, wolf, heart_pickup_2, sword, sign_sword, exit, pit, safe_1, safe_2, safe_3, safe_4 and safe_5, and press Delete. Keep the camera, ground, knight and its slash, bounds, hud and heart_pickup_1.
4. Rename heart_pickup_1 to heart_pickup, and set its Position to 288 and 100.

1. Select ground, and drag art/hall.tilemap onto the Tilemap slot of its TileMapComponent. Open the Tilemap tab and turn on Paint mode. It still holds the Crypt.
2. Choose Erase, set Size to 16, and, with the whole of the room in view, drag from cell (0, 6) to cell (101, 6) on each of the layers back, ground and ledges, clicking the layer’s name first. The room is empty.
3. Choose the Rect tool and the picker’s #66, and on ground drag one rectangle for each row of the first table below. Pick #45 and drag the cap of the floor. Click ledges, keep #45, and drag the ledge.
4. Press Save at the top of the Tilemap panel, and Ctrl+S.

1. Copy the picture above into art, and press Refresh in Assets.
2. Select bounds. Set its Position to 464 and 120, and its Bounds to 928 and 240.
3. Select Hall, press + Add node, and choose Parallax. Rename it backdrop. Drag art/old-dark-castle-interior-background.png onto its Sprite’s Texture, and set Size to 960 and 304, and Sort Layer to -40.
4. In its Parallax, set Factor to 0.6 and 1, Offset to 0 and -40, and Repeat Period to 960 and 0. Leave Repeat X ticked and Repeat Y unticked.
5. Press Ctrl+S.

1. Click the Levels tab. Type The Beast’s Hall into the box in the panel’s bar and press Add level. With its row selected, press Scene and choose hall.ron.
2. Drag abandoned_castle_music_-_starninjas_6.ogg onto the Music button of its row.

The arena and its gate

1. In Assets, press Create, choose New script, type arena, and press Enter.
2. In the Code tab’s Scripts list, click arena.rgs, replace everything in it with the script below, and press Ctrl+S.

/// The arena's threshold: the first time the knight walks in, it sends
/// "begin" to the group "arena", which drops the portcullis behind the knight,
/// turns the camera onto the arena, shows the boss bar and wakes the beast.
component Arena : Area {
    /// Whether the fight has begun, so it begins once.
    #[hidden]
    begun: bool = false,

    fn on_enter(other: NodeId) {
        if in_group(other, "knight") && !begun {
            begun = true;
            emit_to("arena", "begin");
        }
    }
}

1. Click the Viewport tab. Select Hall, press + Add node, choose Area, and rename it arena. Set its Position to 688 and 120.
2. In its Area, set the Shape’s Size to 368 and 80. Leave its Layer and Mask: it is on layer 0 and looks for layer 0, where the knight is.
3. Press Add component and choose Arena.
4. Press Ctrl+S.

emit_to "arena", "begin"

Sends the signal "begin" to every node in the group arena. Each hears it on the next step, with heard or an await signal. The same call told the camera to "shake" in chapter 9.

begun

A flag the script keeps, so the signal goes once. The knight’s Area may leave the arena and enter it again, and would otherwise begin the fight twice. #[hidden] keeps it out of the Inspector.

1. In Assets, press Create, choose New script, type reveal, and press Enter. In the Code tab, replace everything in reveal.rgs with the script below, and press Ctrl+S.

/// Hidden until its cue reaches the node, then shown: the portcullis, which
/// blocks once it shows, and the boss bar.
component Reveal {
    /// The signal that shows it.
    cue: String = "begin",

    fn loop() {
        if heard(cue) {
            show();
        }
    }
}

1. Click the Viewport tab. Select Hall, press + Add node, choose Shape, and rename it portcullis. Set its Position to 472 and 160, and untick its Visible. Under Groups, type arena and press Enter.
2. In its Shape, keep Kind on Rectangle, set Size to 16 and 160, Anchor to 0.5 and 1, Outline to 0, Color to 0.16, 0.15, 0.18 with an alpha of 1, and Sort Layer to 2.
3. Press Add component and choose ColliderComponent. In its Shape, set Size to 16 and 160, Offset to 0 and -80, and tick Solid.
4. Press Add component and choose Reveal. Its Cue is begin already.
5. Press Ctrl+S.

1. Select Hall, press + Add node, choose Area, and rename it wall_left. Set its Position to 472 and 120, and under Groups type wall. In its Area, set the Shape’s Size to 16 and 240, the Area’s own Layer to 3, and untick 0 in its Mask.
2. Duplicate it: rename the copy wall_right, and set its Position to 904 and 120.
3. Duplicate it again: rename the copy arena_floor, set its Position to 688 and 168, and its Shape’s Size to 416 and 16.
4. Press Ctrl+S.

The camera pulls back

1. Select camera, and in its CameraRigComponent, next to Framings, press the +. Open the new framing [1] with its arrow.
2. Set Name to arena. Click Subject, and choose arena: the Area’s node, which stands still at the room’s middle.
3. Untick Active: the framing is off until the fight begins. Set Priority to 1, above the follow framing’s 0, Zoom to 0.75, Duration to 0.6 and Ease to EaseInOut.
4. Set Dead Zone and Soft Zone to 0 and 0, Offset to 0 and 0, and Damping to 0.2 and 0.2. Leave Time at 0, Smoothing at 0.2 and Limit at 0.
5. Under Groups, add the group arena beside camera.

Priority

When two framings are on, the higher one wins. The follow framing, 0, is always on. When the arena framing is switched on, its 1 wins, and the camera blends to it over its Duration, 0.6 seconds, easing in and out. When it goes off again, the follow framing is the one left on.

Zoom 0.75

The shot shows a third more of the room: 320 divided by 0.75 is about 427 units across, and 180 divided by 0.75 is 240 up, which is the room’s height exactly. Every art pixel is drawn three screen pixels wide, which is still a whole number, so the art stays crisp.

A still subject

The arena’s node never moves, so the framing never does: the camera is locked, with no dead zone, no look-ahead and a gentle damping for the blend to settle with.

1. In Assets, press Create, choose New script, type arena_view, and press Enter. In the Code tab, replace everything in arena_view.rgs with the script below, and press Ctrl+S.

/// The camera's arena shot: when "begin" reaches the group "arena" this node
/// is in, the rig's second framing, which holds the arena still and pulled
/// back, takes over from the one that follows the knight.
component ArenaView {
    fn loop() {
        if heard("begin") {
            // The rig's framings are counted from 0: 1 is the second.
            set_flag("CameraRigComponent", "framings.1.active", true);
        }
    }
}

1. Click the Viewport tab, select camera, press Add component, and choose ArenaView.
2. Press Ctrl+S.

The boss bar

1. In Assets, press Create, choose New script, type boss_health, and press Enter. In the Code tab, replace everything in boss_health.rgs with the script below, and press Ctrl+S.

/// The boss bar's fill: as long as the beast has health left, which its
/// Wounds keep as `boss_hp`.
component BossHealth {
    /// The beast's health when whole.
    full: f32 = 20.0,
    /// The fill's length at full health.
    #[suffix("u")]
    width: f32 = 158.0,

    fn loop() {
        // The fill's right edge, from the bar's left edge, 1 unit in.
        set_number("RectComponent", "offset_max.x", 1.0 + width * kept_number("boss_hp", full) / full);
    }
}

1. Click the Viewport tab. Select hud, press + Add node, and choose Panel. Rename it boss_bar, untick its Visible, and under Groups type arena.
2. Its Rect: Anchor Min and Anchor Max 0.5 and 1, the bottom centre; Offset Min -80 and -14; Offset Max 80 and -8; Pivot 0.5 and 0.5. That is 160 units across and 6 tall, 8 above the bottom edge. Its Panel Color: 0.05, 0.05, 0.08, alpha 1.
3. Press Add component and choose Reveal.
4. Select boss_bar, press + Add node, and choose Panel: it lands under the slot. Rename it boss_fill.
5. Its Rect: Anchor Min 0 and 0, Anchor Max 0 and 1, so that it is as tall as the slot; Offset Min 1 and 1; Offset Max 159 and -1; Pivot 0 and 0. Its Panel Color: 0.6, 0.02, 0.06, alpha 1, the hearts’ red.
6. Press Add component and choose BossHealth. Leave its Full at 20 and Width at 158.
7. Press Ctrl+S.

The Nightmare’s art

1. Copy the three pictures above into art, and press Refresh in Assets.
2. Right-click nightmare-galloping.png, choose Make Animation…, and tick nightmare-idle.png too. Set Name to nightmare and press Create. It writes art/nightmare.png, 2048 by 128, and art/nightmare.anim.
3. Double-click art/nightmare.png in Assets. The Sprite sheet tab opens on it. The galloping strip is at x 0 and the idle strip at x 578.
4. Idle. Set Cell to 128 and 96, Margin to 578 and 0. Drag from cell 0, 0 to cell 3, 0: Selected 4 x 1. Press From selection; name it idle, 8 fps, Loop; Generate 1 and Clear.
5. Gallop. Set Cell to 144 and 96, Margin to 0 and 0. Drag from cell 0, 0 to cell 3, 0: Selected 4 x 1. From selection; name it gallop, 12 fps, Loop; Generate 1 and Clear.
6. Press Save in the Animation panel.
7. Double-click art/fire-ball.png. Set Cell to 19 and 16, drag from cell 0, 0 to cell 2, 0: Selected 3 x 1. From selection; name it burn, 12 fps, Loop; Generate 1. A file, art/fire-ball.anim, appears beside it.

The beast

1. Select Hall, press + Add node, choose Character, and rename it beast. Set its Position to 800 and 160. Under Groups, type enemy, then arena. Remove its Shape.
2. In its CharacterBodyComponent, set Size to 64 and 56, Driven By to Script, Gravity to 900, Terminal Velocity to 400 and Jump Speed to 360.
3. Add a SpriteComponent: drag art/nightmare.png onto its Texture, set Size to 128 and 96, Anchor to 0.5 and 1, Sort Layer to 4.
4. Add an AnimatedSpriteComponent: drag art/nightmare.anim onto Animations, set Clip to idle, and tick Frame Size.
5. Add an AreaComponent: its Shape Size 60 and 52, Offset 0 and -26, its own Layer 1, and in its Mask untick 0 and tick 2: it is an enemy that hurts the knight, and it looks for the sword’s reach.
6. Press Ctrl+S.

/// With no hearts left, the level is lost. Each step it keeps where it is,
/// for the beast to aim at.

        // Where the knight is, kept for the beast to aim at a step later.
        keep_point("knight", position());

1. In Assets, press Create, choose New script, type wounds, and press Enter. In the Code tab, replace everything in wounds.rgs with the script below, and press Ctrl+S.

/// The beast's wounds: each slash of the knight's that lands takes one of its
/// health and pushes the knight back. Its health is kept as `boss_hp`, which
/// the boss bar shows and the beast's fury reads. At none it is slain: it
/// stops, hurts nothing more, and a moment later the level is won.
component Wounds : Area {
    /// How many slashes it takes to slay.
    health: f32 = 20.0,
    /// Seconds from the last slash to the level won.
    #[suffix("s")]
    dying_time: f32 = 2.0,

    fn on_create() {
        keep_number("boss_hp", health);
    }

    fn on_enter(other: NodeId) {
        if in_group(other, "slash") && health > 0.0 {
            health -= 1.0;
            keep_number("boss_hp", health);
            // The knight is in the group "knight", and is pushed back a step
            // later.
            emit_to("knight", "recoil");
            if health <= 0.0 {
                // It stops where it is, and its Area is on no layer the
                // knight's looks for.
                set_number("CharacterBodyComponent", "velocity.x", 0.0);
                set_number("AreaComponent", "layer", 0.0);
                await wait(dying_time);
                complete();
            }
        }
    }
}

on_create and boss_hp

The beast’s health, 20, is kept as boss_hp as the Hall opens, so the bar reads it from the first step.

on_enter

Each slash that lands is the reach of the knight, in the group slash, meeting the beast’s Area. It takes one health, keeps the new number, and tells the knight, in the group knight, to "recoil": he is pushed back, as he is by any creature. At none, the beast is slain.

The death

It stops where it is, velocity.x to 0, and its Area goes to layer 0, which the knight’s does not look for, so a body still sliding cannot hurt him. It waits two seconds, and calls complete: the level is won. Chapter 14 makes it flash and burst.

1. Click the Viewport tab, select beast, press Add component, and choose Wounds. Leave its Health at 20 and Dying Time at 2.

Three moves, one at a time

1. In Assets, press Create, choose New script, type beast, and press Enter. Open it in the Code tab.

/// The beast: asleep until "begin" reaches the group "arena" it is in. Then,
/// while it lives, it rests facing the knight and makes one of three moves at
/// random, never the same one three times running: a charge to the wall, a
/// leap at the knight, or fire. Below half its health it is in a fury: its
/// rests and wind-ups are 40% shorter, it charges faster, and it breathes
/// three fireballs at once. Its health is its Wounds', kept as `boss_hp`.
component Beast : Body {
    /// Its health when whole: below half of it, the beast is in a fury.
    full: f32 = 20.0,
    /// Seconds it rests between moves.
    #[suffix("s")]
    rest: f32 = 1.0,
    /// Seconds it glows red before a move: the knight's warning.
    #[suffix("s")]
    windup: f32 = 0.6,
    /// How fast it charges.
    #[suffix("u/s")]
    charge_speed: f32 = 200.0,
    /// Seconds a leap stays in the air: twice its body's Jump Speed over its
    /// Gravity, 2 x 360 / 900.
    #[suffix("s")]
    air_time: f32 = 0.8,
    /// How far each side fireball turns from the middle one, in a fury.
    #[suffix("rad")]
    spread: f32 = 0.35,
    /// Whether "begin" has woken it.
    #[hidden]
    awake: bool = false,
    /// The way it faces: -1 for left, 1 for right. Its art faces left.
    #[hidden]
    way: f32 = -1.0,
    /// The move it made last: 0 a charge, 1 a leap, 2 fire, -1 none yet.
    #[hidden]
    last: f32 = -1.0,
    /// How many times running it has made that move.
    #[hidden]
    streak: f32 = 0.0,
    /// 1 once it is in a fury.
    #[hidden]
    fury: f32 = 0.0,
    /// Whether a charge has met a wall.
    #[hidden]
    walled: bool = false,

component Beast : Body

A script with a Body base, as the patrols’: it has the body’s hooks, such as on_hit_wall, and its own node’s body to jump and run.

The fields

The numbers it is tuned by, each in the Inspector: full, its health when whole, rest and windup in seconds, charge_speed, air_time and the fireballs’ spread. The hidden ones are its memory: awake, way it faces, the move it made last and how many times running, fury and whether a charge has met a wall.

    fn loop() {
        if !awake {
            // The arena sends "begin" when the knight walks in.
            await signal("begin");
            awake = true;
            await wait(1.0);
        }
        // Its Wounds, beside this on the beast, keep its health.
        if kept_number("boss_hp", full) > 0.0 {
            // In a fury, a rest or a wind-up takes `calm` of its time, and a
            // charge or a fireball goes `haste` times as fast.
            let calm = 1.0;
            let haste = 1.0;
            if kept_number("boss_hp", full) < full * 0.5 {
                fury = 1.0;
            }
            if fury > 0.0 {
                calm = 0.6;
                haste = 1.3;
            }
            // It faces the knight, where the knight was a step ago.
            if kept_point("knight", position()).x < position().x {
                way = -1.0;
            } else {
                way = 1.0;
            }
            set_flag("SpriteComponent", "flip.x", way > 0.0);
            play_clip("idle");
            await wait(rest * calm);

await signal("begin") and await wait

An awaitable pauses the hook where it is, and carries on from the same place later. signal("begin") waits for that signal to reach the node. wait(1.0) waits a second. In between, the beast does nothing: it is asleep.

calm and haste

Two numbers for the fury. Whole, the beast rests and winds up for the whole of its time, calm of 1, and moves at its own speed, haste of 1. Below half its health, fury is set, and does not go away: calm is 0.6, so its rests and wind-ups are 40% shorter, and haste is 1.3. The fury begins strictly below half: at 10 of 20 it is not in one, at 9 it is.

kept_point("knight", position())

Where the knight was a step ago, kept by his script. The beast turns to face it: way is -1 for left and 1 for right, and its Sprite is mirrored to match. Its art faces left.

            // One of three at random; after two of one, never a third.
            let roll = random(0.0, 3.0);
            let pick = 0.0;
            if roll >= 1.0 {
                pick = 1.0;
            }
            if roll >= 2.0 {
                pick = 2.0;
            }
            if pick == last && streak >= 2.0 {
                pick = (pick + 1.0) % 3.0;
            }
            if pick == last {
                streak += 1.0;
            } else {
                last = pick;
                streak = 1.0;
            }

            // The wind-up: it glows red.
            pulse_colour("SpriteComponent", "color", vec4(1.0, 0.4, 0.4, 1.0), 0.1, .Linear);
            await wait(windup * calm);
            // A move begins only while it lives.
            if kept_number("boss_hp", full) > 0.0 {
                set_colour("SpriteComponent", "color", vec4(1.0, 1.0, 1.0, 1.0));

                if pick == 0.0 {
                    // The charge: the way it faces, until a wall stops it.
                    play_clip("gallop");
                    walled = false;
                    set_number("CharacterBodyComponent", "velocity.x", way * charge_speed * haste);
                    await wait_until(walled);
                    set_number("CharacterBodyComponent", "velocity.x", 0.0);

                } else if pick == 1.0 {
                    // The leap: up, and sideways as far as the knight was.
                    let reach = kept_point("knight", position()).x - position().x;
                    play_clip("gallop");
                    set_number("CharacterBodyComponent", "velocity.x", reach / air_time);
                    jump();
                    // A jump leaves the ground a step after it is asked.
                    await wait_frames(3);
                    await wait_until(grounded());
                    set_number("CharacterBodyComponent", "velocity.x", 0.0);
                    // The camera's node is in the group "camera".
                    emit_to("camera", "shake");

                } else {
                    // Fire, from its mouth at the knight. Each fireball flies
                    // away from the kept muzzle, so where it is made is the
                    // way it goes.
                    let mouth = position() + vec2(way * 40.0, -62.0);
                    let aim = (kept_point("knight", position()) + vec2(0.0, -15.0) - mouth).normalized();
                    keep_point("muzzle", mouth);
                    keep_number("haste", haste);
                    spawn("fireball", mouth + aim * 8.0);
                    if fury > 0.0 {
                        let c = spread.cos();
                        let s = spread.sin();
                        spawn("fireball", mouth + vec2(aim.x * c - aim.y * s, aim.x * s + aim.y * c) * 8.0);
                        spawn("fireball", mouth + vec2(aim.x * c + aim.y * s, aim.y * c - aim.x * s) * 8.0);
                    }
                    await wait(0.3);
                }
            }
        }
    }

    fn on_hit_wall() {
        walled = true;
    }
}

The fireball

1. In Assets, press Create, choose New script, type fireball, and press Enter. In the Code tab, replace everything in fireball.rgs with the script below, and press Ctrl+S.

/// A fireball the beast breathes: it flies away from the beast's mouth, which
/// the beast keeps as `muzzle`, the way it was breathed, and is gone when it
/// meets the knight or a wall of the arena, or after `lifetime`.
component Fireball : Area {
    /// How fast it flies, before the beast's fury quickens it.
    #[suffix("u/s")]
    speed: f32 = 150.0,
    /// Seconds before it burns out.
    #[suffix("s")]
    lifetime: f32 = 3.0,
    /// How fast it flies, and which way, worked out as it is made.
    #[hidden]
    velocity: Vec2 = vec2(0.0, 0.0),

    fn on_create() {
        // Made a little way out from the muzzle, along its way. The beast keeps
        // `haste` as 1, or more in its fury.
        let way = (position() - kept_point("muzzle", position() - vec2(1.0, 0.0))).normalized();
        velocity = way * speed * kept_number("haste", 1.0);
        // Its art faces left.
        set_flag("SpriteComponent", "flip.x", velocity.x > 0.0);
        await wait(lifetime);
        destroy_self();
    }

    fn loop(dt: f32) {
        translate(velocity * dt);
    }

    fn on_enter(other: NodeId) {
        if in_group(other, "knight") || in_group(other, "wall") {
            destroy_self();
        }
    }
}

1. Click the Viewport tab. Select Hall, press + Add node, choose Sprite, and rename it fireball. Under Groups, type enemy.
2. Drag art/fire-ball.png onto its Sprite’s Texture, and set Size to 19 and 16, Anchor to 0.5 and 0.5 and Sort Layer to 7.
3. Add an AnimatedSpriteComponent: drag art/fire-ball.anim onto Animations and set Clip to burn.
4. Add an AreaComponent: its Shape Size 12 and 10, its own Layer 1, and in its Mask tick 0 and 3, and untick the rest: it looks for the knight, on layer 0, and the arena’s walls, on layer 3.
5. Add Fireball. Leave its Speed at 150 and Lifetime at 3.
6. Right-click fireball in the Hierarchy and choose Save as artifact…. In the save dialog, make a folder called artifacts, open it, and save the file as fireball.artifact. Delete the fireball left in the scene.
7. Select beast, press Add component, and choose SpawnerComponent. Press + beside Entries, open the new [0] row, type fireball as its Name, and drag artifacts/fireball.artifact from Assets onto its Artifact.
8. Press Ctrl+S.

on_create

Works out its velocity as it is made: the way from the muzzle, kept_point("muzzle", …), to where it is made, a little out from it along the aim, as a unit vector, times its speed and the beast’s kept haste. Its art faces left, and is mirrored to fly right. Then await wait(lifetime), and destroy_self(): a fireball that has met nothing burns out.

loop and translate

Moves the node by velocity × dt each step: a fireball is not a body, it just flies.

on_enter

Meeting the knight or a wall, it removes itself. The knight’s own Area hears it first, and counts a heart: a fireball is in the group enemy, like a hound.

Check it works