Follow the instructions here to get the map added to the game:

The following screenshot shows you how to make the selection from the drop-down menu:

Resetting a game object's position

Here is a quick summary of the steps, assuming you have previously deployed the game to your device:

The first thing you may notice is that the map image is brighter. This brightness is caused by our lighting and the default material on the plane. Fortunately, for us, this visual style is what we are after and we will leave the added brightness as it is.

Secondly, you will notice that the map is more pixelated than the image we rendered on the server in the preceding style wizard. That pixelation is a result of stretching our map image across the plane. The obvious solution is to increase the image size and resolution. Unfortunately, the maximum image size we can request from Google Maps is around 1200 x 1200 pixels, which is what we are already doing using double resolution. This means we need to find a different solution to get a cleaner, crisp-looking map. In the following section, we will resolve this pixelation issue.

Due to the level of detail on maps and the fine lines, we generally always want to render our maps at the highest resolution possible. Unfortunately, rendering high-resolution images is performance intensive and prone to errors. Fortunately, there are plenty of examples on how others have solved this resolution issue in mapping by stitching multiple images or image tiles together. We will take the exact same approach and extend our map from a single tile to a 3 x 3 grid of tiles, as follows:

Map tile layout for a 3 x 3 grid

Note that in the diagram, the x axis and the tile offsets are inversely related, or in other words, a tile offset of 1 in the X direction will need to be offset on the x axis in 3D space in the negative direction. The z axis and Y tile offset are in a direct relationship. This means that as the Y tile offset is set to 1, the z axis will also be set a positive value. As our player is close to the ground, the game only needs a 3 x 3 grid. If you build a game with a higher-level camera or want to show farther in the horizon, you would extend the tile layout to 5 x 5, 7 x 7, 9 x 9, or whatever size you need.

So, let's get started and extend our map from a single tile to the 3 x 3 grid tiles. Follow these instructions in Unity to build the map tile layout:

Great, we now have a cool-looking map in our game. Of course, the process was a bit repetitive to build the map; but if you are careful, it should not take too long. If you were expecting a lot of math in order to line up those tiles, fortunately that is all done in the GoogleMapTile script. Let's take this opportunity to take a break from Unity and look at the GoogleMapTile script in MonoDevelop.

In Unity, select Map_Tile_0_0 in the Hierarchy window. Go to the Inspector window, and on the Google Map Tile script component, click on the gear icon to open the context menu. From the menu, select Edit Script. You will see a progress bar, and after a few seconds, MonoDevelop will open.

In MonoDevelop, you will see the GoogleMapTile script open. As was mentioned in the book's prerequisites, you should have a basic knowledge of C#, so the contents of the script should not look overly intimidating. If you are new to Unity scripting, that is fine, as we will get into more detail about writing scripts later. For now, we will concentrate on a few areas of the code that will show how the map tiling works.

Scroll down through the code until you reach the method, IEnumerator _RefreshMapTile(). Here is an excerpt from the top lines of that method we will look at in more detail:

IEnumerator _RefreshMapTile () 
        {             
            //find the center lat/long of the tile 
            tileCenterLocation.Latitude =  GoogleMapUtils.adjustLatByPixels(worldCenterLocation.Latitude,  (int)(size * 1 * TileOffset.y), zoomLevel); 
            tileCenterLocation.Longitude =  GoogleMapUtils.adjustLonByPixels(worldCenterLocation.Longitude, (int)(size * 1 * TileOffset.x), zoomLevel);  

As the comment mentions, these two lines of code find the center of the tile in latitude and longitude map coordinates. They do that by taking the tile image size (size) and multiplying that by the TileOffset.y for latitude and TileOffset.x for longitude. The result of that multiplication and the zoomLevel is passed to a GoogleMapUtils helper functions to calculate the adjusted latitude or longitude for the tile. Seems simple, right? Of course, the bulk of the work is done in the GoogleMapUtils functions, which are just standard GIS math functions for converting distances. If you are curious, take a look at the GoogleMapUtils code, but for now we will continue looking at just the _RefreshMapTile method.

Continue scrolling down through the code until you come to this excerpt:

//build the query string parameters for the map tile request 
queryString += "center=" + WWW.UnEscapeURL (string.Format ("{0},{1}", tileCenterLocation.Latitude,  tileCenterLocation.Longitude)); 
queryString += "&zoom=" + zoomLevel.ToString (); 
queryString += "&size=" + WWW.UnEscapeURL (string.Format  ("{0}x{0}", size)); queryString += "&scale=" + (doubleResolution ? "2" : "1"); 
queryString += "&maptype=" + mapType.ToString ().ToLower (); 
queryString += "&format=" + "png"; 
 
//adding the map styles 
queryString +=  "&style=element:geometry|invert_lightness:true|weight:3.1|hue:0x00ffd5"; 
queryString += "&style=element:labels|visibility:off"; 

As the comment describes, this section of the code is what builds up those query parameters that are passed to the Google Maps API to request a map image. Since we are passing these parameters in a URL, we need to make sure that you encode special characters and that is what the WWW.UnEscapeURL calls do. Notice that at the bottom we are also adding a couple styles. In Chapter 9, Finishing the Game, we will take a look at how you can easily add your own styles using the Google Maps Style Wizard.

Finally, scroll down to the bottom of the _RefreshMapTile method; the following is an excerpt of the code:

//finally, we request the image 
var req = new WWW(GOOGLE_MAPS_URL + "?" + queryString); 
//yield until the service responds 
yield return req; 
//first destroy the old texture first Destroy(GetComponent<Renderer>().material.mainTexture); 
//check for errors 
if (req.error != null) 
{ 
      print(string.Format("Error loading tile {0}x{1}:  exception={2}", 
                    TileOffset.x, TileOffset.y, req.error)); 
} 
 else 
 { 
      //no errors render the image 
      //when the image returns set it as the tile texture 
      GetComponent<Renderer>().material.mainTexture = req.texture; 
         print(string.Format("Tile {0}x{1} textured", TileOffset.x, TileOffset.y)); 
         } 

In the first line, the code uses the WWW class to make a request to the GOOGLE_MAPS_URL appended with the earlier constructed queryString. The WWW class is a Unity helper class that allows us to make calls to URLs for virtually anything. Later in the book, we will use this class to make other service requests.

The next line, yield return req;, essentially tells Unity to continue on until this request responds. We can do that here because this method is a coroutine. Coroutines are methods that return IEnumerator and are an elegant way to prevent thread blocking. If you have ever done more traditional C# asynchronous programming, you will certainly appreciate the beauty of coroutines. As before, we will cover more details about coroutines when we get into script writing.

Next, we call Destroy on the object's current texture. Destroy is a public method of the MonoBehaviour class that safely allows us to destroy objects and all components attached to the object. If you are seasoned C# Windows or Web developer, this step may seem quite foreign to you. Just remember that we have to be mindful of memory management that can quickly get out of hand when running a game. In this example, if we were to remove this line of code, the game would likely crash due to texture memory leaks.

After the Destroy call, we do an error check just to make sure that no errors occurred while requesting the image tile. If an error occurs, we just print an error message. Otherwise, we swap the current texture for a new downloaded image. We then use print, in order to write a debug message to the Console window. The prin t method is the same as calling Debug.log, but is only available from a class derived from MonoBehaviour.

Our final look at the code will be to understand when the _RefreshMapTile method is called. Scroll up through the code until you find the Update method, as follows:

// Update is called once per frame 
        void Update () 
        { 
            //check if a new location has been acquired 
            if (gpsLocationService != null && 
                gpsLocationService.IsServiceStarted &&  
                lastGPSUpdate < gpsLocationService.Timestamp) 
            { 
                lastGPSUpdate = gpsLocationService.Timestamp; 
                worldCenterLocation.Latitude =  gpsLocationService.Latitude; 
                worldCenterLocation.Longitude =  gpsLocationService.Longitude; 
                print("GoogleMapTile refreshing map texture"); 
                RefreshMapTile(); 
            } 
        }  

Update is a special Unity method available on every MonoBehaviour derived class. As the comment mentions, the Update method is called every frame. Obviously, we don't want to refresh the map tile every frame since it is unlikely the request would return that quickly anyway. Instead, we would first want to make sure that we are using a location service and it has started. Then, we check whether the location service has detected movement by checking a timestamp variable. If it passes those three tests, then we update the timestamp, get a new world center, print a message, and finally call RefreshMapTile. RefreshMapTile makes a call to StartCoroutine(_RefreshMapTile) that starts the tile refresh.  

Since we haven't started connecting the GPS service yet, this all may seem foreign. Not to worry, we will get to that shortly, but for now it will be helpful to understand how frequently the map tiles will be redrawn.

In this section, we enhanced the resolution of our game map by rendering image tiles rather than a single image. For our purpose, we still used a fairly large tile size for each map tile image. We can get away with this because our camera will be above the player looking down. As you can see though, it is a simple process to create any size of tile map. If you do decide to create a larger map, just be aware that downloading several map tiles could increase a player's data consumption dramatically.

CUDLR stands for Console for Unity Debugging and Logging Remotely and is a free asset available from the Unity Asset Store. We will use CUDLR to not only watch the activity of our device as the game plays but also execute some simple console commands remotely. We will look at Unity Remote, which is another diagnostic tool, in the following chapter. It is very powerful, but can be problematic to run and often fails to access the location service, even though Unity claims this is supported. As you get more into the development of the game, you will see that it is always helpful to have a remote method of monitoring and controlling our game.

Perform the following steps to install and set up CUDLR:

What makes CUDLR such a useful tool is that it turns part of our game into web server; yes, a web server. We can then view and communicate with our game just as if we had installed a backdoor. Since CUDLR is accessible to any computer on the network, we also don't need to have a physical connection or even run Unity to control the game. Of course, having your game run as a local web server is a security risk to your game and possibly your player's device. So, before you ship your game, just delete the CUDLR service game object to deactivate it.

Follow the instructions here to connect to the CUDLR service running in your game:

If you have problems running or connecting to CUDLR, please refer to Chapter 10, Troubleshooting. As we mentioned previously, we will look at other options for debugging and diagnosing issues while developing with Unity. However, CUDLR, which can run completely remotely, will be our best option for testing our game, as we test real-world movement and GPS tracking. Speaking of GPS, time to finish up with the final section of this chapter and bring everything together.

The final piece we need to generate a real-world location-based map is to find where the device is located. Of course, the best way, as we learned in the previously section, is to use the built-in GPS to determine where the device is located in latitude and longitude coordinates. Like the tile map, we will use an imported script to build the service and get us running quickly without getting into any scripting.  

Before we begin, be sure that your device has the location service enabled by checking the following:

Now, perform the following instructions to install the GPS service code and test the game:

Have fun...

Hopefully, you found this last section of the chapter to be a rewarding end to a very quick introduction to GIS, mapping, and GPS.