Creating Games with Mapbox

Mapbox has published a nice introduction to web maps, called An Open Platform. The article includes a couple of example maps, created by Tom MacWright, which demonstrate how Mapbox can be used to create non-road maps. Tom's maps demonstrate how you can use your own map tiles with Mapbox to produce other types of interactive maps.

Tom MacWright's Super Mario Brothers Map uses screenshots from the classic Nintendo video game as the basis for an interactive map. The map is a fairly basic example of the video game interactive map genre.

If you browse through the games label on Maps Mania you will find many other examples of interactive maps created with map tiles taken from video game worlds. Using a web mapping platform like Mapbox, Leaflet or the Google Maps API it is possible to not only map game worlds but to add markers to the resulting interactive maps. Markers can therefore be used to highlight important locations within the mapped games.


Tom's other example map is a neat demonstration of how web mapping platforms can also be used to create web games. A Big Maze uses map tiles of a large maze to create a zoomable map, Some simple interactivity has been added to the map by adding hit detection to the maze walls. This means that you can try to solve the maze. When you mouse-over a wall you will be told!


Game on With Mapbox and Tilemill takes this concept a little further. Game On is an awesome little demo of how you can create a simple computer game using the Mapbox mapping platform. The game is hosted on Codepen so you can see at a glance how the game works and even use the JavaScript panel to get clues as to how to win the game.

The game world base map tiles were created with Tilemill. The player's character is a marker added to the map. You can move the character marker around by using the 'wasd' keys on your keyboard (use 'e' for action). Collision detection is created by creating a bounding area polygon for the room.

This is a great little demo of how you can create a game with Mapbox. All the code is there so you could easily create your own fully functioning computer game with this code and the Mapbox platform.