31 October 2004, updated in 2009 and 2011

I’ve made a series of experiments in how to represent roads. None of these experiments got very far but I’m writing down my thoughts in case someone else is writing a game that has roads, and also because I’d like to, one of these days.

Many tile-based games make you click on each tile to draw a road. I think drag & drop could be used to build roads. See this post about Locomotion for my motivation. I love playing games like Transport Tycoon, Simutrans, and SimCity. My first experiment [2004] lets you draw spline roads between edges of the grid, instead of drawing in the tiles:

(If you can’t get the applet to run, see this page for an approximation of what the roads looked like.)

What did I learn? Grid edges work reasonably well for roads with more complex shapes. I later wrote an article about grid tiles, edges, and corners.

My later experiments [2009-2013] are for non-grid games.

• [2013] Notes on Curved Paths: Bezier curves, circular arcs, piecewise linear, piecewise circular, and biarcs. Includes some interactive demos that run in the browser.
• [2009] Road intersections with multiple lanes: drag the colored boxes around to see how a road intersection might change. Still needs work:
• left-turn lanes, right-turn lanes
• size of intersection should change depending on number of lanes
• [2009] Curved roads with multiple lanes: drag the circles around to change parameters. I never finished cleaning this demo up so it looks rather messy. (Polishing this demo is on my list.)
• On the left you can play with roads that use bezier curves, including one segment that adds a lane gradually. If you want the road segments to line up you need to change the bezier control point on one or the other segment.
• In the middle is an experiment to figure out whether a bezier curve (blue) can approximate a circular arc (orange) — it’s close but not the same. You can change the bezier curve parameters to try to make it match up. I put this in because some graphics libraries have bezier curves but not circular arcs.
• On the right you can play with two straight road sections connected by a circular arc. Note that unlike bezier curves, there’s no trickiness in making the segments line up. The drag handle on the road lets controls where the straight segments would meet up if there was no curved segment. The slider on the right controls how much that corner gets rounded off.
• On the bottom you can move the knobs to change the number of lanes on the roads.

What did I learn? Curved roads should not use Bezier curves but instead circular arcs (both on grids and non-grids). Beziers aren’t great for making offset curves (needed when you have multiple lanes) and don’t match how roads are actually built. Bezier curves are also annoying to deal with when you want to have vehicles move along them at constant velocity (see this for a clever but complicated solution). Instead, roads in real life are built with circular curves, which have simpler math, support offset curves, and support vehicles moving at constant velocity.

For grid roads, I am reasonably happy with dragging from edge to edge. However for non-grid roads I didn’t come up with a control scheme I’m happy with. That’ll be a future experiment.

The source code for the grid edge Java applet is here. I’m not much of a Java programmer, so be prepared to laugh or cry at my coding style. The source code for the non-grid Flash applets are on github.

I’m not doing anything with roads at the moment but every once in a while I look into it, because I’d like to eventually make a game that has roads or railroads. These experiments have taught me something about road/railroad drawing.

Footnote: getting an applet to work across browsers is a big pain. I used the code from here but I don’t know how many systems it works on. Flash is a bit easier to make work. In 2004 I used Java; in 2008 I switched to Flash; in 2012 I switched to Javascript/HTML5 for demos.