Sculpted cumulus

What it does

The tower is twenty overlapping lobes, each warped by its own noise so the silhouette is bitten into rather than round. Under it sit a bank with a shoulder either side, distant side masses and torn fragments up high. Layers of noise inside the shape make the broad structure, the billows and a fine granule, and coverage decides where cloud gives way to open sky.

The light is the same noise sampled a step toward the sun, which puts a hard rim on the sunward face and shadow in the pockets. Behind it the layer paints a gradient from skyTop to skyBottom with a glow round the sun. It is opaque, pinned to the screen, and drifts slowly on the shader's clock.

Features

• A sculpted tower — twenty warped lobes, placed with towerX and raised with towerHeight.
• A bank and fragments — a low bank set by bankHeight, with shoulders, side masses and high wisps.
• Coverage and detail — from open blue between the lobes to an overcast mass, with billows as fine as you like.
• Sunlit rims — contrast sets how hard light rolls into shadow, light how bright the rims burn.
• Drift — speed, in screen widths a second.
• Its own sky — two colours for the gradient behind, so nothing is needed underneath.

Good for

• Platformers — a bright daytime sky with weight behind the level.
• Flight games — a cloudscape behind the plane.
• Title screens and menus — a painted sky with no image files.

Make it yours

A towering summer storm cloud has towerHeight near its 1.4 maximum, high coverage and a hard contrast. A fair-weather sky moves the tower aside with towerX, lowers coverage so blue shows between the lobes, and drifts slowly. Deepen skyTop for a late afternoon.

A quick look

const sky = game.backdrop.add('clouds', { towerX: 0.3, coverage: 0.7 }, { skyTop: '#00388f', skyBottom: '#70dcff' });
sky.set('towerHeight', 1.1);       // live
sky.setColor('skyTop', '#001a4d');

Works with

• backdrops — the runtime; required.
• backdrop-sky — a plain gradient when the clouds are too much.
• backdrop-environments — thirteen other complete skies, among them moonlit clouds and a lightning storm.
• skymax — volumetric clouds lit by a physical atmosphere behind a 2D game, on WebGPU.

Good to know

• It is the heaviest backdrop in the set, twenty-five noise calls per pixel (one per lobe and five more): one is a whole frame's budget on a weak GPU.
• It is opaque, so anything under it is hidden and anything over it needs alpha of its own.
• One tower and one bank; a second instance simply paints over the first.
• The drift is in the shader, so it does not parallax with the world.