Pixel Art Street Trees That Change With the Seasons

A block of Spruce Street on a breezy autumn day. The crowns sway a whole pixel at a time, and their leaves drift down onto the sidewalk.

Every street tree in Philadelphia Fiefdom is now a crown of a few big, soft clumps of 4-5 pixel leaves, lit on top, shaded underneath, and leaning out over the street. Each one runs through the year on its own: new leaves in spring, its outer leaves turning first in autumn, bare branches in winter, and a shadow on the sidewalk that thins out as the leaves come down.

Last time I wrapped up the posts on how the city is lit. Trees sit right between the look and the city, so they get their own post.

What was wrong with the old trees?

The first trees were grown leaf by leaf. Each leaf was its own little 15-pixel drawing, and the leaves hung in sprays that spiral round each twig the way real ones do. On paper that's how a tree works. On screen it was a scatter of confetti. You could count the leaves, but you couldn't see the tree.

A pixel artist doesn't paint every leaf. They paint a handful of masses of foliage, each with a lit side and a shadow side, and let a few ragged leaves break the edge. That's the look I was after: t3ssel8r's 3D pixel art and the background painting in Studio Ghibli films, where a crown is a few big soft clumps, not a heap of leaves. So I threw out the sprays and started again from the clump.

How is a crown built now?

A handful of clumps. Each crown is 5 to 12 clumps, spread through its species' outline on 3 to 5 main limbs. The clumps shift toward the street and are cut back on the house side, so the crown leans out over the road and stays off the facades, like a real street tree that's been pruned. The trunk stays clear up to well over head height, so you never walk into a crown.
Cards of drawn leaves. Each clump is covered in flat cards that face the camera. Every card shows a drawing of a clump of leaves, 24 pixels across, made of leaves just 4 or 5 pixels big. Each species' leaf shape has four of these drawings. They're drawn one texel to one screen pixel, and each card's middle snaps to the screen's pixel grid, so the leaves never smear or shimmer as you walk past.
Light on the clump, not the card. The drawings don't hold colors. They hold data: which edge of each leaf catches the light, a random number for each leaf, and how far out it sits in its clump. The shader colors them. Each card is lit as if it were on its clump's rounded surface, blended a little toward the whole crown's shape, and stepped into the same flat light levels as the rest of the city. Cards deep inside or low in the crown sit darker. That's where the bright tops and dark undersides come from.

Close up on two crowns at 2x: each clump sways as one, its leaves lit along their top edges.

There are ten species, matched to the trees that really line Center City's streets: London plane, honeylocust, littleleaf linden, zelkova, Callery pear, red maple, ginkgo, pin oak, Kwanzan cherry and river birch. Between them they have six leaf shapes and six crown shapes.

Each tree also has an age and a health. Younger trees are smaller. Health follows the neighborhood's wear, so a tree on a rough block grows fewer clumps and fewer leaves, and a dead one stands bare with a broken top. To keep it cheap, trees are grown in steps, and trees at the same step of their lives share one shape.

Where a tree stands comes from the real city. As I wrote in the open data post, every tree in the city's street tree inventory is planted where it really is, as its listed species, aged by its trunk's measured width. Everywhere else, trees go in pits along the wider sidewalks, spaced off the street lamps.

What happens through the year?

Every tree follows the calendar, and each species keeps its own timing in spring and autumn.

Spring: leaves fill in from bare, new ones light and a little yellow. Callery pears blossom white, Kwanzan cherries pink, red maples red.
Summer: full crowns.
Autumn: the outer, upper leaves turn first, through a half-turned stage, and the first leaf to turn is the first to fall. Pin oaks hang on to some of their withered leaves all winter, the way real ones do.
Winter: bare branches. The boughs and twigs are grown through the crown all year, so in winter they're the tree's outline.

Early autumn: The same block early in autumn and late in it. The crowns turn from the outside in, and what's fallen lies on the sidewalk. — The same block early in autumn and late in it. The crowns turn from the outside in, and what's fallen lies on the sidewalk.

Late autumn: The same block early in autumn and late in it. The crowns turn from the outside in, and what's fallen lies on the sidewalk. — The same block early in autumn and late in it. The crowns turn from the outside in, and what's fallen lies on the sidewalk.

The leaves that come down are real too. They let go from the outer, lower leaves of the crown and swing back and forth on the way down, more of them on a windy day. They settle only on ground open to the sky, never on an awning or a bench. How much lies around follows the season: in autumn it's whatever the crowns have lost, over winter it rots down to a fifth, and spring clears the last of it. People running through them and cars driving over them kick them up, and a strong wind lifts them off the ground.

How does the shadow thin out?

The leaf cards don't cast shadows at all. Cut-out cards are slow to draw into a shadow, so each tree has a separate, simple shadow shape: every clump as a jagged blob, a little smaller than the clump, drawn only into the shadows. The trunk and branches cast their own.

That split is what lets the shadow follow the leaves. As a clump loses its leaves, its blob shrinks, and once it's lost more than half of them, it's gone. So the shadow thins out clump by clump, with no dithering. By winter only the branches are left, and the sidewalk under the tree gets a sharp tangle of twig shadows instead of a pool of shade.

Summer: The same block in summer and in winter. Each crown's shadow goes with its leaves, until only the branches cast one. — The same block in summer and in winter. Each crown's shadow goes with its leaves, until only the branches cast one.

Winter: The same block in summer and in winter. Each crown's shadow goes with its leaves, until only the branches cast one. — The same block in summer and in winter. Each crown's shadow goes with its leaves, until only the branches cast one.

What do wind, rain and snow do to a tree?

Wind: crowns sway in whole pixels, stepped on the game's shared 12 fps animation clock, so they move like hand-drawn animation, not a smooth 3D wobble. The boughs move in groups, each a beat behind the last. Each tree reads the wind at its own foot, so one standing in a building's shelter sways less than one out on a corner.
Rain: wet bark and leaves go darker and glossier.
Snow: it settles on the tops of the clumps and along the tops of the boughs.
Shelter: the ground under a crown stays drier in rain and gets a thinner coat of snow.

A snowy winter morning on Spruce Street, at 2x: snow lies along the tops of a bare tree's boughs.

And when a tree is between you and the camera, it doesn't fade or turn see-through. It's cut off just above where your line of sight enters its crown, so the trunk and the rest of the crown stay, and its shadow never goes. I'll get into how that works when I write about walking into buildings.

Quick answers

How many kinds of tree are there? Ten, the common street trees of Center City, each with its own leaf, crown shape, colors and timing.

Are the trees where the real ones are? Where the city's street tree inventory has them, yes, as the species it lists.

Do bare trees cast a shadow? Yes. The trunk and branches always cast one. Only the leaves' share of the shadow comes and goes.

Follow along

Philadelphia Fiefdom is an online sandbox set in Philadelphia. If you missed it, the last post was about lighting the city at night. Next I'll get into the people, cats and birds that make the streets feel lived in. Join the playtest list to play it early, or come say hi on Discord (opens in a new tab).