Tutorials · Particle Effects · Chapter 14

Light, glow and your own look

The lamps light the town

1. Select Town, press + Add node, and choose Ambient Light. Rename it ambient. Set its Position to 8 and 8. Click Color; if the button at the top left of the picker reads U8, press it so it reads F, as in chapter 2. Set Color to 0.3, 0.34, 0.42, alpha 1: a cold blue-grey.
2. Select lamp_1, press Add component, and choose LightComponent. Leave Kind on Point. Set Radius to 150, Intensity to 2.4 and Color to 1, 0.78, 0.48, alpha 1: a warm orange.
3. Select lamp_2 and do the same.
4. Tick each lamp’s Sprite’s Unshaded. The lamp’s own picture is where the light comes from, so it keeps its painted brightness, and the next section says what Unshaded does for particles.
5. Press Ctrl+S.

Color of the Ambient Light

The light the whole town has before any lamp adds its own, three numbers from 0 to 1. A cold 0.3, 0.34, 0.42 makes the night read blue. At 1, 1, 1 nothing is dimmed, which is how the town looked until now.

Radius and Intensity of a Light

How far a Point light reaches, in world units, and how bright it is at its middle. 150 and 2.4 make a pool about as wide as a house round each lamp. Light and Shadow’s A lantern shows them at several values.

Color of a Light

The colour a light lights with, a warm orange here. Everything the light reaches is tinted by it.

What glows, what shows only in the light

1. Tick Unshaded on forge_fire, forge_sparks, fireflies, well_ring, shooting_star and fireworks: the things in the town that are themselves light.
2. Select Town, press + Add node, and choose Particles. Rename it moths and set its Position to 242.5 and 248, round the first lamp.
3. Set Rate to 6, Lifetime to 4, Speed to 10, Spread to 7 and Gravity to 0.
4. Set Start Color to 0.9, 0.9, 0.85, alpha 0.9, and End Color to 0.9, 0.9, 0.85, alpha 0. Set Start Size to 2; End Size is already 2.
5. Set Capacity to 24, Prewarm to 4 and Sort Layer to 6. Tick Light Only, and set Texture to soft-dot.png.
6. In Emission Shape, set Shape to Box, and Size to 56 and 36.
7. Tick Noise and set Strength to 20, Frequency to 0.08, Scroll to 0 and 0, and Seed to 3: a slow, wandering drift. Press Ctrl+S.

Unshaded

Draws the particles at full brightness, whatever the lights do, so they are neither darkened by the ambient light nor lit by the lamps. For things that are themselves the light: fire, sparks, fireflies, a magic ring. A sprite has it too, and it is what the lamps’ pictures use. It costs next to nothing.

Light Only

Draws the particles only where light falls, lit by it and by nothing else: in a lamp’s pool they show, and outside it they are gone. For things you see only by the light on them, such as moths, dust, rain in a beam. If Unshaded is ticked as well, Unshaded wins. It costs next to nothing.

A glow over the town

1. Select Town, press + Add node, and choose Post Volume. Rename it glow, set its Position to 320 and 180, and its Area to Global.
2. Open Profile. Set Exposure to 1, Tint to 1, 1, 1, Saturation to 1 and Vignette to 0.35.
3. Keep the bloom’s Enabled ticked, and set Threshold to 0.55, Intensity to 1.4, Blur Pairs to 2 and Spread to 3. Keep Aberration and Grain at 0 and Grain Rolloff at 0.85.
4. Press Ctrl+S.

Area

Where the volume applies. Global is the whole picture, wherever the camera looks, which is what a glow over a whole town needs.

Exposure, Tint and Saturation

The picture’s overall brightness, its colour cast and how strong its colours are. 1, white and 1 leave it as it was drawn.

Vignette

How much the corners of the picture are darkened, from 0, none. 0.35 is a light touch, which keeps the eye in the middle of the town.

Threshold, Intensity, Spread and Blur Pairs

The bloom. Threshold is how bright a pixel must be before it gives any light to the halo: 0.55, so only the fire, the sparks, the lamps and the fireflies do. Intensity is how strong the halo is, 1.4. Spread is how far it reaches, 3, and Blur Pairs is how smooth, 2; each pair is two more passes over the picture.

Aberration, Grain and Grain Rolloff

A coloured fringe at the corners, film grain, and how much grain the brightest parts keep. This town uses none, so 0, 0 and 0.85 leave them off. Light and Shadow’s Glow teaches every field of a Post Volume.

Every spark its own colour

1. In Assets, click Assets in the path bar, so the shader is written beside project.rengy, then press Create, choose New shader, type spark-hue and press Enter. A shader is written in the editor, as in Light and Shadow’s chapter 12.
2. Double-click spark-hue.wgsl to open it in the Code panel, replace everything in it with the text below, and press Ctrl+S.
3. In Assets, open artifacts and double-click firework.artifact. It opens as a scene of its own, with one node, firework, which is the burst each shell makes.

//! param twinkle: float = 9.0 range 0 30

// Each spark of a firework in a colour of its own. The emitter's Custom Data
// hands every spark four numbers, which arrive here as frag.custom:
//   x  its hue, 0 to 1 round the colour wheel, drawn at random at birth;
//   y  how brightly it burns, a curve over its life;
//   z  how much of its hue shows, the same for every spark;
//   w  where it is in its twinkle, drawn at random so no two twinkle together.

// A fully saturated colour at hue h, 0 to 1 round the wheel.
fn hue(h: f32) -> vec3<f32> {
    let k = vec3<f32>(0.0, 2.0 / 3.0, 1.0 / 3.0);
    return clamp(abs(fract(vec3<f32>(h) + k) * 6.0 - 3.0) - 1.0, vec3<f32>(0.0), vec3<f32>(1.0));
}

fn shade(frag: Fragment) -> vec4<f32> {
    let base = texel(frag.uv) * frag.color;
    let colour = mix(vec3<f32>(1.0), hue(frag.custom.x), frag.custom.z);
    let flicker = 0.75 + 0.25 * sin(time() * twinkle() + frag.custom.w);
    let glow = frag.custom.y * flicker;
    return vec4<f32>(base.rgb * colour * glow, base.a * glow);
}

1. Select firework and tick Unshaded, so that the town’s lights do not dim the burst.
2. In the Custom Data group, tick Custom Data. Set X to Random, with Min 0 and Max 1. Set Y to Over Life, and open its Curve in the curve editor, as in chapter 5. It has two points, the left one at x 0 and y 1: click the right one and set its y to 0.7. Set Z to Fixed, with an Amount of 0.85. Set W to Random, with Min 0 and Max 6.28.
3. Press Add component and choose ShaderMaterialComponent. Click its Shader slot and choose spark-hue.wgsl, or drag the file onto the slot. Under Values is a row for the shader’s one param, twinkle, reading unset. Press Set the 1 missing parameter(s): the material holds it at the file’s own 9.0, and the row reads = default. Typing 9 into its box would hold nothing: the box takes only a change.
4. Press Ctrl+S. Then open scenes/town.ron again from Assets, to go back to the town.

Custom Data

Four numbers that each particle carries, for a material to read as frag.custom. Ticked, every particle is born with its own four, set by the channels below. Unticked, no particle carries any, and a material reads zeros. It is the one way a shader can tell two particles of one emitter apart.

X, Y, Z and W

The four channels, each set one of three ways. Fixed gives every particle one Amount. Random draws a number once, at a particle’s birth, between Min and Max. Over Life reads a number from a Curve every step, along the particle’s life from birth, at the left, to death, at the right.

X

Here the hue, 0 to 1 round the colour wheel, drawn at random: every spark a colour of its own.

Y

Here how brightly the spark burns, 1 at birth falling to 0.7 at death. A lower end makes the sparks fade as they fall.

Z

Here how much of its hue a spark shows, 0.85 for every spark. 1 is the full colour, 0.5 to 0.9 keeps a warm look, and 0 is white.

W

Here where the spark is in its twinkle, 0 to 6.28, a whole turn of a circle in radians, drawn at random so that no two sparks twinkle together.

Shader

The .wgsl file the node is drawn through: spark-hue.wgsl. On an emitter’s node it draws every one of the emitter’s particles; on a sprite’s node it draws the sprite. Left empty, the node draws as it always did.

twinkle

The shader’s own value, the one param its first line declares: how fast the sparks twinkle, 9. From 5 to 15 is a shimmer, and higher is a flutter.

A lantern-bat and its ribbon

1. Make bat.rgs the way you made the others, with the script below, and press Ctrl+S.
2. Select Town, press + Add node, and choose Sprite. Rename it bat. Set its Position to 150 and 150, its Texture to bat.png, its Size to 12 and 8, and its Sort Layer to 7.
3. Press Add component and choose TrailComponent. Leave Emitting ticked and Tail Width at 0. Set Head Width to 3, Color to 1, 0.8, 0.45, alpha 0.8, Lifetime to 0.8, Max Length to 90, Min Distance to 3, Break Speed to 1200 and Sort Layer to 6.
4. Press Add component again and choose LightComponent. Leave Kind on Point, and set Radius to 36, Intensity to 1.2 and Color to 1, 0.75, 0.4, alpha 1: the bat carries a lantern.
5. Press Add component once more and choose Bat. Set Home to 150 and 150. Swoop starts at the script’s own 0.9: leave it.
6. Press Ctrl+S.

/// A lantern-bat's round over the rooftops. It flits right across the town in
/// three swoops, rests, then darts back to `home` in one jump, too fast for
/// its ribbon to follow, so the ribbon breaks instead of drawing a line back
/// across the sky.
component Bat {
    /// Where each round starts.
    home: Vec2,
    /// Seconds for one swoop.
    #[suffix("s")]
    swoop: f32 = 0.9,

    fn loop() {
        move_to(home);
        await wait_frames(1);
        await anneal_by(vec2(90.0, -24.0), swoop, .InOutSine);
        await anneal_by(vec2(90.0, 30.0), swoop, .InOutSine);
        await anneal_by(vec2(90.0, -30.0), swoop, .InOutSine);
        await wait(0.6);
    }
}

Emitting

Whether the ribbon records new points. This is the Trail’s own, apart from the emitter’s from chapter 1. Unticked, no point is added, and the ribbon shortens as its old points run out, which is how a ribbon can be ended gently. Leave it ticked.

Head Width

The ribbon’s width at the node, in world units: 3 here, about a third of the bat. 2 to 6 suits a streak behind a small thing.

Tail Width

Its width at its far end, in world units. 0 tapers it to a point, as a comet’s tail does.

Color

The ribbon’s one colour: three numbers and an alpha. A warm 1, 0.8, 0.45, with an alpha of 0.8 that lets the sky show through.

Lifetime

Seconds a recorded point lasts before it drops off the ribbon’s tail: 0.8. 0 means no time limit. A longer life makes a longer ribbon, up to Max Length.

Max Length

The longest the ribbon may be, in world units: 90. 0 means no length limit. With both this and Lifetime at 0 the engine caps the ribbon, so it cannot grow for ever.

Min Distance

How far the node must move before another point is recorded, in world units: 3. Smaller gives a smoother curve, and more points to draw.

Break Speed

Above this speed, in world units a second, a move counts as a jump: the ribbon breaks there and starts again, instead of drawing a line across the jump. 1200 here. 0 switches the guard off.

Sort Layer

Where the ribbon is drawn among the town’s layers, like the emitter’s: lower first, so further back. 6 puts it behind the bat’s own 7.

anneal_by and wait_frames

anneal_by carries the node by an amount over a time, along an easing: here .InOutSine, which starts and ends gently. wait_frames waits that many frames, where wait waits seconds.

Home and Swoop

Where each round starts, 150, 150, and the seconds one swoop takes, 0.9. A swoop of 0.6 to 1.2 seconds reads as a bat’s flit.

The recipes

Check it works