Skip To Content
Back to Blog

How We Built MapAttack, a Real-World Geofencing Game (Part 2)


by Amber Case


Why Build MapAttack?

We built MapAttack for two reasons. As a challenge to ourselves and a tribute to PacManhattan. Second, as a way to test our new Geotrigger Service, a set of developer tools being built at @esripdx in Portland, Oregon.

At WhereCamp 2008 in Portland I got to play an amazing game called PacManhattan. PacManhattan came out of ITP in NYC in 2004 and involved people running with cell phones down the street. You’d chase a physical Pac-Man who would be calling his or her location to the control station (a bunch of people in a room with cell phones and a map). During the game, you’d shout your current location into your phone and the control room would update your location physically on the map, then they’d tell you how far away you were from the Pac-Man runner.

The game was exciting, but slow. It was entirely feature-phone based and involved a lot of crazy yelling. Though I had a wonderful time playing it, I wondered if a game like that could run entirely through a smartphone.

Screenshot of PacManhattan

Could we digitize PacManhattan?

Our challenge was whether a game similar to PacManhattan could be run entirely through GPS updates from the phones. That meant that players would be able to simply look at a map and see where all of the other players in the game were in real-time.

When we began thinking about this idea, GPS wasn't readily available in most smartphones. We had to wait almost 3 years for the technology to exist. Networks have gotten a lot faster since then (and LTE didn’t exist 3 years ago).

Issues

There were many issues with taking a game from a static map to real-time, where all of the players could see each other moving on the phone and on the browser.

We made the first version of the game on the Geoloqi platform in 2011. It took until 2013 for GPS and cell networks to be accurate and fast enough for gameplay to be smooth, and we got to build the new version of MapAttack on the rebuilt Geotrigger Service.

Game Board Editor

Before you can play MapAttack, you have to get some points onto the city streets. You can do this by opening the game board editor and dropping coins onto the map where you’d like to play.

Before we had a game board editor, I had to take the latitude and longitude of every point I wanted to add to the game board and manually input into database for each of the coins. Needless to say, it was extremely tedious.

The new game board editor allowed us to make games and change the values of coins quickly.

Current MapAttack Editor

Urban Landscapes and GPS Bounce

GPS signals are known for reflecting off of tall buildings in urban settings. This causes inaccuracy and inconsistency in location data. It is less pronounced in newer phones, but it greatly shows in older ones.

To solve the GPS bounce issues, in 2011 we could only play MapAttack in areas with buildings of less than 5 stories to prevent GPS bouncing off the buildings! Even worse, gameplay was not consistent across devices. Players with newer phones had a better advantage. Users with the iPhone 4 would miss more points than players with the iPhone 5s!

Internal GPS Differences

Below is a screenshot from 2011 that shows the differences between iPhone 3GS and iPhone 4. The image was taken by recording a GPS trail while walking around the same city block.

Internal GPS Differences

Players with iPhone 3GS had a rough time picking up points off of the board. We knew that GPS would improve over time, and hoped we could make the game again in a couple of years.

Improved GPS in Devices

Two years later, in 2013, we found that GPS actually worked quite well across many devices. Below you can see images from Android developers Courtland Fowler and Josh Yaganeh walking around the same three block area.

GPS Comparison of iPhones and Androids

With improved GPS, gameplay improved for everyone! LTE became available for many devices, making network speeds faster during gameplay. This added to the real-time aspects of the game.

Other Challenges

Making the game work involved the following:

  • Handling the detection of users entering and leaving 200+ geofences concurrently.
  • Handling the volume of location-updates from all the phones in a given game (20 or more users per game).
  • Changing the Geotrigger state based on player movements.

Each phone and web browser watching the game had to be able to see the movements of players and the geofences/coins change color in real time. Every phone in the game sends its location to the server, which would broadcast that data to every other phone and browser watching the game.

What Did We Build it With?

Logos of the technology used for MapAttack MapAttack was built using Esri’s Geotrigger Service (coming soon), a location-aware messaging platform that allows people to quickly build geofencing apps for iOS, Android and the web. We built the MapAttack server, which handled most of the game logic, in Node.js. The maps were based on Esri’s ArcGIS Map service.

To get red, gray and blue map tiles, the Esri maps were post-processed using a small app written in Go. Redis was used for broadcasting all of the game information to all of the devices in the game in real-time.

All of the phones in the game are subscribed to each other’s updates, so we used a small UDP protocol as part of the game server. UDP allowed us to not worry about maintaining a persistent connection all of the time!

MapAttack Server Architecture Diagram

Diagram of MapAttack Server Architecture iPhones and Androids send their locations to the server as a small UDP message, which is sent into a unique Redis PubSub channel for each game. The server then sends all the other phone’s locations down to each phone as a small UDP message. Then the MapAttack server sends the phones’ locations to the Geotrigger API, which does the trigger processing when a player enters one the regions. Finally, the Geotrigger API sends an event to the MapAttack server, which then forwards that event on to all of the other phones in the game, flipping a given coin from gray to red or blue, depending on which team the player is on.

When you view a game of MapAttack through a web browser, you’re watching the web browser connect to the PubSub channel for a given game over Socket.io. The browser then receives all of the events (player locations and coin updates) from that connection and renders them on the map in real-time!

MapAttack 2.0!

The game has come a long way. Below are early wireframes Aaron Parecki and I made for the first model of MapAttack.

From here:

Original Wireframes from the first model of MapAttack

To here:

MapAttack circa 2013

Thanks so much for reading about our journey!

Want to use SDKs and API behind the MapAttack technology?

Esri’s Geotrigger Service will launch in late Nov 2013. Send a message to @esripdx if you’d like access to the beta!

We’ll release the MapAttack game in late December. For now, message us @esripdx if you’d like us to set you up a game! We'll have more posts and code related to the game in the next couple of blog posts.

ArcGIS for Developers