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:

This browser does not have Java support enabled, or the author of this page messed something up. You might try a different browser, or complain to amitp@cs.stanford.edu.

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.

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.

More reading: