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:
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 World.java source code. Here’s a screenshot:
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.
- [2013] Notes on Curved Paths[4]: 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[5]: 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
- roads could add/remove lanes near the intersection
- [2009] Curved roads
with multiple lanes[6]: 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[7].)
- 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[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. In 2024 I added the Ruffle[11] Flash emulator to run some of my old Flash demos.
More reading:
- [2013] My Notes on Curved Paths[12]: Bezier curves, circular arcs, piecewise linear, piecewise circular, and biarcs.
- Cities XL has the most impressive road building system I’ve seen so far. The Realistic Highway Mod[13] allows far more to be done with the Cities XL road building system. The lots are still square though so you end up trying to fit square pegs into round holes.
- Cities in Motion 2 and Cities:Skylines have nice road building systems too.
- SimCity 4’s NAM/TuLEP has lots of advanced features. See this video[14] for example.
- SimCity 5 has curved roads, as well as curved lots.
- CityBound has a prototype of their road building system[15], which has curved roads but also automatically designs intersections.
- The Starting Point for a Train Game with Freeform Tracks[16] - blog post by Steffen Itterheim
- What are some methods to represent train tracks?[17] on Stackoverflow
- Wikipedia on road geometry[18]
- Wikipedia on railroad track curves[19] including calculating maximum speed on a curve
- Cornu spirals[20] on Wikipedia, “They are also widely used as transition curve in railroad engineering/highway engineering”.