Creating a Real-World, GPS-enabled WP8 Tag Game - Revision history

Matthewthepc: Matthewthepc -

2013-05-13T01:24:53Z

Matthewthepc -

Hamishwillee: Hamishwillee - Bot update - Fix metadata and links

2013-04-24T06:58:47Z

Hamishwillee - Bot update - Fix metadata and links

Hamishwillee: Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

2013-04-24T03:24:04Z

Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

Jaaura: Jaaura -

2013-01-08T13:32:19Z

Jaaura -

Matthewthepc: Matthewthepc - added game winning info

2012-12-19T01:41:22Z

Matthewthepc - added game winning info

Matthewthepc: Matthewthepc - bolded filenames

2012-12-18T14:46:47Z

Matthewthepc - bolded filenames

Matthewthepc: Matthewthepc - added info about why we used what we used

2012-12-18T14:43:31Z

Matthewthepc - added info about why we used what we used

Matthewthepc: Matthewthepc -

2012-12-15T05:56:04Z

Matthewthepc -

Matthewthepc: Matthewthepc - added how to read an NFC tag

2012-12-15T05:29:27Z

Matthewthepc - added how to read an NFC tag

Matthewthepc: Matthewthepc -

2012-12-14T23:48:27Z

Matthewthepc -

@@ Line 1: / Line 1: @@
-[[Category:Windows Phone 8]][[Category:Code Snippet]][[Category:Location]][[Category:HERE Maps]][[Category:Near Field Communication (NFC)]][[Category:Windows Phone]]
+[[Category:Windows Phone 8]][[Category:Code Snippet]][[Category:Location]][[Category:HERE Maps]][[Category:Near Field Communication (NFC)]][[Category:Windows Phone]][[Category:Code Examples]]
 {{Abstract|This article explains how to create a tag game in Windows Phone 8 with the help of newly supported technologies like Windows Azure, GPS, and NFC.}}
 {{Note|This is a somewhat large tutorial, so if you would just like to learn about the technologies in use, feel free to skip to the end where you'll find a "Recap" section.}}
 {{ArticleMetaData <!-- v1.2 -->
@@ Line 574: / Line 576: @@
 * [http://msdn.microsoft.com/en-US/library/windowsphone/develop/jj206956(v=vs.105).aspx How to get the phone's current location for Windows Phone 8] (MSDN)
 * [http://channel9.msdn.com/Events/Build/2012/3-047 Windows Phone 8: Networking, Bluetooth, and NFC Proximity for Developers] (Microsoft BUILD Conference]

@@ Line 11: / Line 11: @@
 |platform= Windows Phone 8 and later
 |devicecompatability= Windows Phone 8 devices with GPS and NFC
 |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
-|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 |capabilities= ID_CAP_LOCATION, ID_CAP_MAP, ID_CAP_NETWORKING, and ID_CAP_PROXIMITY
 |keywords= Windows Phone 8, GPS, Location, NFC, Tag, Game, WP8
 |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 |translated-by= <!-- [[User:XXXX]] -->
 |translated-from-title= <!-- Title only -->
 |translated-from-id= <!-- Id of translated revision -->
-|review-by=<!-- After re-review: [[User:username]] -->
+|review-by= <!-- After re-review: [[User:username]] -->
 |review-timestamp= <!-- After re-review: YYYYMMDD -->
 |update-by= <!-- After significant update: [[User:username]]-->
@@ Line 571: / Line 571: @@
 == See Also/Bibliography ==
 * [http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj247548 How to continuously track the phone's location for Windows Phone 8] (MSDN)
-* [http://www.developer.nokia.com/Community/Wiki/What%27s_new_in_Windows_Phone_8#Maps What's new in Windows Phone 8] (Nokia Developer Wiki)
+* [[What%27s new in Windows Phone 8#Maps|What's new in Windows Phone 8]] (Nokia Developer Wiki)
 * [http://msdn.microsoft.com/en-US/library/windowsphone/develop/jj206956(v=vs.105).aspx How to get the phone's current location for Windows Phone 8] (MSDN)
 * [http://channel9.msdn.com/Events/Build/2012/3-047 Windows Phone 8: Networking, Bluetooth, and NFC Proximity for Developers] (Microsoft BUILD Conference]

← Older revision		Revision as of 03:24, 24 April 2013
Line 1:		Line 1:
−	[[Category:Windows Phone 8]][[Category:Code Snippet]][[Category:Location]][[Category:~~Nokia~~ Maps]][[Category:Near Field Communication (NFC)]][[Category:Windows Phone]]	+	[[Category:Windows Phone 8]][[Category:Code Snippet]][[Category:Location]][[Category:HERE Maps]][[Category:Near Field Communication (NFC)]][[Category:Windows Phone]]
	{{Abstract\|This article explains how to create a tag game in Windows Phone 8 with the help of newly supported technologies like Windows Azure, GPS, and NFC.}}		{{Abstract\|This article explains how to create a tag game in Windows Phone 8 with the help of newly supported technologies like Windows Azure, GPS, and NFC.}}

@@ Line 1: / Line 1: @@
 [[Category:Windows Phone 8]][[Category:Code Snippet]][[Category:Location]][[Category:Nokia Maps]][[Category:Near Field Communication (NFC)]][[Category:Windows Phone]]
 {{Abstract|This article explains how to create a tag game in Windows Phone 8 with the help of newly supported technologies like Windows Azure, GPS, and NFC.}}
 {{Note|This is a somewhat large tutorial, so if you would just like to learn about the technologies in use, feel free to skip to the end where you'll find a "Recap" section.}}

@@ Line 34: / Line 34: @@
 * Every 10 meters that a tagee runs, the app will automatically update their position.
 * The tagger will see these updates in a Nokia Map control and be able to run to them.
 == Why do we use... ==
 Throughout this article, we'll be using new technologies and services like Windows Azure, NFC, the Location API, and the new Nokia {{Icode|<Maps />}} Control, and there are reasons why we've chosen these over their alternatives.
@@ Line 157: / Line 158: @@
 </code>
 The code above allows you to call {{Icode|GetCurrentLocation()}} which prompts the user to accept location collection (and caches that decision), then fetches the current location and returns it in the form of latitude:longitude. If an error occurs, it returns 0:0.
 == MainPage ==
 The MainPage page simply acts as a gateway to let the user chose whether they want to host or join a game. Double-click the Host Game button in the Design View and add {{Icode|App.RootFrame.Navigate(new Uri("/StartGame.xaml"));}} to the newly created click handler. Do the same for the Join Game button, but instead use {{Icode|App.RootFrame.Navigate(new Uri("/JoinGame.xaml"));}}
@@ Line 165: / Line 183: @@
 <code csharp>
 using Windows.Networking.Proximity;
 using Microsoft.WindowsAzure.MobileServices;
 using System.Windows.Threading;
 </code>
-{{Icode|Windows.Networking.Proximity}} contains functions that let use NFC, Bluetooth, and other proximity devices, {{Icode||Windows.Storage.Streams}} lets the GetBufferFromString function work, {{Icode|Microsoft.WindowsAzure.MobileServices}} is required for Mobile Services to work, and we’ll use {{Icode|System.Windows.Threading}} to create a timer.
+{{Icode|Windows.Networking.Proximity}} contains functions that let use NFC, Bluetooth, and other proximity devices, {{Icode||Windows.Storage.Streams}}, {{Icode|Microsoft.WindowsAzure.MobileServices}} is required for Mobile Services to work, and we’ll use {{Icode|System.Windows.Threading}} to create a timer.
 === NFC ===
 Now that we have the correct using statements, we need to add some functions and variables that we'll use later. Add the following inside of the {{Icode|StartGame}} class:
 <code csharp>
 int currentPlayers = 0;
 long messageID = -1;
@@ Line 189: / Line 197: @@
 </code>
 Here’s an explanation of each part that we just added:
 * {{Icode|currentPlayeres}} is a count of how many players we have so far. We’ll use it to alert the user when a new player has joined.
 * {{Icode|messageID}} is the ID of the NFC message we’re transmitting. We’ll use this to stop publishing our message once we start the game.
@@ Line 206: / Line 213: @@
      if (device != null)
+     {
-        messageID = device.PublishBinaryMessage("Windows.GPSTagGame", GetBufferFromString(App.gameId.ToString()), MessageSent);
+        messageID = device.PublishBinaryMessage("Windows.GPSTagGame", BufferFuncts.GetBufferFromString(App.gameId.ToString()), MessageSent);
+      }
       else
@@ Line 282: / Line 289: @@
 using System.Windows.Shapes;
 using System.Windows.Media;
 </code>
 === Map ===
@@ Line 293: / Line 301: @@
+}
 </code>
-When the page starts, our app should center the map and then start the timer. Replace the default {{Icode|Tagger}} method with:
+When the page starts, our app should center the map, start the timer, and subscribe for the winning NFC tag. Replace the default {{Icode|Tagger}} method with:
 <code csharp>
 public Tagger()
@@ Line 303: / Line 311: @@
    timr.Tick += timr_Tick;
    timr.Start();
+}
 </code>
-This code will first center the map, and then start the timer to go off every thirty seconds.
+This code will center the map, set the timer to go off every thirty seconds, and subscribe for a the "Windows.GPSTagWin" message, then navigate to '''Tagee.xaml''' when it's encountered.
 Finally, we'll add {{Icode|timr_Tick}}, which will add the other players to the map.
@@ Line 383: / Line 397: @@
 Notice that we're using the same tactic to get a unique player ID value as we did in StartGame above.
 == Taggee ==
-For the purpose of this tutorial, '''Tagee.xaml''' doesn't have a UI - it simply updates the checkin table every time the user moves 10 meters. A production app would include the ability to end a game, message the tagger, and more.
+For the purpose of this tutorial, '''Tagee.xaml''' doesn't have a UI - it simply updates the checkin table every time the user moves 10 meters, and emits an NFC tag which allows the tagger to win. A production app would include the ability to end a game, message the tagger, and more.
 === Using Statements ===
 Open '''Taggee.xaml.cs''' and ensure that you have the following using statements:
@@ Line 389: / Line 403: @@
 using Windows.Devices.Geolocation;
 using Microsoft.WindowsAzure.MobileServices;
 </code>
 === Watching for Location Changes ===
-Add the following {{Icode|StartWatching}} function which will automatically call a handler if the user moves 10 meters.
+First, add the {{Icode|StartWatching}} function which will automatically call a handler if the user moves 10 meters.
 <code csharp>
 private void StartWatching()
@@ Line 428: / Line 443: @@
+}
 </code>
-Finally, call the StartListening method when the page is navigated to:
+Finally, call the StartListening method and start the NFC tag when the page is navigated to:
 <code csharp>
 public Tagee()
@@ Line 434: / Line 449: @@
    InitializeComponent();
    StartWatching();
+}
 </code>
+This code will set an NFC tag to emit "WINNING," and when the message is sent it will automatically navigate to the '''Tagger''' page.
 == Recap ==
 In the case that something's still confusing to you about how and why we did things in the code, here's a recap of the technologies we used in our app.
@@ Line 554: / Line 575: @@
 * [http://www.developer.nokia.com/Community/Wiki/What%27s_new_in_Windows_Phone_8#Maps What's new in Windows Phone 8] (Nokia Developer Wiki)
 * [http://msdn.microsoft.com/en-US/library/windowsphone/develop/jj206956(v=vs.105).aspx How to get the phone's current location for Windows Phone 8] (MSDN)
-* [http://channel9.msdn.com/Events/Build/2012/3-047 Windows Phone 8: Networking, Bluetooth, and NFC Proximity for Developers] (Microsoft BUILD Conference)
+* [http://channel9.msdn.com/Events/Build/2012/3-047 Windows Phone 8: Networking, Bluetooth, and NFC Proximity for Developers] (Microsoft BUILD Conference]

@@ Line 46: / Line 46: @@
 Create a new Windows Phone 8 project in Visual Studio called “GPSTag” to begin.
 === Capabilities ===
-In the Visual Studio solution explorer window, expand “Properties”, double click “WMAppManifest.xml,” and then select the Capabilities tab. Make sure that the following capabilities are selected:
+In the Visual Studio solution explorer window, expand “Properties”, double click '''WMAppManifest.xml''', and then select the Capabilities tab. Make sure that the following capabilities are selected:
 <code>
 ID_CAP_LOCATION
@@ Line 60: / Line 60: @@
 === Setting up the Frontend ===
 We will be using a few pages in our app, so here’s how to set them up:
-* In your MainPage.xaml page, drag two buttons onto the default grid and modify them to read “Host Game” and “Join Game.”
+* In your '''MainPage.xaml''' page, drag two buttons onto the default grid and modify them to read “Host Game” and “Join Game.”
-* Create (Ctrl-Shift-A) a new Portrait Page and name it StartGame.xaml. Drag a button onto the grid and modify it to read “continue.”
+* Create (Ctrl-Shift-A) a new Portrait Page and name it '''StartGame.xaml'''. Drag a button onto the grid and modify it to read “continue.”
-* Create a new Portrait Page and name it JoinGame.xaml.
+* Create a new Portrait Page and name it '''JoinGame.xaml'''.
-* Create a new Portrait Page and name it Tagger.xaml. Copy and paste: <code xml><maps:Map HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="599" Width="436" x:Name="Map" LandmarksEnabled="true" PedestrianFeaturesEnabled="True" /></code> into the ContentPanel grid to create a new Nokia Maps control.
+* Create a new Portrait Page and name it '''Tagger.xaml'''. Copy and paste: <code xml><maps:Map HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="599" Width="436" x:Name="Map" LandmarksEnabled="true" PedestrianFeaturesEnabled="True" /></code> into the ContentPanel grid to create a new Nokia Maps control.
-* Create a new Portrait Page and name it Tagee.xaml.
+* Create a new Portrait Page and name it '''Tagee.xaml'''.
 === Windows Azure ===
@@ Line 162: / Line 162: @@
 The StartGame page transmits an NFC tag which allows other devices to connect with it and join the game.
 === Using Statements ===
-Open StartGame.xaml.cs, then add the following using statements to the top of the page:
+Open '''StartGame.xaml.cs''', then add the following using statements to the top of the page:
 <code csharp>
 using Windows.Networking.Proximity;
@@ Line 258: / Line 258: @@
 Once the timer goes off, we’ll refresh the list of current players in our game, and if someone new joins (if currentPlayers is less than the number of checkins for our gameId in the checkin table) the user will be alerted.
-Go back to the design view for StartGame.xaml (you can do this by double-clicking “StartGame.xaml” in the solution explorer), and double click the “continue” button to create a new click handler. Replace the default code with:
+Go back to the design view for '''StartGame.xaml''' (you can do this by double-clicking '''StartGame.xaml''' in the solution explorer), and double click the “continue” button to create a new click handler. Replace the default code with:
 <code csharp>
 device.StopPublishingMessage(messageID);
@@ Line 274: / Line 274: @@
 == Tagger ==
 === Using Statements ===
-Open Tagger.xaml.cs (you can see the .cs file by expanding Tagger.xaml in the solution explorer window) and ensure that you have the following using statements:
+Open '''Tagger.xaml.cs''' (you can see the .cs file by expanding '''Tagger.xaml''' in the solution explorer window) and ensure that you have the following using statements:
 <code csharp>
 using Microsoft.WindowsAzure.MobileServices;
@@ Line 334: / Line 334: @@
 Now that we have the ability to start a game, we need to add the ability to join one, too. The JoinGame page creates a new proximity device, subscribes to handle our NFC tag, and (when the tag is received) adds a new check in to the table indicating that they've joined the game.
 === Using Statements ===
-Open JoinGame.xaml.cs and ensure that you have the following using statements:
+Open '''JoinGame.xaml.cs''' and ensure that you have the following using statements:
 <code csharp>
 using Windows.Networking.Proximity;
@@ Line 383: / Line 383: @@
 Notice that we're using the same tactic to get a unique player ID value as we did in StartGame above.
 == Taggee ==
-For the purpose of this tutorial, Tagee.xaml doesn't have a UI - it simply updates the checkin table every time the user moves 10 meters. A production app would include the ability to end a game, message the tagger, and more.
+For the purpose of this tutorial, '''Tagee.xaml''' doesn't have a UI - it simply updates the checkin table every time the user moves 10 meters. A production app would include the ability to end a game, message the tagger, and more.
 === Using Statements ===
-Open Taggee.xaml.cs and ensure that you have the following using statements:
+Open '''Taggee.xaml.cs''' and ensure that you have the following using statements:
 <code csharp>
 using Windows.Devices.Geolocation;

@@ Line 29: / Line 29: @@
 }}
 == Creating a Real-World, GPS-Enabled WP8 Tag Game with NFC, the Location API, and the Nokia Map Control ==
-In this tutorial, we will create a WP8 tag game that works by combining NFC, the Location API, and the new Nokia {{Icode|<Maps />}} Control. The game will work as follows:
+In this tutorial, we will create a WP8 tag game that works by combining NFC, the Location API, and the new Nokia {{Icode|<Maps />}} Control. The game will facilitate the playing of a large-scale "hide and go seek"-like game across, for instance, a large city like San Francisco. The game will work as follows:
 * The tagger will start our app and press "new game" to initiate a new game of tag.
 * The tagees will run and use NFC to tap into the game.
 * Every 10 meters that a tagee runs, the app will automatically update their position.
 * The tagger will see these updates in a Nokia Map control and be able to run to them.
 == Notes ==
 * Since I don’t have an NFC capable WP8 device to test this on, I can’t confirm whether this app works in the real-world. The code provided here is a “should-work” solution, but has not been tested. If you have an NFC capable WP8 device and would like to test this, please edit this tutorial with any code fixes you find.

@@ Line 7: / Line 7: @@
 {{ArticleMetaData <!-- v1.2 -->
-|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+|sourcecode= [http://sdrv.ms/TT6mMm GPSTag C# Application]
 |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->

@@ Line 525: / Line 525: @@
+}
 </code>
+To read a tag, you need to subscribe to it and then create a handler for the tag. To do that, you would use:
 == Finished! ==
 After completing this tutorial, you should have a basic understanding of concepts like how to use NFC, Windows Azure, and GPS data in your Windows Phone 8 app. For futher reading, explore the sites listed below.