Build an iPhone arcade game

07

07 Our game was made using Adobe Flash Builder 4.5, but you can follow using your favourite IDE. Start by creating a new ActionScript mobile AIR project. This will create a document class and an application descriptor XML file. You can find more information about this here.
 

08

08 Add a sprite to display the player’s position on the map. This could be anything from an animated character to something much simpler like a small red circle, as in this case.
 

09

09 To access your mobile device’s built-in GPS, you need to add an instance of the Geolocation class. First check to see if your device supports Geolocation. Next, adjust how often you want to receive updated information from the GPS through the setRequestedUpdateInterval() method – we chose an update rate of once every 100 milliseconds. If you do not specify the update interval, it will use the default value of your device, which will vary depending on the model. Finding a balance is important because the more it updates, the more battery power it will consume.
 

10

10 In the update handler, we need to retrieve some information from the GPS. First, we obtain our location, which we get in the form of longitude and latitude coordinates. To make sure our position isn’t displayed too inaccurately, we retrieve the map when the reading is accurate within 12 metres, which is our benchmark for accuracy here.
 

11

11 We calculate the upper-left corner of the map, which will be used later in calculating the player’s position in pixels. Next, we make a request to the Google Static Maps API. You can do this by making an HTTP request to http://maps.google apis.com/maps/api/staticmap? followed by a string of concatenated parameters, which will return an image at the specified zoom level and dimensions (the maximum size is restricted to 512x512 pixels). The latitude and longitude we provide will be the centre of the map. You are required to specify a centre and zoom level when you’re not using markers – more on that here.
 

12

12 When the map is ready, we add it to the stage and start updating the character’s position (our red circle).
 

13

13 To move the character around the map, we need to convert the latitude and longitude to pixels. First, we calculate the distance to the upper-left corner in latitude/longitude values. Next, we convert this value to pixels. We have to calculate how much one pixel is in latitude/longitude values at a given zoom level, which is done by dividing the map width/height with the distance (in latitude/ longitude) from west to east and north to south – we have hardcoded this value, but you can make a more dynamic method for this by adding more API calls. Just remember that more calls means more processing. When we have this number, it is easy to get the position in pixels by dividing the distance with the one-pixel value. And that's it, you're done.

Computer Arts magazine subscriptions

Get our newsletter!

Sign up today to receive weekly design tips, as well as details of our latest issue the day it goes on sale!

CA Collection
Computer Arts Presents: The Design Studio Handbook

@computerarts

site stat collection