Defining the track in a 2D racing game

Question

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 1

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.

Answer 2

I'd go for a much more simple approach:

Predefine the tracks in some editing tools of your choice; export them using a graphics program, defining colours for different areas of the track.

Using a bitmap (not necessarily the same resolution as your actual display; it can be lower) colour pixels for different effects e.g.:

• black = on the track, maximum grip
• grey = off the track less grip
• green = on the grass, even less grip
• white = "out of bounds" - player's car position is reset to last "on track" position.

Then your game can just read the pixels from an offscreen canvas based on the location of the player.

There is no need to do any fancy maths, unless you want to. And you can do all of the "fancy maths" ahead-of time, i.e. not build it into the game.

NB: you should NOT render this bitmap (except maybe in debug mode), it's for internal use only.

Answer 3

Although Bezier curves are the usual thing people go for, I'd recommend considering circular arcs (and maybe elliptical arcs) unless you really need Bezier curves or splines:

1. It's nice to be able to evenly space things along the curve. For example you might want to draw lane markers or you might want to calculate a path in curve coordinates. A straightforward use of Bezier curves (and splines) leads to an uneven spacing, whereas circular arcs work nicely here. You can generate evenly spaced angles and get back evenly spaced points on the curve. With Bezier curves you end up doing extra work to get approximately even spacing.
2. It's nice to be able to generate “offset curves”. These are the curves that match the original, but are at some offset from it. For example, given the center of the road, the edges of the road are offset from it. The lane markers are also an offset from the center. Offset curves from a Bezier curve are not themselves Bezier curves. With circular arcs it's very easy to calculate another arc. With Bezier curves you end up doing extra work to get approximate offset curves. With circular arcs it's very easy to calculate distance from the player to the arc (it's just distance to center minus the arc radius, with a range check for angles). With Bezier curves distances are a little bit more work to calculate.

Circular arcs are simpler to work with. However, they may not be able to represent all the shapes you want. (On the other hand, splines can't represent all shapes either.) Bezier curves are the next step; Bezier splines or B-splines are even more flexible. Use the simplest thing that works for your game.

Answer 4

If you're using a tileset, you can use the tile IDs to determine what terrain the car is on, and go from there. If you're not, you can do essentially what MarkR suggested to accomplish the same thing (Some basic skills with GIMP or Photoshop can pixelate and even boil down colors for you so it'd be pretty straightforward)

The problem with this method is that tight corners, hairpins, overpasses, etc might not work as expected. It's been a long time since I played Micro Machines, but as I recall you were prevented from taking major shortcuts even if you never went fully off the track. You couldn't just drive off an overpass onto the track below to skip half the track. One possible solution to this is to add essentially "checkpoints" along the track, that are invisible to the player. There could be 50 or even 500 of them on a single course. The player has to get within X distance (which could be pretty far away, essentially your reset car to track distance) to "activate" the checkpoint, and if they activate checkpoint 32 without activating checkpoint 29~31 first, boom.

The mini-checkpoints is a somewhat complex solution, but it gives you a lot of flexibility elsewhere in your game. Now you can more easily track distance to the finish line, use them for your AI logic, use them as the reset points when the car gets blown up, etc. (Actually I think the reset is especially valuable since you can just back them up 5 or 10 checkpoints as a simple way of penalizing them, and there's no nasty track calculations to do)

Edit: To that end, might make sense to have the checkpoints be vectors, so you can point the cars in the right direction, and detect "wrong way" before a bunch of checkpoints are crossed in reverse.