Road Building Applet

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[1] 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, or Java applets in general aren’t supported in your browser. You might try a different browser, or ask to rewrite this applet in html5.

Since it’s unlikely the applet will run anymore, either download world.jar and roads-applet.html and try to run them in appletviewer, or see the source code. Here’s a screenshot:

Screenshot of road editing applet

I also have a newer page[2] that runs in html5 but doesn’t have the same features as the applet.

What did I learn? Grid edges work reasonably well for roads with more complex shapes. I later wrote an article[3] 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[8] 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[9].

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[10] 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:

Email me , or tweet @redblobgames, or comment: