Why My Pixel Art Motorbike Leans in 7° Steps, and Other Vehicle Tricks

You can drive a truck, a boat and a motorbike in Philadelphia Fiefdom, and swim when you end up in the water. Underneath, each one moves the way the real thing does: the truck sits on springs, the boat is a small rigid body pushed by its motor and the water, and the bike leans into its turns. What you see is drawn in fixed steps, like sprite frames, so nothing tilts smoothly off the pixel grid. You can get in and out of any of them at any speed.

Last time was the wind. This post is about the things that carry you through it.

How is the truck put together?

The truck is the oldest thing in the game you can drive: a small cab-over flatbed with a chunky cab and a short bed. By the start of this month its script did six jobs in 470 lines, so I split it. A core Vehicle node knows where it is, how fast it's going, what it hits, its heading and its wheels. Every other job is a child node: the lights, getting in and out, the AI driver, the player's controls, the sound. How a kind of vehicle drives lives in one resource, its spec: weight, speeds, wheelbase, springs, and how hard it shoves what it hits.

That split paid off within days. The kei car, taxi, van and garbage truck that arrived this week are the same nodes with a different model and spec. The garbage truck weighs 9,000 kg to the kei car's 850, and in a crash the heavier one shoves the lighter one by the ratio of their weights.

A few rules keep it looking like pixel art:

• The drawn truck faces one of 64 headings, 5.625 degrees apart, while the real one turns smoothly underneath. A character gets by with 8 facings. Something 5 m long needs many more, or it visibly jumps.
• Wheels show fixed frames. They spin in 24-degree steps (three frames for each repeat of the five-lug hub) and steer in a few fixed angles.
• Everything turns about its rear axle, like a real car: the nose swings wide and the back cuts inside the bend.

Why does the suspension move in steps?

The truck sits on three damped springs: one for the body's height, one for its pitch, one for its roll. They read the vehicle's acceleration from how it actually moves, so they work whoever is driving. Pull away and the tail squats. Brake and the nose dives. Corner and the body rolls out of the turn. The wheels stay on the road. Only the body, the driver, the lamps and the doors ride on the springs.

The springs are smooth, but the body is drawn in steps of 1.5 degrees of tilt and whole pixels of height, and it's only redrawn when a step changes. A body tilting by fractions of a degree rounds its edges to different pixels every frame and shimmers. The first version still shimmered on a flat road: a spring settling right on the edge of a step flipped the body back and forth. Now a spring has to go a little past halfway before the next step shows.

This week vehicles also learned the ground. Each tire looks down at the front, middle and back of its tread, so a round tire meets a curb with its front and rolls off an edge a bit at a time. A car climbs anything up to 0.8 of its wheel's radius (about 0.37 m), tilts to slopes, and leaves a ramp into the air, landing with a kick to the springs and a thud. To test it I built a proving ground: curbs of 0.1, 0.2, 0.3 and 0.45 m (the last one too high), speed bumps, ramps and a jump.

What about headlamps and wipers?

• Headlamps come on by themselves after dark or in rain and snow, and go off by day in the dry. You can still switch them yourself.
• My first headlamps were two wide cones that cast no shadows. A truck still round a corner lit the street through the building: a bright blob with nothing making it. Now the main beam casts shadows, so curbs, posts and walls stop it.
• Wipers sweep while rain or snow falls and someone's driving, faster in heavy weather, in stepped positions on the animation clock. When the weather stops, they finish their sweep back to rest. Behind them the windscreen carries a faint film of water, with clear arcs that bead up again between passes.
• The glass is clear. I'd started with painted reflection streaks on the windows and took them out, so now you can see the driver in the cab.

How do you get in and out?

Walk up to the driver's door and press the button. You walk to the door, it swings open, you climb in a step at a time, it shuts, and the camera glides over to the truck, eased but still on whole pixels. If something's against the driver's door, you climb across and out of the other one.

Getting out works at any speed. Stopped, you step out by the door. Moving, you jump, and the truck rolls on to a stop by itself, holding for anyone in its way. I didn't want vehicles that freeze the moment you let go of them.

How does the boat handle?

The boat is a 6.3 m rusty skiff with an outboard motor, tied up at a pier in a harbor with a swell. The first version steered like the truck. About an hour later I threw that out. Now the boat is a small rigid body on the water, with forces, torque, mass and turning inertia:

• The outboard pushes at the stern along the way it's turned. Turning it swings the stern out, so the boat pivots near its bow. It turns on the spot under power and does nothing with the motor idle.
• Drag is low going ahead, so it glides a long way. You have to plan your stops.
• Drag is high sideways, at a keel point a little ahead of the middle, so it wants to run straight and slides out at the start of a turn.
• The turn has momentum. Center the stick and it keeps swinging, then settles. The slope of the swell nudges it.

It floats on the waves you see. The water is two crossing swells, and the code reads the same surface the shader draws. The boat samples the waves under its bow, its stern and both sides, and soft, slow springs tilt the hull to sit on them. People on deck are loads: walk to the bow and it dips, land on it hard and it knocks down. An invisible lid at the gunwales keeps the water from being drawn inside the hull when the deck dips below the waterline.

Leave the helm under way and the boat keeps drifting with you aboard. At first it stopped dead. The skipper stepping onto the deck was a solid body in the boat's own collision test, so the boat hit them and lost most of its speed in one step, from 2.86 m/s to 0.6. Now people aboard are left out of its collision tests, and it coasts from 2.87 to 1.94 m/s over two seconds on water drag alone.

How is the wake drawn?

The hull pushes water out in its own shape. Each wave is the hull's outline growing outward from its edge, strongest on the side that pushed: a wave all round as the boat settles, one off the low side as it rolls, and under way, a wave off both sides of the whole hull every few meters. My first wake was round rings pushed out ahead of the boat, with a dotted line of rings behind the motor. Now the waves go out sideways, so the arms trail from the whole hull, and the motor lays a continuous foam trail that widens and breaks up as it ages.

Then the arms got crisp. The water shader draws a one-pixel crest each side of the propeller trail, out from the track by the hull's half-width plus tan(19.5°) of the distance behind the boat. That's the Kelvin angle: a boat's wake opens at about 19.5 degrees each side, whatever its speed. The arms follow the boat's track round a turn and fade as they age.

I also calmed the harbor. The swell went down by a third and the boat's damping went up, for about half the rocking.

Can you swim?

Yes. In deep water you float with your neck at the waterline, treading water, and swim a breaststroke with rings spreading round you. Wading is slower the deeper it gets: about half pace at thigh depth. Crouch to dive and you go down 1.3 m for as long as a four-second breath lasts, bubbles rising, with a splash going under and coming up. Out of the water you're soaked, a shade darker and drying over 40 seconds, and you leave wet footprints for a dozen steps.

The pond had a bug I was almost sorry to fix: an old solid box in its collision, its top 5 cm under the surface. You walked on the water's skin.

Climbing out first borrowed the jump pose. Now it has its own: haul up, a knee over the edge, crouch, stand. The pier got an iron ladder down its side, where swimmers come up.

Why does the motorbike lean in steps?

The motorbike is a low red cruiser. It leans into its turns, wheels and all, up to 28 degrees. It steers its whole front end, so the headlamp's light turns with the bars. Parked, its side stand swings down and it rests on it. Stopped with you aboard, you put a foot down. It's low on purpose: the seat is about 0.72 m up, so the player's foot reaches the ground.

At first it leaned in the same 1.5-degree steps as a car body. On a car's small roll that works. On a bike leaning 28 degrees it meant 18 steps each way, and it read as tilting freely, like a 3D model instead of a sprite. Now it leans in 7-degree steps: four leans each side, like a few hand-drawn frames.

Quick answers

Can you get out while moving? Yes, out of anything. The truck rolls on to a stop. The boat drifts on with you aboard.

Why not tilt vehicles smoothly? A smooth tilt rounds every edge differently each frame and shimmers at low resolution. Fixed steps read like sprite frames.

Does the boat use the car's driving code? It did for about an hour. Now it's a rigid body pushed by its motor, held straight by its keel and nudged by the swell.

Follow along

Philadelphia Fiefdom is a single-player sandbox in a pixel art city laid out after Philadelphia. If you missed it, the last post was about the wind. Next: lighting the city at night, headlamps included. Join the playtest list to play it early, or come say hi on Discord (opens in a new tab).