Tutorials · Cameras and Framing · Chapter 11

The lens

A square out of sight

1. With castle.ron open, select castle, press + Add node and choose Node. Rename it square and set its Position to 3200, 0: east of the beacon room’s far wall, at x 1984, and past all the map can see.
2. Select square, add a Tilemap and rename it square-street, at 0, 0. In its Tilemap, drag art/street.tilemap onto Tilemap: the town’s own street. Set Sort Layer to Ground, and leave Tile Size at 16, 16 and Collision ticked.
3. Select square, add a Sprite and rename it square-houses, at 1280, 24. 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.
4. Select square, add a Sprite and rename it square-sky, at 1280, -120. Drag art/night-town-background-sky.png onto Texture, set Draw Mode to Tiled, Tile Size to 96, 224, Size to 288, 224 and Sort Layer to Sky, and leave Anchor at 0.5, 0.5.
5. Press Ctrl+S. Open scenes/town.ron, right-click fog and choose Copy. Open scenes/castle.ron again, right-click square and choose Paste as child. Rename it square-fog and set its Position to 1280, -8. Remove its ParallaxComponent with the bin at the right of its header. In its Particles, set the Shape’s box to 256 by 48 and Rate to 3.

The Sprite’s Draw Mode Tiled, Tile Size

Tiled repeats the picture across the Sprite’s Size, a copy every Tile Size: 288 wide at every 96 is three whole copies of the sky. Simple, as it comes, stretches one copy over the Size.

The lens

1. Select castle, press + Add node and choose Viewport. Rename it lens-eye and set its Position to 4480, -72: the middle of the square, 72 above its street.
2. In its Viewport, choose New render target for Texture. Set Size to 64, 64, Zoom to 0.25 and Update to WhenVisible. Add four Layers: Sky, Town, Fog and Ground. Set Clear Colour to 0.012, 0.020, 0.040, alpha 1, the camera’s Background.
3. Select castle, add a Sprite and rename it lens, at 1400, -536, on the lens room’s back wall. Click Texture and choose lens-eye. Set Size to 64, 64 and Sort Layer to Fixtures, and leave Anchor at 0.5, 0.5.
4. Add another Sprite under castle, lens-bezel, at the same 1400, -536. Drag art/lens-bezel.png, which came with the starter, onto Texture, and set Size to 80, 80 and Sort Layer to Props: a brass ring round a clear window 64 across.
5. Press Ctrl+S.

WhenVisible

Draws in every frame in which something on the screen shows the view’s texture, and in no other: here, while the lens is in the picture.

A portrait, painted once

1. Select castle, add a Viewport and rename it sitter, at 2600, -800. In its Node fold, type sitter into the Groups box and press Enter.
2. In its Viewport, choose New render target for Texture, set Size to 64, 64, leave Zoom at 1, set Update to Once, tick Subtree, and leave Layers empty. Set Clear Colour to 0.18, 0.10, 0.06, alpha 1: a brown ground.
3. Select sitter, press + Add node and choose Animated Sprite. Rename it sitter-figure, at 0, 24. In its Sprite, drag art/watchman.png onto Texture, and set Size to 38, 48, Anchor to 0.5, 1 and Sort Layer to Figures. In its Animated Sprite, drag art/watchman.anim onto Animations, set Clip to idle and tick Frame Size.
4. Select castle, add a Sprite, portrait, at 1512, -536: Texture sitter, Size 64, 64, Sort Layer Fixtures. Add another, portrait-frame, at the same place: Texture art/lens-bezel.png, Size 80, 80, Sort Layer Props.
5. Press Ctrl+S.

Once

Draws when its Drawn is unticked, once, and ticks it. Saved unticked, as it comes, it draws on the first frame of its scene and keeps that picture.

Sitting again

1. Select castle, press + Add node and choose Area. Rename it easel and set its Position to 1556, -480. In its Area’s Shape, set Size to 48, 48 and Offset to 0, -24: x 1532 to 1580, on the floor.

/// The easel before the portrait. The watchman stepping up to it tells the
/// sitter, which is in the group `sitter`, to sit again.
component Easel : Area {
    fn on_enter(other: NodeId) {
        if in_group(other, "watchman") {
            emit_to("sitter", "sit");
        }
    }
}

/// The painter of the portrait, on the view that draws it. The view is Once:
/// it draws one time and keeps what it drew. When the easel says `sit`, this
/// unticks the view's Drawn, so the view counts as not yet drawn and paints
/// the sitter again, as he is now.
component Portrait {
    fn on_signal() {
        if heard("sit") {
            set_flag("ViewportComponent", "drawn", false);
        }
    }
}

1. Make easel.rgs and portrait.rgs as in chapter 7: in Assets, click Assets in the path bar, then Create, New script, the name and Enter, and the script above in the Code tab, then Ctrl+S.
2. Select easel, press Add component and choose Easel. Select sitter, press Add component and choose Portrait. Press Ctrl+S.

set_flag(component, field, value)

set_flag("ViewportComponent", "drawn", false) unticks the Drawn of the view on this node, as a click in the Inspector would. A Once view whose Drawn is unticked draws on the next frame.

Never

Draws only when its Drawn is unticked, once, and ticks it. Saved with Drawn ticked, it draws nothing and shows its Clear Colour until a script unticks it. Saved unticked, it draws on its scene’s first frame, as Once does.

What a view costs

Who moves the camera

The square, the lens and the portrait

Check it works