html5 - Defining the track in a 2D racing game

I am designing a top-down racing game using canvas (html5) which takes a lot of inspiration from Micro Machines. In MM, cars can move off the track, but they are reset/destroyed if they go too far.

My maths knowledge isn't great, so I'm finding it hard to separate 3D/complex concepts from those which are directly relevant to my situation. For example, I have seen "splines" mentioned, is this something I should read up on or is that overkill for a 2D game?

Could I use a single path which defines the centre of the track and check a car's distance from this line? A second path might be required as a "racing line" for AI.

Any advice on methods/techniques/terms to read up on would be greatly appreciated.

Answer

It really depends on what you want your game to "feel" like. You could go with the Micro Machines method of using a tilemap to generate the track.

However, if I were you I'd go with the "cool" solution: a spline.

First, you should realize that a spline is nothing but a set of points. It has a beginning and an end. A straight line is a form of spline. However, when you have more than 2 points, you can do interesting things, including using intermittent points to deform the line.

http://en.wikipedia.org/wiki/B_spline

I wouldn't bother looking at the Wikipedia explanation (it's filled with dragons and maths), but this image explains it rather well:

Here you have a set of points in a graph and you use a spline function to smooth out the transition between bars. Depending on the function, you will get a different spline.

So, for your game:

• 
  

  Make a tileset with different types of corners (90 degrees, 45 degrees, etc.)

  
  


• 
  

  Generate a set of points, where one point starts where a car enters a piece of track and another point where a car exits a piece of track. For example, if your track consists of four 90 degree corners and 18 straight bits, you will have a set of (4 * 2) + (18 * 2) = 44 points.

  
  


• 
  

  With some tweaking, fit a spline through the points to match the underlying road.

  
  
  

Now you have a (hopefully) automatically generated line in the center of the road. You can then use the distance to this line as a way to determine how far along a car is in the race and if it doesn't run off the track.

However, that math depends on heavily on your implementation.