Road view (pseudo-3D)

What it does

The view takes a scene each simulation step, the road from pseudo-road, the objects from scaled-depth, and where the vehicle is, and builds the whole frame. The road becomes rows of grass, rumble strip and tarmac in light and dark bands, with dashed lanes, a centre line or edge lines. Bends swing the vanishing point, hills raise and drop the far road, and roads widen, narrow and split into separate strips. Above it a banded sky and horizon backdrops slide with the road's heading and rise and fall with the hills.

Every object, traffic, roadside scenery, banners, the player's vehicle and explosions, is projected through the road itself, so it rides the same curves and hills, and it is interleaved with the road far to near. A crest paints over what is behind it while tall things still show above it. The frame is built once per simulation step from one object and never interpolated, so nothing smears or flickers.

The view owns the camera: its height, its distance behind the vehicle, its field of view and its horizon, with presets measured from the arcade frames of classic racers. Looks are data too: palettes per stage, tunnels with walls, a roof and lamps, banks and walls at the road's edge, surface patches such as puddles, and a night style that draws only roadside posts in the dark. For roads that leave the ground, a separate ribbon view lays the road in 3D under a rolling chase camera, with decks, barriers, supports and bridges you can see from below.

Features

• Scanline road — grass, rumble strips and tarmac banded by distance, with dashed lane, centre and edge lines and as many lanes as the style asks for.
• Hills and crests — the far road rises and falls, and a crest hides what lies behind it.
• Split roads — a road that widens, narrows and forks into separate strips at lateral offsets.
• Tunnels, walls and banks — tunnel walls, ceiling, lamps and entrance face, and banks a vehicle can ride.
• Sky and backdrops — a banded raster sky with horizon layers that slide with the heading and parallax.
• Scaled sprites — a kind table of atlas art with poses, mirroring, animation, variants and per-object tint.
• Measured cameras — camera presets for the classic behind-the-car, motorbike, first-person and chase views, plus setCamera for your own height, distance, field of view and horizon.
• Style presets — presetStyles() holds fifteen stage looks in the style of Out Run, motorbike and circuit looks, a night style and a plain style; validateStyle checks your own.
• A road in 3D — createRibbon draws elevated circuits that pass over themselves under a rolling chase camera.
• Testable frames — buildRoadFrame is a pure builder that returns the drawn instances in painter's order.

Good for

• Arcade road racers in the style of Out Run, Pole Position or Hang-On, with road-racer supplying the race.
• Off-road racers in the style of Buggy Boy, with banks to ride, tunnels and water patches from offroad-course.
• Pursuit games where the player chases and rams a target down the road, in the style of Chase H.Q.
• Night driving — a style that draws only the posts at the roadside, as in Night Driver.
• Elevated kart circuits that climb, bank and cross over themselves, in the style of Power Drift.
• Road stages in other genres — a shooter's road stage, a runner on a road, a chase cutscene, or a road-file preview in an editor.

Make it yours

Everything the view shows is data. A RoadStyle sets the sky, ground, road and rumble colours, the lane and edge lines, the band length, haze and fog, backdrops with lift, parallax and rise, tunnels, walls and surface patches, so a region change is a new style rather than new code. A RoadCamera sets height, distance behind, field of view, horizon and how closely it follows, and the scene can adjust it for one frame, for a turbo's zoom or a shake. The sprite table maps each kind of object to its art, poses, scale, anchor and variants, and the view's size, scale, row height and layer are options.

Two very different uses: a coastal racer with a four-lane road that forks at the end of each stage, roadside scenery and traffic as scaled sprites, and the stage look changing at each section; and a night drive in first person, the camera sitting on the road with no vehicle in view, posts the only thing drawn at the roadside.

A quick look

A view with a measured camera and the preset styles, drawn once per simulation step:

const view = game.roadViewPseudo3d.create({ width: 320, height: 224, scale: 3, camera: "out-run",
  style: "plain", styles: game.roadViewPseudo3d.presetStyles(), sprites, layer: "hud", z: 0 });
view.draw(race.scene());
view.setCamera({ height: 3, fov: 80 });

Works with

• pseudo-road — required; the road the view draws and projects through.
• scaled-depth — required for sprites; the objects that ride the road.
• road-data — road files with split strips, widths, lanes, surfaces and ribbon legs.
• road-racer, offroad-course and road-pursuit — rules that produce the whole scene each step.
• typography — the HUD over the road.
• road-view-topdown — for a top-down road instead.

Good to know

• It is a pseudo-3D road: there is no camera yaw or pitch, and sprites are flat scaled cards.
• Rows are flat rectangles, the classic look, not texture-mapped tarmac; the ribbon view's polygons are flat-shaded too.
• An untaken split road is drawn with the chosen road's width, and a style change switches at a section boundary rather than blending.
• Hills steep enough to lift a farther tunnel roof above a nearer one, and objects standing beyond a bank, are not hidden correctly.
• For real 3D roads with geometry, use the 3D stack instead.