Using Heat Maps To Improve Track Design

Employing useful metrics like heat maps can really make a huge difference when creating good level design. In the last few days, I have learned once more that some features can only be implemented in a meaningful way once you are able to visualize how people play your game.

Heat Map Rubberband Racing

One of the game play elements planned for my 3D Flash game Rubberband Racing is collecting pellets with your car. This is a similar idea to the main game mechanic in Satellite.

Rubberband Racing Collecting More Pellets

In the current iteration, I’m testing putting trails of pellets on the tracks that the player can collect. Doing so could grant the player a time bonus or just increment his score.

I am currently rethinking this feature for a couple of reasons, but let’s still look at it for the purpose of this blog post.

Rubberband Racing Collecting Pellets

At first, I had no system for placing the pellet trails, mostly putting them in the middle of the road at arbitrary sections of the track. I quickly realized that not only did this not make sense when it came to collecting the pellets, it actually made the gameplay generally more frustrating.

I would crash into obstacles or go off the track more often since I would still try to collect the unfairly placed pellets, or because I was simply distracted by them.

But where should I place them? In order to put them at points where they actually make sense or even help the player navigating difficult parts of the track, I would need to know where the racing line is.

MechWarrior Online Forest Colony Heat Map

I was fascinated by a blog post a while ago, where they’ve shown the heat maps created by the developers of MechWarrior Online for the different maps that the game features. This way, they could analyze what routes players were taking in the game and where the most battles took place.

I wanted to implement something similar to analyze what routes players ware taking when driving on the test track in Rubberband Racing.

Generating Heat Maps

I implemented a rather simple mechanic to track they way players drove in Rubberband Racing. Realizing this feature in Flash is rather simple.

I used a BitmapData object to generate the heat maps. I would draw a line with a Shape object from the car’s last known to it’s current position. Then, I immediatly drew the shape object into the BitmapData using BlendMode.ADD.

After setting this up, I would drive on the test track for a couple of rounds to collect data. I took the pellets out of the game temporarily to see how I would drive when only concentrating on the track itself.

When I felt that I had “drawn” enough lines, I would use the JPGEncoder class from the as3corelib to encode the BitmapData and save it to my hard disk with a FileReference object.

The result was this:

(Click to enlarge)

Two patterns emerge:

This enabled me to place the pellets in a much less frustrating way, and even try to place them in a way that indicates to the player where the racing line for a certain part of the track is.

I tried to refine the placement in several iterations. It’s interesting to see how the behaviour of the player can change significantly with the addition of certain elements. The subsequent heat maps showed that.

The pellets are displayed as dots in this version, and also color coded to indicate how often they have been collected. I colored the lines blue to make the pellets be better visible.

Note how, except for the U-bend in the center of the map, the lines become more regular and veer less off the track now that the player is given a direction by the pellets.

The question I am pondering right now is, whether the pellets in the current form make sense for the game, or whether they actually limit the player to a very distinct path in a frustrating way. However, even if I change or remove the pellets, I’m sure that the heat maps will continue to be a useful tool in analyzing track designs and item placements.