What it does
A segment has a start and an end down the screen (0 is the top, 1 the bottom), two colours and a band count. It
cuts the stretch between the colours into that many stripes, colouring each from its centre so every stripe is one flat
colour, and draws nothing outside its slice.
Add one segment per pair of colour stops and they join into one gradient, each with its own chunkiness. The segment that reaches the bottom edge claims the last band, so no unpainted line appears there, and alpha is honoured, so a stop that fades to transparent shows the backdrop beneath it.
Features
- Hard bands — a gradient cut into flat stripes; more bands than pixels is a smooth gradient again.
- Slices —
startandendkeep each segment to its own part of the screen. - Multi-stop gradients — one segment per pair of stops, each with its own band count.
- Alpha gradients — a stop can fade out over another backdrop.
- Live changes — the band count, the slice and the colours can change at any time.
Good for
- Retro shooters and platformers — a banded sky in the style of 16-bit games.
- Demo-style title screens — stacked stripes behind a logo.
- Sunsets in flat steps — oranges and purples in hard bands.
- Any multi-stop gradient — the two-colour sky stops at two.
Make it yours
One segment is a two-colour banded sky across the whole screen. Three or four make a sunset in stripes, coarse at the
top and fine near the horizon. Tween bands upward and the stripes melt toward a smooth blend.
A quick look
Two segments joined at 40% of the screen height, each with its own band count:
const top = game.backdrop.add('raster-bands', { start: 0, end: 0.4, bands: 18 }, { from: '#52c7e6', to: '#284fdc' });
const low = game.backdrop.add('raster-bands', { start: 0.4, end: 1, bands: 32 }, { from: '#284fdc', to: '#090d59' });
top.set('bands', 12); // liveWorks with
backdrops— the runtime; required.backdrop-sky— the smooth two-colour gradient.backdrop-starsandbackdrop-nebula— layers over the bands.backdrop-sunset— a smooth synthwave sunset with a banded sun.
Good to know
- Each segment is a full-screen pass, so an eight-stop gradient is eight passes: fine for a title screen, a lot for a busy level.
- Stripe positions come from the whole screen height, not the slice, so segments with different band counts do not
line up across the join; give both the same
bandsto match. - The stripes are horizontal only.
