Pixel Paw Productions home

Devlog · · Wyatt · 6 min read

Rain and Snow That Build Up in a Pixel Art City

Time-lapseSped up 5xOne corner going from dry to soaked in steady rain: the paving darkens, the joints go dark, the lamp starts to streak.

The weather in Philadelphia Fiefdom builds up over time. Rain soaks the streets gradually, and only once the ground is soaked do the gutters and puddles start to fill. Snow lies a dusting at a time, then gets trodden, rutted and churned into slush. Whether it falls as rain, sleet or snow depends on the temperature, which drops at night. It all runs on the game's clock, and every player in a game sees the same weather.

Last time I covered the one shader that draws the city. The weather is drawn by that same shader, reading what the simulation has built up.

How does the weather build up over time?

The simulation keeps a handful of numbers that rise and fall at fixed rates per game hour: how wet the ground is, how much water stands, how much snow lies, and how much ice, frost and slush there is. Rain and snow don't set these. They feed them.

At full rain, the ground goes from dry to soaked in under a minute of play (about 40 minutes on the game's clock, which runs a minute of game time every real second). Once it's past 60% soaked, the gutters and puddles start filling. When the rain stops, the ground dries and the puddles drain, both faster when it's warm and sunny. The dips and gutters wet first and dry last, so a drying street keeps its wet edges along the curbs for a while.

The temperature drives the rest. The air is colder at night, and the ground follows the air about an hour behind. Above 2 °C it rains. Between 0 and 2 °C it sleets, half rain and half snow. Below freezing, it snows. Snow only lies once the ground is cold enough, and under snow the ground holds at freezing. When it thaws, the meltwater wets the ground and fills the puddles. Water on freezing ground turns to ice, and clear, cold nights leave frost.

The weather belongs to the world, not the screen. A second player sees the same rain, and each raindrop lands on the same frame at the same spot for both of you.

What does a wet street look like in pixel art?

Wet surfaces darken by how porous they are. Brick, concrete and asphalt drink the water in and go much darker. Paint, metal and glazed tile only take a film. Both get glossier as the water stands on them.

On paving, the wet is drawn through the pattern from the last post. The joints and cracks go dark and deep. Each paving stone's beveled rim facing you catches the light, and the rim facing away goes a step darker. It's what makes a wet sidewalk read as wet at 640x360.

Dry: The same corner at 19:00, dry and then soaked: every paving stone gets dark joints and a lit rim.Dry
Soaked: The same corner at 19:00, dry and then soaked: every paving stone gets dark joints and a lit rim.Soaked
The same corner at 19:00, dry and then soaked: every paving stone gets dark joints and a lit rim.

Then there's the reflection. While the street is wet enough, the game draws the whole view a second time, mirrored about the road's surface. The shader reads that mirror at its own pixel, so reflections line up exactly with the street. When it's dry, the mirror isn't drawn at all and costs nothing.

12th and Spruce in the rain at 22:00: lamp, signal and headlamp light streaking on the wet road.

Bright lights in the wet don't show as clean copies. A lamp, a lit window or a sign smears into a long streak down the road toward you, the way it does on a real wet street. The streak is broken up the way wet stone breaks it: each paving stone takes its own share of the light, its pixels ragged, and anything dark standing between cuts the streak off. And soaked ground takes less of a lamp's round pool of light, because the water mirrors it toward your eye as a streak instead.

Where does the rain actually go?

Each raindrop is defined once, landing at a known point on a known frame. That lets the rest of the world agree with it:

  • A drop that lands in a puddle makes a ring there, on the same frame its streak came down. Footsteps ring the puddles too, wider and slower.
  • Walls facing into the wind take the rain, and walls turned away stay dry. Water runs down the wet ones in thin runs, pushed sideways by the wind, and beads sit on window glass.
  • A drop that lands on an awning or a lamp head runs down it as a bead and drips off the edge. It's the same drop you saw fall.
  • Gutters flow toward their drains. The ground under a parked car stays dry, and the ground under a tree's crown only gets damp.

How does snow settle?

The first flakes lie slowly. Then all the cold ground takes a dusting at once that fills in, deeper in the drifts and shallower where the wind scours it. The drifts run out in long ridges along the way the wind was blowing when the snow first lay. An early version laid snow only where the drift noise allowed, and it popped in as islands next to bare ground.

Things that face up get snow with real depth on them. Lamp hoods, bench slats, awning tops and the rest of the street furniture get snow caps. Each holds what its width can hold: a ridge on something narrow, a low dome on a lamp hood, with a rounded lip bulging over the edge. Building tops and the walls facing the wind get snow too.

Before: A lamp hood and an awning before the snow and after it: each takes what its width can hold.Before
After: A lamp hood and an awning before the snow and after it: each takes what its width can hold.After
A lamp hood and an awning before the snow and after it: each takes what its width can hold.
Time-lapseSped up 15xFresh snow to trodden, on one block.

What happens to snow once people walk on it?

It gets used:

  • Every footstep presses a boot print, and running ones press harder. In deep snow walkers wade, leaving a trench, and they slow down.
  • Every wheel leaves a continuous rut. Where the snow's deeper than a car's underbody, the strip between its wheels gets shaved down.
  • Fresh snow fills the prints and ruts back in.
  • The traffic lanes churn to gray-brown slush, wetter and shinier than the rest. Along the lanes are plowed banks, broken where a parked car was dug out.
  • Boots that went through snow or standing water carry it onto dry floors in fading prints.

What about icicles and cars?

Icicles grow along awnings' drip lines when meltwater from lying snow drips into freezing air, faster in the daytime sun. Above freezing they melt and drip from their tips. Each spot grows the same icicle on every player's screen.

Cars carry their own weather. Snow lies on a parked car as it does on the street; driving blows it off, leaving a crust in the corners, and a running engine melts it. A car left out on a clear, cold night frosts over more than the ground does. Get in, and the defroster clears the glass from the bottom up while the wipers sweep in stepped positions, like sprite frames.

Quick answers

Is the weather random? It changes on its own through the seasons, each kind of weather blending into the next. What it leaves behind (the wet, the puddles, the snow) builds up and wears off at fixed rates.

Does it change how the game plays? Some of it. Deep snow slows people down, and fires spread with the wind and the wet.

Is it the same for both players? Yes. The weather is part of the world, sent from the host, down to where each raindrop lands.

Follow along

Philadelphia Fiefdom is an online sandbox set in Philadelphia. If you missed it, the last post was about the one shader that draws the whole city. The next post is about the city at night: light only where there's a light. Join the playtest list to play it early, or come say hi on Discord (opens in a new tab).

Get updates by email

One email when there's something worth seeing: new footage, playtest invites, the day the Steam page goes up and launch day.

No spam. Unsubscribe any time. Privacy

Want to play early? Join the playtest list. Rather chat? Hang out on Discord (opens in a new tab).