Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 24, 2014
arrowPress Releases
October 24, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Using Heat Maps To Improve Track Design
by Max Knoblich on 02/14/13 07:43:00 am   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

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:

http://www.max-did-it.com/wp-content/uploads/2013/02/track_test_heatmap.png

(Click to enlarge)

Two patterns emerge:

  • On the one hand, you have sections of the track which are pretty consistent, where a clear racing line emerges.
  • On the other hand, you can clearly see where the more difficult and tricky parts of the track are. Whereever the lines get more chaotic and irregular, in addition to the car being carried out of the curve more often, designate the harder sections of the track.

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.

http://www.max-did-it.com/wp-content/uploads/2013/02/track_test_heatmap_iteration5.png

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.


Related Jobs

Magic Leap, Inc.
Magic Leap, Inc. — Wellington, New Zealand
[10.23.14]

Level Designer
DeNA Studios Canada
DeNA Studios Canada — Vancouver, British Columbia, Canada
[10.22.14]

Analytical Game Designer
University of Texas at Dallas
University of Texas at Dallas — Richardson, Texas, United States
[10.22.14]

Assistant/Associate Prof of Game Studies
Avalanche Studios
Avalanche Studios — New York, New York, United States
[10.22.14]

UI Artist/Designer






Comments


David OConnor
profile image
Very interesting, thank you for sharing!

I understand the value of heat maps, but they won't necessarily identify the 'racing line', more like the 'most popular line'.

Todd Boyd
profile image
Indeed; you'll find the beaten path, but not necessarily the best one. :)

Jason DuPertuis
profile image
Yeah. The specifics depends on the physics model, but the average line of both of those plots doesn't strike me as the line of somebody looking for the quickest path... for example, there's no reason to be taking that u-turn so wide.

Max Knoblich
profile image
Good point!

Josiah has made an interesting suggestion below: I guess the next step of this visualization feature would be to highlight the fastest laps.

Antti Makkonen
profile image
It would be really interesting to analyse why certain line is 'most popular' if it is not the best 'racing line'. For example is there something that could improve track readability or is the sense of speed making players drive too fast to corners.

Josiah Manson
profile image
Why not use the path of the path of the fastest recorded time if you are trying to show players the racing line? If you put waypoints off of the fastest line, you are telling players to either optimize for points or for time, but not for both.

Max Knoblich
profile image
Yeah, that's a good suggestion! You could highlight the faster laps, giving them more weight in the heat map.

From there, you could even divide the track in several segments so that your results are even more precise.

I might implement that depending on whether it would help with the direction the gameplay is going.

Luke McMillan
profile image
I would go one step further and look at sector times - i.e. split the track up into smaller sections which are separated by straights. (I consider straight-sways to be the punctuation points in racing track sentence structure.)

Jason DuPertuis
profile image
Breaking the track into discreet sectors only works if the layout offers points where the flow of the racing line is broken up. The pictures don't provide much sense of scale, and I don't know what the physics model is, but in this example I'm seeing a pretty short and quick karting track where all of the turns flow into each other, and there's no real breathing room other than the main straight.

If you haven't already, you might want to read up on how racing lines work in real racing. Your game might be too arcade-y to have a singular right way around -- say Gran Turismo vs Mario Kart -- but it might help you visualize how layout flows together and how you can use that to achieve what you want.

FWIW, I did a little doodle of roughly what I think the best line might be: http://i.imgur.com/mmyck4L.jpg Green is the line, the perpendicular lines are rough apex points. A couple of those turns have options, but it all depends on how the vehicles behave.

David OConnor
profile image
Yes, afaik, the 'racing line' can be traced by hand on an overhead view, even approximately, though there is a dependance on vehicle physics.

Jason's lines look about right.


none
 
Comment: