Tutorials · Cameras and Framing · Chapter 13

A gallery of cameras

Eight scenes and a corridor

1. Choose File › New scene. Press + Add node, choose Node, and rename it gallery-monitor. Choose File › Save as…, open the project’s scenes folder, name the file gallery-monitor.ron, and save.
2. Select gallery-monitor, press + Add node and choose Tilemap. Rename it room, and leave its Position at 0, 0.
3. With room selected, open the Tilemap tab beside the Inspector. Drag art/old-dark-castle-interior-tileset.png from Assets onto New tilemap…. Before you paint, rename the new file gallery.tilemap in Assets.
4. In the tab’s Tileset fold, set Margin y to 8: tiles 16 by 16 and 52 columns, as the castle’s. In its Layers fold, click ground, the solid layer, so it is the one you paint on. back stays empty.

Margin

The Tilemap tab’s Margin, in its Tileset fold: where the grid of tiles starts on the sheet, in pixels from its top-left corner. New tilemap… starts it at the corner, 0, 0. The castle’s tiles are 8 lower: with Margin y 8, every row of the stone pillar the corridor is made of is a whole tile you can pick.

1. Under Tools, click Brush. Choosing a tool turns on Paint mode at the top of the tab: a click in the Viewport now paints, and selects nothing.
2. To pick a tile, hover the tiles in the picker at the tab’s foot until the tooltip reads its number, #593 for the body’s first, and click it: the Tile line over the picker shows it. If the tiles are too small to hit, raise Zoom beside it.
3. Paint each piece’s first two columns by hand, one tile a cell, all its rows; the floor’s three pieces share their columns, so paint them as one block five rows deep. Then click Pick and drag over the block, click Stamp, and click the cell two columns along, and every second cell after it, to the piece’s end. Pick lifts any block you drag over, so once four columns are painted you can pick the four and stamp four at a time, then eight. Stop at the piece’s end: a stamp that runs past it paints over what is beyond.
4. The floor’s 125 columns leave one over at its east end, column 124, which takes the left-hand tiles: paint its five rows on their own. The ceiling’s 129 columns leave one over too, column 126, which takes the left-hand tiles: paint it on its own. The east wall starts in an odd column, so its first column, 125, takes the right-hand tiles and its second the left.
5. The walls run down: paint their top two rows by hand, and stamp that block down every second row; the row left over at the foot you paint on its own.
6. Press the tab’s Save, which writes the tilemap. In the Inspector, set room’s Sort Layer to Ground, and leave Tile Size at 16, 16 and Collision ticked.

1. Press Ctrl+S. Open scenes/town.ron, right-click watchman in the Hierarchy and choose Copy. Open scenes/gallery-monitor.ron, right-click gallery-monitor and choose Paste as child. The map’s eye comes with him: select map-eye, under him, and press Delete. Set his Position to 96, 0.
2. Select gallery-monitor, press + Add node and choose Camera. Rename it camera. Set Scaling to Letterbox, Extent to 180, Width to 320 and Background to 0.012, 0.020, 0.040, alpha 1, the town camera’s; leave Pixel Snap ticked.
3. Press Ctrl+S.
4. The other six corridor scenes start as this one does. Choose File › Save as…, name the file gallery-portal.ron, rename the root gallery-portal, and press Ctrl+S. Do the same for gallery-magnifier, gallery-spyglass, gallery-autoscroller, gallery-cinema and gallery-phone.

A security monitor

1. In Assets, click Assets in the path bar, press Create, choose New shader, type scanlines and press Enter. Double-click it, replace everything in it with the first text below in the Code tab, and press Ctrl+S. Make snap.rgs the same way with New script, from the second.
2. Open scenes/gallery-monitor.ron. Select camera and set its Position to 200, -60.
3. Select gallery-monitor, press + Add node and choose Viewport. Rename it vault-eye and set its Position to 1400, -60: the vault.
4. In its Viewport, choose New render target for Texture. Set Size to 64, 48, Zoom to 0.5 and Update to Never, and tick Drawn. Set Clear Colour to 0.10, 0.12, 0.14, alpha 1: a grey. Leave Subtree unticked and Layers empty, the whole scene.
5. Press Add component and choose Snap. Leave its Every at 0.5.
6. Select gallery-monitor, press + Add node and choose Shader Material. Rename it monitor and set its Position to 320, -64. In its Sprite, click Texture and choose vault-eye, and set Size to 64, 48 and Sort Layer to Fixtures. In its Shader Material, choose scanlines.wgsl for Shader, and leave lines unset.
7. Select gallery-monitor, press + Add node and choose Animated Sprite. Rename it vault-demon, at 1400, 0, on the floor. In its Sprite, drag art/demon-idle.png onto Texture, and set Size to 160, 144, Anchor to 0.5, 1 and Sort Layer to Props. In its Animated Sprite, drag art/demon-idle.anim onto Animations, set Clip to idle and tick Frame Size.
8. Press Ctrl+S.

// How many dark lines cut across the picture, from its top to its bottom. Each
// line is one row of the picture, the one under a row that is left as it is.
//! param lines: float = 24.0

// The security monitor's screen. It draws the monitor's picture, the vault's
// view, a row at a time: the first row of every pair as it is, and the second
// darkened, so the picture is cut by dark lines the way an old screen's is.
fn shade(frag: Fragment) -> vec4<f32> {
    // How far down the picture this pixel is, from 0 at its top to 1 at its
    // bottom.
    let down = region_uv(frag).y;
    // Where it is in its pair of rows, from 0 at the pair's top to 1 at its
    // bottom: past the half, it is in the second row, the dark one.
    let in_the_pair = fract(down * lines());
    let dim = select(1.0, 0.55, in_the_pair >= 0.5);
    // The picture's own colour at this pixel, times the sprite's Color; the
    // darkening takes the colour down and leaves the alpha alone.
    let picture = texel(frag.uv) * frag.color;
    return vec4<f32>(picture.rgb * dim, picture.a);
}

/// The security monitor's camera. Its view is Update Never and saved with Drawn
/// ticked, so it shows nothing but its Clear Colour until something unticks
/// Drawn: this does, every `every` seconds. The view is then not yet drawn, so
/// it draws the vault once more, as it is now, and keeps that picture until
/// the next snap.
component Snap {
    /// Seconds between one snap and the next.
    #[suffix("s")]
    every: f32 = 0.5,

    fn loop() {
        // Wait out the time between snaps, then untick Drawn on this view.
        await wait(every);
        set_flag("ViewportComponent", "drawn", false);
    }
}

//! param lines: float = 24.0

How many pairs of rows the picture is cut into, top to bottom: 24, the file’s own, while the monitor’s Values hold none. The shader reads it as lines().

region_uv(frag)

Where this pixel is in the sprite itself, from 0, 0 at its top-left corner to 1, 1 at its bottom-right. frag.uv is where it is in the whole texture.

await wait(seconds)

Holds the hook where it is for that many seconds; it goes on from the next line once they have passed.

A doorway onto a far side

1. Make swirl.wgsl as you made scanlines.wgsl, with the shader below. It starts with chapter 12’s ripple.
2. Open scenes/gallery-portal.ron. Select camera and set its Position to 96, -24, his framed point. Press Add component and choose CameraRigComponent. Next to Framings, press +, open the framing, set its Name to follow, choose watchman for Subject, and set Offset to 0, 24. Leave the rest as it comes.
3. Select gallery-portal, add a Viewport and rename it far-eye, at 1700, -80. In its Viewport, choose New render target for Texture, and set Size to 32, 64, Zoom to 0.5 and Update to WhenVisible. Leave Clear Colour as it comes, clear, Subtree unticked and Layers empty.
4. Select gallery-portal, add a Sprite, far-houses, at 1700, -16. Drag art/night-town-background-town.png onto Texture, and set Size to 512, 99, Anchor to 0.5, 1 and Sort Layer to Town.
5. Add another Sprite, far-sky, at 1700, -80: Texture art/night-town-background-sky.png, Size 96, 224, Sort Layer Sky, and Anchor left at 0.5, 0.5.
6. Select gallery-portal, press + Add node and choose Shader Material. Rename it doorway and set its Position to 480, -32: standing on the floor, x 464 to 496. In its Sprite, click Texture and choose far-eye, and set Size to 32, 64 and Sort Layer to Fixtures. In its Shader Material, choose swirl.wgsl, and leave turns unset.
7. Press Ctrl+S.

// The ripple, from ripple.wgsl, which the cistern's water and the beacon's hot
// air use too.
//! include ripple
// How many turns the picture is wound by, from its edge to its middle.
//! param turns: float = 1.5

// The doorway onto the far side. It draws the doorway's picture, the far
// side's view, wound round its middle: the nearer a pixel is to the middle,
// the further round the place it reads from is turned, and the winding turns
// on by itself as the time goes on. The ripple moves where it reads from a
// little more, so the doorway never settles.
fn shade(frag: Fragment) -> vec4<f32> {
    // Where this pixel is in the doorway, from -1 to 1 each way, from its
    // middle.
    let from_middle = region_uv(frag) * 2.0 - vec2<f32>(1.0, 1.0);
    // How near the middle it is: 1 at the middle, 0 from the edges' middles
    // out.
    let near_middle = clamp(1.0 - length(from_middle), 0.0, 1.0);
    // How far round to turn it, in radians: more the nearer the middle, and a
    // little more every second.
    let angle = near_middle * turns() * 6.2831853 + time();
    let turned = vec2<f32>(
        from_middle.x * cos(angle) - from_middle.y * sin(angle),
        from_middle.x * sin(angle) + from_middle.y * cos(angle),
    );
    // Back to a place in the picture, moved by the ripple: up to one pixel of
    // the picture itself.
    let here = frag.screen_uv * resolution();
    let place = frag.region.xy
        + (turned * 0.5 + vec2<f32>(0.5, 0.5)) * (frag.region.zw - frag.region.xy)
        + ripple(here, time()) * sheet_texel();
    return texel(region_clamp(frag, place)) * frag.color;
}

//! param turns: float = 1.5

How many whole turns the picture is wound at its middle. The shader reads it as turns().

frag.region

The sprite’s own rectangle in its texture, from the corner xy to the corner zw, each from 0 to 1. A place worked out from region_uv goes back into the texture through it.

region_clamp(frag, place)

Holds a place inside the sprite’s own rectangle, half a pixel clear of its edge, so a place turned past the edge reads the edge and nothing beyond it.

sheet_texel()

One pixel of the sprite’s own texture, as a share of it: the ripple, from -1 to 1, moves where the swirl reads by up to one pixel of the far side’s picture. Chapter 12’s texel_size() is a pixel of the screen.

A magnifying glass

1. Open scenes/gallery-magnifier.ron. Give camera the doorway’s rig: Position 96, -24, and a CameraRigComponent with one framing, follow, Subject watchman, Offset 0, 24.
2. Select gallery-magnifier, add a Sprite and rename it lever, at 132, -24. Drag art/lever.png onto Texture, and set Size to 20, 24, Anchor to 0.5, 1 and Sort Layer to Props: the starter’s lever, at the height of his hand, just east of where he starts.
3. Select watchman, press + Add node and choose Viewport: it lands under him. Rename it glass and set its Position to 36, -40: at his hand.
4. In its Viewport, choose New render target for Texture. Set Size to 32, 32 and Zoom to 2, and leave Update at Always and Subtree unticked. Add two Layers, Ground and Props. Set Clear Colour to 0.04, 0.05, 0.07, alpha 1, the map’s.
5. Press Add component and choose SpriteComponent. Click Texture and choose glass, and set Size to 32, 32 and Sort Layer to Glass.
6. Select glass, add a Sprite and rename it glass-rim, at 0, 0. Drag art/lens-bezel.png onto Texture, and set Size to 40, 40 and Sort Layer to Marks.
7. Press Ctrl+S.

The Viewport’s Zoom above 1

Closer than the picture: at 2 a pixel of the texture is half a unit, so the glass’s 32 pixels see 16 units, and its Sprite, 32 units across, shows them twice as big. Every view before this one was at 1 or under.

A title screen

1. Choose File › New scene. Add a Node, rename it gallery-title, and choose File › Save as…: scenes/gallery-title.ron.
2. Select gallery-title, add a Camera and rename it camera, at 0, -90. Set Scaling to Letterbox, Extent to 180 and Width to 320, and Background to 0.4, 0.1, 0.04, alpha 1: a dusk’s orange. It sees x -160 to 160 and y -180 to 0.
3. Make three planes under gallery-title, each with + Add node → Parallax, as chapter 6’s were, from the table below. Every picture is in art, named night-town-background- and the layer. Each plane is at 0, 0, its Sprite’s Anchor at 0.5, 0.5, and a field the table does not name stays as it comes.

1. Select gallery-title, press + Add node and choose Canvas. Rename it title, and leave it as it comes: Reference Size 1280, 720, ScaleWithHeight.
2. Select title, press + Add node and choose Label. Rename it title-label. In its Rect, set Anchor Min and Anchor Max both to 0.5, 0.3, Offset Min to -450, -80 and Offset Max to 450, 80: a box 900 by 160 round a point 30 percent of the way down the screen. Leave Pivot at 0.5, 0.5.
3. In its Text, set Text to The Lookout, Scale to 6, Color to 1, 0.92, 0.8, alpha 1, and Align to Center.
4. Press Ctrl+S.

The Label’s Text, Scale and Align

What it says; how big, 2 as it comes; and where across its box it sits, Center here, Left as it comes. Its Color is the colour its letters are drawn in.

A spyglass

1. Open scenes/gallery-spyglass.ron. Select gallery-spyglass, add a Node and rename it far-tower, at 1500, -80: the middle of its beacon, about 1400 units east of him.
2. Select far-tower, add a Sprite, far-pillar, at 0, 80: the floor. Drag art/gothic-horror-tiles.png onto Texture, click Atlas Region, type pillar and press Enter. Set Size to 32, 48, Anchor to 0.5, 1 and Sort Layer to Fixtures.
3. Select far-pillar, add a Sprite, far-beacon, at 0, -48: the same picture, Atlas Region beacon, Size 32, 64, Anchor 0.5, 1, Sort Layer Fixtures.
4. Select gallery-spyglass, add a Sprite and rename it sky, at 1000, -8. Drag art/night-town-background-sky.png onto Texture, set Draw Mode to Tiled, Tile Size to 96, 224, Size to 2000, 224 and Sort Layer to Sky, and leave Anchor at 0.5, 0.5: x 0 to 2000 and y -120 to 104, the length of the corridor, its top just above the highest the camera looks and its foot behind the floor.
5. Select camera and set its Position to 96, -24, his framed point. Press Add component and choose PixelPerfectComponent: Assets PPU 1, Reference Width 320, Reference Height 180, then tick Upscale Render Texture and Crop Frame, as in chapter 3.
6. Press Add component and choose CameraRigComponent. Add a framing, look: Subject watchman, Offset 0, 24, the rest as it comes.
7. Add a second framing, spyglass: Subject far-tower. Untick its Active, and set Priority to 10, Zoom to 3 and Duration to 0.6. Leave Ease at EaseInOut and the rest as it comes.
8. Make spyglass.rgs with the script below. Select camera, press Add component and choose Spyglass. Press Ctrl+S.

/// The spyglass. The camera's rig has a framing called `spyglass` that looks at
/// the far tower and is off. While Down is held this switches it on, and the
/// camera glides over and draws the tower close; let go and it switches it off,
/// and the camera glides back to him.
component Spyglass {
    fn loop() {
        // `down` is the Down arrow or S. Held: the spyglass framing is on. Let go:
        // it is off.
        set_flag("CameraRigComponent", "framings.spyglass.active", held("down"));
    }
}

held("down")

True on every step the action down is held: the Down arrow or S. Not Up: Up is also his jump.

An auto-scroller

1. Make scroll.rgs and held.rgs with the two scripts below.
2. Open scenes/gallery-autoscroller.ron. Select camera and set its Position to 160, -60. Press Add component and choose CameraRigComponent, and untick its Enabled. Add a framing, follow: Subject watchman, Offset 0, 24, the rest as it comes.
3. Press Add component and choose Scroll. Select watchman, press Add component and choose Held, and leave its Margin at 16.
4. Press Ctrl+S.

/// The auto-scroller's camera. Its rig is off, so nothing follows him: this
/// sends the camera down the corridor by itself, at a steady 48 units a second
/// for half a minute, and then switches the rig on, which finds him wherever the
/// scroll has left him.
component Scroll {
    fn on_create() {
        // The first step: start the glide to the far end of the corridor, at one
        // pace all the way.
        anneal_to(vec2(1600.0, -60.0), 30.0, .Linear);
        // Wait the glide out.
        await wait(30.0);
        // Then the rig, off until now, takes the camera back to him.
        set_flag("CameraRigComponent", "enabled", true);
    }
}

/// Keeps him inside what the camera shows. A camera that scrolls on its own
/// does not wait for him, so this puts him back inside the view, by a margin,
/// whenever the edge has caught up with him.
component Held {
    /// How far inside the edge of the view he is kept.
    #[suffix("u")]
    margin: f32 = 16.0,

    fn loop() {
        // What the camera shows now: (left, top, right, bottom).
        let view = camera_view();
        let here = position();
        // The nearest place to him that is inside the margin.
        let inside = vec2(
            clamp(here.x, view.x + margin, view.z - margin),
            clamp(here.y, view.y + margin, view.w - margin),
        );
        // Move him only when he is outside it, so that he walks as he does
        // when the view is wide of him.
        if inside.x != here.x || inside.y != here.y {
            move_to(inside);
        }
    }
}

on_create()

Runs once, as the scene starts. It may wait, as this one does: the rest of it runs 30 seconds later.

anneal_to(point, seconds, ease)

Moves this node to point over that many seconds, in the ease’s shape: .Linear at one pace. The camera goes 1440 units in 30 seconds, 48 a second, to the corridor’s far end.

position() and move_to(point)

Where this node is, and putting it somewhere else. Held moves him only when the view’s edge has caught up with him, so between times he walks as he always does.

clamp(value, low, high)

The value, held between the two: here, his place held inside the view less the margin, on both axes.

Cinema bars

1. Open scenes/gallery-cinema.ron. Select camera, set its Position to 160, -60, its Extent to 134, and its Background to 0.10, 0.02, 0.03, alpha 1: a dark red. Its Width stays 320.
2. Select gallery-cinema, add a Sprite and rename it sky, at 160, -60. Drag art/night-town-background-sky.png onto Texture, set Draw Mode to Tiled, Tile Size to 96, 224, Size to 384, 224 and Sort Layer to Sky, and leave Anchor at 0.5, 0.5: x -32 to 352, y -172 to 52, the whole picture and more.
3. Press Ctrl+S.

The bars

What a Letterbox draws where the window is not its picture: the camera’s Background, above and below when the picture’s shape is wider than the window’s, at the sides when it is narrower.

A phone

1. Make swap.rgs with the script below.
2. Open scenes/gallery-phone.ron. Rename camera to tall and set its Position to 96, -96: the corridor’s 192 of height in the middle of its 320. Set its Width to 180 and Extent to 320, and leave Active ticked.
3. Press Add component and choose Swap, and tick its On.
4. Right-click tall in the Hierarchy and choose Copy; right-click gallery-phone and choose Paste as child. Rename the copy wide. Set its Scaling to FixedHorizontal and Extent to 180, untick its Camera’s Active, and untick its Swap’s On. Its Width stays the copied 180, which FixedHorizontal does not read.
5. Select gallery-phone, add a Sprite and rename it sky, at 96, -96, the cameras’ place. Drag art/night-town-background-sky.png onto Texture, set Draw Mode to Tiled, Tile Size to 96, 224, Size to 192, 640 and Sort Layer to Sky, and leave Anchor at 0.5, 0.5: x 0 to 192 and y -416 to 224, more than either camera shows on a phone. Its tiles meet at y -192, just under the ceiling’s stone, and at 32, inside the floor’s, so no seam shows.
6. Press Ctrl+S.

/// One of the phone's two cameras. Each carries this script, and E swaps them:
/// the camera that was the game's lets go of it, and the other takes it.
component Swap {
    /// Whether this camera is the one the game is seen through. The tall camera
    /// starts on and the wide one off.
    on: bool = false,

    fn loop() {
        // E or Enter is the action key.
        if pressed("action") {
            on = !on;
            if on {
                // This camera becomes the game's, and the other goes off.
                make_current();
            }
        }
    }
}

pressed("action")

True on the one step the action is pressed: E or Enter. Both cameras’ scripts see it on the same step, so one E swaps them: the one that was on turns off, and the other calls make_current(), chapter 9’s, which makes it the game’s and switches every other camera off.

Who moves the camera

Check it works