Tutorials · Light and Shadow · Chapter 15

A gallery of lights

Six scenes

1. In Assets, open scenes and double-click the scene the recipe names. If you changed the open scene, press Ctrl+S first.
2. Click Look through, so that the Viewport shows the scene as its own camera sees it.
3. Build the recipe, and press Ctrl+S.
4. Press F5 to play the open scene, and F5 again to stop.

A neon sign

1. Open neon.ron and click Look through.
2. Select Neon, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.06, 0.07, 0.14, alpha 1.
3. Select sign and tick its Sprite’s Unshaded.
4. Select Neon, press + Add node, and choose Light. Rename it sign_light. Set its Position to 160 and 138, on the sign, and its Kind to Sprite.
5. Under the Sprite group, set Texture to neon-glow.png and Size to 180 and 92. Set Radius to 0, Intensity to 5.0 and Color to 1.0, 0.36, 0.78, alpha 1.
6. Add another Light under Neon and rename it halo. Set its Position to 160 and 138, and leave Kind on Point. Set Channel to 1, Radius to 56, Intensity to 0.15 and Color to 1.0, 0.25, 0.65, alpha 1.
7. Select Neon, press + Add node, and choose Post Volume. Rename it sign_glow. Set its Position to 160 and 90 and its Area to Global.
8. Open Profile. Set Exposure to 1.0, Tint to 1.0, 1.0, 1.0, Saturation to 1.3 and Vignette to 0.5. Keep the bloom’s Enabled ticked, and set Threshold to 0.25, Intensity to 2.4, Blur Pairs to 2 and Spread to 8.0. Keep Aberration and Grain at 0 and Grain Rolloff at 0.85.
9. Press Ctrl+S.

A searchlight

1. In Assets, open art and select gothic-castle-tileset.png. Press Details, set Normal map to Generate, strength to 2 and bevel to 1, and press Save. gothic-castle-tileset.normal.png appears beside the picture.
2. Open searchlight.ron and click Look through. Select wall, set its Sprite’s Normal Map to gothic-castle-tileset.normal.png, and set Specular to 0.3.
3. Select Searchlight, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.08, 0.1, 0.2, alpha 1.
4. Select column_0, press Add component, and choose OccluderComponent. Set its Size to 10 and 60. Do the same on column_1 and column_2.
5. Select Searchlight, press + Add node, and choose Light. Rename it searchlight. Set its Position to 160 and 192, below the bottom of the view, so the beam begins out of sight.
6. Set Kind to Cone, Radius to 300, Intensity to 2.5, Color to 0.85, 0.92, 1.0, alpha 1, Direction to -0.5 and -0.866, and Angle to 0.5.
7. Press Ctrl+S.

1. In Assets, click Assets in the path bar over the tree, so the script is written at the project’s top, then press Create, choose New script, type sweep, and press Enter.
2. In the Code tab, replace everything in sweep.rgs with the script below, and press Ctrl+S.

/// A searchlight's sweep. The Light's Direction swings from the one it was
/// given to `right` and back, for ever, `seconds` each way, slowing at each
/// end as a heavy lamp on a pivot does.
component Sweep {
    /// The Direction at the other end of the sweep.
    right: Vec2,
    /// Seconds from one end of the sweep to the other.
    #[suffix("s")]
    seconds: f32 = 3.0,

    fn on_create() {
        pulse_point("LightComponent", "direction", right, seconds, .InOutSine);
    }
}

pulse_point

Takes a point field of another component on this node to a value and back, for ever. Here the Light’s Direction, to right and back, seconds each way.

Right

The Direction at the sweep’s other end. The Light’s own Direction is the first end. 0.5, -0.866 leans thirty degrees right of straight up, as -0.5, -0.866 leans thirty degrees left, so the beam swings a sixth of a turn.

Seconds

Seconds from one end to the other: 3, so a whole sweep out and back takes six.

1. Select searchlight, press Add component, and choose Sweep. Set Right to 0.5 and -0.866, and Seconds to 3.
2. Press Ctrl+S.

A campfire

1. Open campfire.ron and click Look through.
2. Select Campfire, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.03, 0.04, 0.1, alpha 1.
3. Select flame and tick its Sprite’s Unshaded.
4. Select stone_left, press Add component, and choose OccluderComponent. Set its Size to 22 and 30. Do the same on stone_right.
5. Select Campfire, press + Add node, and choose Light. Rename it fire_low. Set its Position to 128 and 156, and leave Kind on Point. Set Radius to 105, Intensity to 1.6, Color to 1.0, 0.55, 0.2, alpha 1, and Softness to 3.
6. Press Add component and choose Flicker. Set Low to 1.1, High to 2.1, Gap to 0.09, Reach to 120 and Breath to 1.1.
7. Add another Light under Campfire and rename it fire_high. Set its Position to 128 and 146, Radius to 70, Intensity to 1.2 and Color to 1.0, 0.82, 0.45, alpha 1. Add a Flicker and set 0.7, 1.8, 0.13, 80 and 0.8.
8. Add a third Light under Campfire and rename it embers. Set its Position to 128 and 168, on the logs, Channel to 3, Radius to 18, Intensity to 1.4 and Color to 1.0, 0.5, 0.12, alpha 1.
9. Press Ctrl+S.

Day and night

1. Open day-and-night.ron and click Look through.
2. In Assets, click Assets in the path bar over the tree, so the script is written at the project’s top, then press Create, choose New script, type daylight, and press Enter.
3. In the Code tab, replace everything in daylight.rgs with the script below, and press Ctrl+S.

/// A day in a few seconds. This node's light anneals through dawn, noon,
/// dusk and night, `phase` seconds each, and round again. `target` names the
/// light: the AmbientLightComponent on the sky, the LightComponent on the
/// sun. With `swing` ticked the sun's Direction turns with the hours too:
/// low from the east at dawn, high at noon, low from the west at dusk, and
/// back round to the east while it is night, so its shadows swing.
component Daylight {
    /// The component whose colour changes with the hours.
    target: String = "LightComponent",
    /// The colour at dawn.
    #[color]
    dawn: Vec4,
    /// The colour at noon.
    #[color]
    noon: Vec4,
    /// The colour at dusk.
    #[color]
    dusk: Vec4,
    /// The colour at night, which the scene opens at.
    #[color]
    night: Vec4,
    /// Seconds from one time of day to the next.
    #[suffix("s")]
    phase: f32 = 4.0,
    /// Whether the Direction turns with the hours: tick it on the sun.
    swing: bool = false,

    fn loop() {
        await anneal_colour(target, "color", dawn, phase, .InOutSine);
        if swing {
            anneal_point(target, "direction", vec2(0.2, 1.0), phase, .InOutSine);
        }
        await anneal_colour(target, "color", noon, phase, .InOutSine);
        if swing {
            anneal_point(target, "direction", vec2(-0.85, 0.5), phase, .InOutSine);
        }
        await anneal_colour(target, "color", dusk, phase, .InOutSine);
        if swing {
            anneal_point(target, "direction", vec2(0.85, 0.5), phase, .InOutSine);
        }
        await anneal_colour(target, "color", night, phase, .InOutSine);
    }
}

anneal_point

Takes a point field of another component on this node to a value over a time, along a curve. Here the Light’s Direction, to a new angle in phase seconds. vec2(0.2, 1.0) builds that point from two numbers.

Target

The component whose colour changes: AmbientLightComponent on the sky, LightComponent on the sun.

Dawn, Noon, Dusk, Night

The colour at each time of day. The scene opens at night, so the light’s own Color is its Night colour.

Phase

Seconds from one time of day to the next: 4, so a whole day takes sixteen seconds.

Swing

Whether the Direction turns with the hours. Tick it on the sun. An ambient light has no Direction to turn, so the sky leaves it off.

1. Select DayAndNight, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.04, 0.05, 0.12, alpha 1.
2. Press Add component and choose Daylight. Set Target to AmbientLightComponent, Dawn to 0.3, 0.22, 0.3, Noon to 0.5, 0.52, 0.6, Dusk to 0.28, 0.16, 0.2 and Night to 0.04, 0.05, 0.12, each with alpha 1. Set Phase to 4 and leave Swing unticked.
3. Select post_0, press Add component, and choose OccluderComponent. Set its Size to 8 and 84. Do the same on post_1 and post_2.
4. Select DayAndNight, press + Add node, and choose Light. Rename it sun. Set its Position to 128 and 40, Kind to Directional, Radius to 90, Intensity to 1.0, Color to 0.1, 0.12, 0.25, alpha 1, and Direction to 0.85 and 0.5.
5. Press Add component and choose Daylight. Set Target to LightComponent, Dawn to 1.0, 0.62, 0.45, Noon to 1.0, 0.96, 0.86, Dusk to 1.0, 0.46, 0.24 and Night to 0.1, 0.12, 0.25, each with alpha 1. Set Phase to 4 and tick Swing.
6. Press Ctrl+S.

A lava pool

1. In Assets, click Assets in the path bar, so the shader is written beside project.rengy, then press Create, choose New shader, type lava and press Enter.
2. Double-click lava.wgsl to open it in the Code panel, replace everything in it with the text below, and press Ctrl+S.

//! param speed: float = 1.2 range 0 6
//! param depth: float = 0.35 range 0 1
//! param heat: float = 0.5 range 0 1

// The lava pool's glow: the built-in fade, swelling brighter and dimmer over
// time as the molten rock wells up and sinks back, and hotter, yellower,
// near the pool than out at the edge of its reach.

fn light(l: Light) -> vec4<f32> {
    // 1 at the top of a swell, 1 - depth at the bottom of one.
    let swell = 1.0 - depth() * (0.5 + 0.5 * sin(time() * speed()));
    // Yellower where the light is strongest.
    let hot = mix(l.color, vec3<f32>(1.0, 0.85, 0.45), heat() * l.attenuation);
    return vec4<f32>(hot * l.energy * l.attenuation * swell, 1.0);
}

speed

How fast the glow breathes, from 0, still, to 6. 1.2 here, which is one swell every five seconds or so. The file’s own is 1.2.

depth

How far the glow dims at the bottom of a breath, from 0, not at all, to 1, out. 0.35 here, so it sinks to 0.65 of its strength. The file’s own is 0.35.

heat

How much yellower the light is near the pool than at the edge of its reach, from 0 to 1. 0.5 here, a slight warm shift. The file’s own is 0.5.

1. Open lava.ron and click Look through. Select Lava, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.02, 0.012, 0.01, alpha 1.
2. Select cave and tick its Sprite’s Light Only. Do the same on rocks_left and rocks_right. Select pool and tick Unshaded.
3. Select Lava, press + Add node, and choose Light. Rename it glow. Set its Position to 160 and 164, on the pool, and leave Kind on Point. Set Radius to 170, Intensity to 2.2 and Color to 1.0, 0.42, 0.12, alpha 1.
4. Press Add component and choose LightShaderComponent. Click its Shader slot and choose lava.wgsl, or drag the file onto the slot. Under Values is a row for each param, speed, depth and heat, each reading unset. Press Set the 3 missing parameter(s): the light holds them at the file’s own 1.2, 0.35 and 0.5, and each row reads = default. Leave them there.
5. Select Lava, press + Add node, and choose Post Volume. Rename it heat. Set its Position to 160 and 90 and its Area to Global.
6. Open Profile. Set Exposure to 1.0, Tint to 1.0, 1.0, 1.0, Saturation to 1.0 and Vignette to 0.6. Keep the bloom’s Enabled ticked, and set Threshold to 0.6, Intensity to 1.0, Blur Pairs to 2 and Spread to 2.0. Set Aberration to 1.0, and keep Grain at 0 and Grain Rolloff at 0.85.
7. Press Ctrl+S.

Light through the blinds

1. Open blinds.ron and click Look through.
2. Select Blinds, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8 and its Color to 0.12, 0.13, 0.18, alpha 1.
3. Select Blinds, press + Add node, and choose Light. Rename it window_light. Set its Position to 200 and 60, at the window, and leave Kind on Point. Set Radius to 140, Intensity to 0.35 and Color to 1.0, 0.85, 0.6, alpha 1.
4. Add another Light under Blinds and rename it slats. Set its Position to 236 and 146 and its Rotation to 20. Set Kind to Sprite, and under the Sprite group Texture to blinds.png and Size to 110 and 64. Set Radius to 0, Intensity to 3.2 and Color to 1.0, 0.88, 0.62, alpha 1.
5. Add a third Light under Blinds and rename it dark_corner. Set its Position to 286 and 166, on the floor at the right, and leave Kind on Point. Set Channel to 2, Radius to 44, Intensity to 0.08 and Color to 0.6, 0.6, 0.6, alpha 1.
6. Press Ctrl+S.

What each costs

Check it works