Windows Phone 8 Game Development

Transcription

1 Windows Phone 8 Game Development Marcin Jamro Chapter No. 8 "Maps, Geolocation, and Augmented Reality"

2 In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter NO.8 "Maps, Geolocation, and Augmented Reality" A synopsis of the book s content Information on where to buy this book About the Author Marcin Jamro is the developer and architect of various kinds of applications, such as web, mobile, and distributed ones. He is interested in many aspects of computer science, including software engineering and project management. Marcin is passionate about C#, C++, and C languages, design patterns, various technologies, and mobile devices, especially the Windows Phone platform. He has practical experience in project development and holds the position of Chief Executive Officer at JAMROTECH Sp. z o.o. [Ltd.] (Rzeszow, Poland) which consists of activities like IT projects development, consulting, as well as conducting training. He also works at Rzeszow University of Technology and is writing a PhD thesis regarding real-time software engineering. Marcin has published several papers, taken part in many conferences and organized a few of them, as well as participated in two internships at Microsoft in Redmond (USA). He has Microsoft Certified Professional, Microsoft Certified Technology Specialist, and Microsoft Certified Professional Developer certificates. More information about Marcin is available at his website:. You can easily contact him by sending an message to.

3 Windows Phone 8 Game Development How many of your friends do not have a mobile phone? Do you know anyone who does not use it? Currently, almost everyone has a mobile phone, and many people use more than one to communicate with family, friends, and colleagues from work. Such a fact is also confirmed by statistics. According to results presented by the International Telecommunication Union, about 6.8 billion mobile-cellular subscriptions are used ( ). That is almost the same as the number of people all over the world! Nowadays, mobile phones can be used not only for calling and texting, but also for performing some tasks that a few years ago had been dedicated only to desktops and notebooks. They include browsing the Internet, accessing accounts, sharing files, or even performing time-consuming complex calculations. Apart from business applications, mobile devices can be used for entertainment, especially by integration with social networks and mobile games. With the ever increasing possibilities of mobile devices, mobile games became more similar to their desktop or console versions and provide the user with similar gaming experience. Thus, a lot of people play games on their mobile phones, almost everywhere, for instance, while they are going to the workplace by bus or train, during breaks, as well as at home. As shown by SponsorPay ( ), there are about 211 million mobile and social gamers in USA. What is even more surprising is that the majority of them play for more than an hour each day! The statistics presented by Geekaphone ( ) indicate that the mobile gaming industry is currently really important and may reach $11.4 billion by 2014.

4 The games installed on a small device that can be, almost all the time, in the pocket, can contain a complex logic, use three-dimensional graphics (3D), and have a rich user interface. They are very often equipped with a user-friendly steering mechanism that uses embedded sensors, such as an accelerometer or a gyroscope. The new mobile phones can also support the GPS (Global Positioning System) for geolocation, as well as Bluetooth for wireless communication. All of them make it possible to create a solution with really outstanding functionalities that allow the user to enjoy games directly on the mobile phone. With the usage of connectivity features, such as cellular data transmission or connection to WLAN (Wireless Local Area Network), applications can benefit from the content stored on the Internet and provide multiplayer modes. Therefore, the mobile phone can be used as a powerful game environment, even allowing cooperating with other players over the Internet. You can also create your own games for various mobile platforms, including Windows Phone, ios, Android, BlackBerry, or Symbian OS. Each of them has some specific features regarding available functionalities, supported sensors, used languages and technologies, as well as user interface concepts. The Windows Phone 8 is a platform that is described in this book. As you will see, it allows creating various applications and games that can be then downloaded and used in many countries all over the world. Have you ever thought about developing your own mobile game? If so, let's start reading and writing its code! What This Book Covers Chapter 1, Getting Started, introduces the Windows Phone platform, and especially its newest version named Windows Phone 8, as well as managed, native, and hybrid development approaches. You will get to know how to install necessary software, as well as create the developer account, and register the phone. Then, a concept, rules, screens, and architecture of the exemplary game is described. Chapter 2, Game User Interface, presents the XAML (Extensible Application Markup Language) language, as a way of creating the user interface. You will get to know the application lifecycle, controls, resources, styles, and data binding mechanism, as well as learn how to run and debug Windows Phone 8 applications. Chapter 3, MVVM Design Pattern, covers implementation of the MVVM (Model- View- View Model) design pattern to improve the code quality. Such an approach is really useful while developing Windows Phone 8 applications. Chapter 4, 3D Graphics Basics, introduces basic topics regarding three-dimensional graphics, such as vertices, transformations, and matrices. You will also get to know the automatically generated native part of the project, which uses Direct3D.

5 Chapter 5, 3D Game World, presents development of the simple 3D game world with Direct3D. You will learn how to create a simple model, load it, and place it in a particular location inside the game world. Chapter 6, Steering, Sensors, and Collision Detection, explains how to obtain data from sensors, such as an accelerometer, gyroscope, and compass. You will also learn how to use these data to move objects in the game world, as well as how to detect collisions between them, and support multiple game levels. Chapter 7, 2D User Interface in 3D Game, deals with using 2D graphics and fonts in the 3D game, with the DirectXTK library. You will get to know how to configure this tool, place textures, write text, as well as create menus with localized strings. Chapter 8, Maps, Geolocation, and Augmented Reality, describes the maps, geolocation, and augmented reality features, which can be included in Windows Phone 8 applications and games. You will also learn how to start a navigation mechanism to particular GPS coordinates. Chapter 9, Exchanging Data via Web Services, introduces the Windows Communication Foundation Service project as a way of exchanging data between players. You will get to know how to create a simple web service, deploy it locally, as well as allow the game to consume it. Chapter 10, Social Networks, Feeds, Settings, and Local Rank, describes how you can easily integrate Windows Phone 8 applications and games with social networks, such as Facebook and Twitter. You will also learn how to read data from RSS feeds, implement game settings, as well as create the local rank. Chapter 11, Improving Game Experience, covers many topics that improve the overall quality of the game, including saving and loading the current state, as well as supporting background music, sounds, video clips, and vibrations. You will also get to know how to recognize and synthesize speech. Chapter 12, Game Publishing, explains a process of testing Windows Phone 8 applications and games, as well as their submission to the Windows Phone Store. You will learn how to test various aspects of the project, including performance and working in real-world conditions, as well as prepare the final version, and submit it to the store. Appendix A, Useful Resources, suggests additional resources regarding the content of all chapters. It presents addresses of many websites, where you can find more information about topics presented in the book.

6 Appendix B, Languages and Technologies, introduces programming languages and technologies used in the exemplary game. You will get to know some basic information regarding C#, C++, XAML, Direct3D, WCF, and.net Framework. Windows Phone 8 Game Development book is a practical, hands-on guide that shows a step-by-step description of how to create a 3D game for the Windows Phone 8 platform. It presents the whole process of game development, from setting the environment to publishing the game. Thus, it gives a good grounding for the further game development adventure! The game will combine the native and managed development approaches, and use a few languages and technologies, including C# and C++, as well as XAML and Direct3D. It will not be just a simple game. You will create a complex application that presents many interesting functionalities, including 2D and 3D graphics, audio and video support, maps, geolocation, augmented reality, speech recognition and synthesis, and even exchanging data via external services, and sharing data with social networks.

7 Maps, Geolocation, and Augmented Reality The current version of the exemplary game presents the game world in 3D with additional 2D graphics. The game logic is also prepared, thus you can crash the rocket, reach the planet, and play at consecutive levels. However, at the beginning of this book, it was decided to introduce the maps, geolocation and augmented reality features to present other players in the vicinity. In this chapter, you will learn how to implement such functionalities in the Windows Phone 8 application. Maps and geolocation You have already added the application page with the Map control. Currently, you need to adjust it to present locations of other players, as well as add a special indicator of your current location. The following figure represents a sketch of the Map screen:

8 Maps, Geolocation, and Augmented Reality Each player's location is represented by an indicator with the player name at the top. The Navigate button launches navigation to the player's last location. Your current GPS position is represented by the special indicator, which should be automatically moved when the location is changed. What is more, when the GPS coordinates are obtained for the first time, the map should be automatically centered in such a location. The process of obtaining the GPS location can take some time, thus additional status information should be presented above the map. All of these features will be implemented in this part. Windows Phone Toolkit The Windows Phone Toolkit contains a set of additional components which can be used while developing the Windows Phone 8 applications. They include many controls (such as AutoCompleteBox and ListPicker), as well as navigation transitions and extensions to the Map control, which you will use in this chapter. More information about the toolkit is available at the project's website: Installation The Windows Phone Toolkit can be easily installed using the NuGet package manager. To open it, navigate to Tools (from the main menu), Library Package Manager, and then Manage NuGet Packages for Solution. In the newly opened window, click on the Online group, type Windows Phone Toolkit in the search box (in top-right part). Then, click on the Install button next to the Windows Phone Toolkit result. You can also see the license terms, the description, as well as the number of downloads, as presented in the following screenshot: [ 206 ]

9 Chapter 8 After clicking on the Install button, you should indicate where the Windows Phone Toolkit should be installed. You should select the SpaceAim3D project, click on OK, and the library should be installed successfully. At the end, you can see that a reference to Microsoft.Phone.Controls.Toolkit is added to the References node in the Solution Explorer window. Ambiguous reference error After adding the Windows Phone Toolkit, you should rebuild the solution. However, you may receive an error with the following message: 'GestureEventArgs' is an ambiguous reference between 'Microsoft.Phone.Controls.GestureEventArgs' and 'System.Windows.Input.GestureEventArgs'. Fortunately, you can easily fix it by adding the following using directive to the MenuPage.xaml.cs file: using GestureEventArgs = System.Windows.Input.GestureEventArgs; The error tells you that you have the using directives for the Microsoft. Phone.Controls and System.Windows.Input namespaces and want to use the GestureEventArgs class. However, both these namespaces contain a class with such a name, thus it is unknown which of them you really want to use. You can fix the error by specifying which class you want to use when you type GestureEventArgs (by the using directive, as shown in the previous line of code) or change its name to the full version that contains also the namespace (by replacing GestureEventArgs ambiguous reference with System.Windows.Input.GestureEventArgs). Locations of other players At the beginning, you will add a possibility of presenting locations of other players on the map. To simplify the task, you will use extensions to the Map control that are available in the Windows Phone Toolkit. A process of implementation involves all three parts from the MVVM design pattern. PlayerData.cs Each indicator on the map represents data of a single user (name and coordinates). Thus, you create a new class named PlayerData (in the.cs file inside the Models directory), which stores such data as follows: public class PlayerData public string Name get; set; public GeoCoordinate Location get; set; [ 207 ]

10 Maps, Geolocation, and Augmented Reality The class contains two properties representing the name and location. It is worth mentioning that the latitude and longitude are stored as an instance of the GeoCoordinate class (from the System.Device.Location namespace). MapViewModel.cs Some additional modifications are necessary in the view model for the Map screen. First of all, you create a new field named m_players, which stores a collection of player data, as well as the public property, as shown in the following part of code: private ObservableCollection<PlayerData> m_players = new ObservableCollection<PlayerData>(); public ObservableCollection<PlayerData> Players get return this.m_players; set this.m_players = value; this.onpropertychanged("players"); Here, you use the ObservableCollection generic class implementing the INotifyCollectionChanged interface. Therefore, that makes it possible to react to changes in the collection. By using this class, you can implement a mechanism of updating the user interface as soon as an item is added or removed from the collection. Whenever the player navigates to the Map screen, you should remove all items from the Players collection and add some test data with player names and locations. For instance, you can indicate that player Marcin is currently in location specified by the following GPS coordinates: as latitude and as longitude, which is configured as follows: public void OnNavigatedTo(NavigationEventArgs e) this.players.clear(); this.players.add(new PlayerData() Name = "Marcin", Location = new GeoCoordinate( , ) ); (...) The NavigateToPlayer method will make it possible to start navigation to the particular player. However, currently it does not contain any code: public void NavigateToPlayer(PlayerData player) [ 208 ]

11 Chapter 8 MapPage.xaml A design of the Map screen is specified in the XAML code. Here, you also decide how the data of a single player is presented on the map. As mentioned earlier, you will be using the Windows Phone Toolkit to accomplish this task. Thus, you need to map a suitable namespace to the Toolkit prefix, as follows: <phone:phoneapplicationpage (...) xmlns:toolkit="clr-namespace:microsoft.phone.maps.toolkit; assembly=microsoft.phone.controls.toolkit" (...)> </phone:phoneapplicationpage> Additional modifications are necessary in the Map element and are shown in the following code: <Controls:Map x:name="mapplayers" Center="Binding Center, Mode=TwoWay" ZoomLevel="Binding Zoom, Mode=TwoWay" CartographicMode="Binding Mode, Mode=TwoWay" LandmarksEnabled="Binding Landmarks, Mode=TwoWay" PedestrianFeaturesEnabled="Binding Pedestrians, Mode=TwoWay"> <Toolkit:MapExtensions.Children> <Toolkit:MapItemsControl> <Toolkit:MapItemsControl.ItemTemplate> <DataTemplate> <Toolkit:Pushpin GeoCoordinate="Binding Location"> <StackPanel> <TextBlock Text="Binding Name" Style="StaticResource PlayerName" /> <Button Tag="Binding" Click="BtnNavigate_Click" Content="[ localized string ]" Style="StaticResource NavigateButton" /> </StackPanel> </Toolkit:Pushpin> </DataTemplate> </Toolkit:MapItemsControl.ItemTemplate> </Toolkit:MapItemsControl> </Toolkit:MapExtensions.Children> </Controls:Map> [ 209 ]

12 Maps, Geolocation, and Augmented Reality Here, you set a key for the Map control (as MapPlayers) and specify how data of a single player is presented, using the MapItemsControl element (with the Toolkit prefix). It has the ItemTemplate property, which is a data template representing a single player data. The Pushpin element should be placed in a particular GPS location (the GeoCoordinate property bound to Location) and its content should be composed from two controls (inside StackPanel), namely TextBlock with player name and Button allowing you to start navigation to the last location of the player. The Tag property of the Button element is bound to the PlayerData instance, which you will use for navigation. As you could see in the preceding XAML code, you do not bind to the collection of players data (the Players property). You will assign this collection, which should be presented on the map, programmatically from the code-behind file. Such an approach is easier in case of the Map extensions. An appearance of both TextBlock and Button is specified using styles. The one with the PlayerName key applies only to the player name. It sets the font size to 24, indicates that white bold font should be used, and also centers the text vertically and horizontally. The button style (the NavigateButton key) sets a suitable foreground color (white), font size (20), border brush (white) and thickness (1), as well as padding and margin to place the element in a proper location. MapPage.xaml.cs Apart from the XAML part, you need to add some code in the code-behind file. In the constructor, you assign a proper source for the MapItemsControl element, which is defined in the XAML code, as shown in the following block of code: public MapPage() (...) MapItemsControl items = MapExtensions. GetChildren(this.MapPlayers)[0] as MapItemsControl; items.itemssource = this.m_viewmodel.players; Unfortunately, you cannot just get access to this object via name, thus you use the MapExtensions static class and its method, named GetChildren. You get the first child of the extension, which is an instance of MapItemsControl. At the end, you assign the collection of player data to the ItemsSource property. Therefore, adding or removing any item from this collection will automatically be visible in the UI. [ 210 ]

13 Chapter 8 Whenever the player navigates to the Map screen, you also call the OnNavigatedTo method from the view model class, as follows: protected override void OnNavigatedTo(NavigationEventArgs e) (...) this.m_viewmodel.onnavigatedto(e); When the user clicks on the Navigate button in the indicator, you start navigation to the player location, as presented in the following code: private void BtnNavigate_Click(object sender, RoutedEventArgs e) Button button = (Button)sender; PlayerData player = (PlayerData)button.Tag; this.m_viewmodel.navigatetoplayer(player); However, the same method will be called for all player indicators. Thus, you need to find a way how to get data of the player whose indicator is chosen. You can do it by casting the sender object into the Button instance and reading the Tag property, which stores the PlayerData instance. Finally, you call the NavigateToPlayer method from the view model class. Now you can launch the application and open the Map screen. After moving to a suitable location on the map, you can see three indicators representing other players, which are shown in the following screenshots: [ 211 ]

14 Maps, Geolocation, and Augmented Reality Your location Currently, you can see other players on the map, however, your location is not presented. In this part, you will implement a mechanism of getting your GPS coordinates that will be used to indicate your current location, as shown in the preceding screenshot (on the right). You will also learn how to get and present the status of the GPS receiver. If you want to obtain your current GPS position, you should enable the ID_CAP_LOCATION capability in the manifest file. It is worth mentioning that the current location indicator should be moved while your location is changed. Thus, you can use this implementation not only in scenarios when the phone is not moving, but also in applications used in cars or during sport activities. MapViewModel.cs At the beginning, you will modify the view model of the Map screen. Here, you want to obtain the current location and the status of the GPS receiver. These data will be used by the data binding mechanism to present suitable information in the UI. You add the private field (m_geolocator), which is an instance of the Geolocator class from the Windows.Devices.Geolocation namespace, as follows: private Geolocator m_geolocator; The field makes it possible to obtain your current GPS coordinates. You will use them to present the indicator in a proper location. Then, you define two public properties (UserLocation, GeolocatorStatus) and two supporting private fields. You can do it in the same way as in case of other properties: private GeoCoordinate m_userlocation = GeoCoordinate.Unknown; public GeoCoordinate UserLocation (...) private string m_geolocatorstatus = string.empty; public string GeolocatorStatus (...) When the player navigates to the Map screen, the OnNavigatedTo method is called. You should modify its code as follows: public void OnNavigatedTo(NavigationEventArgs e) [ 212 ]

15 Chapter 8 this.geolocatorstatus = AppResources.GeolocatorInitializing; this.m_geolocator = new Geolocator(); this.m_geolocator.desiredaccuracy = PositionAccuracy.High; this.m_geolocator.movementthreshold = 1; this.m_geolocator.statuschanged += this.geolocator_statuschanged; this.m_geolocator.positionchanged += this.geolocator_positionchanged; (...) Here, you set the status message of the GPS receiver to a value of the localized string with the GeolocatorInitializing key (exemplary value: Initializing GPS receiver ). Of course, you should prepare translations for all supported languages. Then, the geolocator is initialized. You create a new instance of the Geolocator class, set values of the DesiredAccuracy and MovementThreshold properties, as well as handle the StatusChanged and PositionChanged events. The DesiredAccuracy property can be set to Default or High, and it specifies a way of getting the current GPS coordinates. The MovementThreshold property indicates a distance (in meters) that has to be taken to raise the PositionChanged event. You can get access to the localized string (in a programmatic way) by a static property of the AppResources class, for example, AppResources.MapHeader. Whenever the status of the GPS receiver is changed, you want to present the suitable information to the user. For this reason, every call of the Geolocator_ StatusChanged method causes translation of the status into a text message and assigning it to the GeolocatorStatus property. This operation has to be performed using Dispatcher, because is not executed on the UI thread, as shown in the following code: private void Geolocator_StatusChanged(Geolocator sender, StatusChangedEventArgs args) Deployment.Current.Dispatcher.BeginInvoke(() => string status = this.resolvegeolocatorstatus(args.status); this.geolocatorstatus = status; ); [ 213 ]

16 Maps, Geolocation, and Augmented Reality The Geolocator_PositionChanged method is called whenever the current location is changed. Its code is presented as follows: private void Geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args) Deployment.Current.Dispatcher.BeginInvoke(() => GeoCoordinate location = new GeoCoordinate(args.Position.Coordinate.Latitude, args.position.coordinate.longitude); if (this.userlocation == GeoCoordinate.Unknown) this.center = location; this.userlocation = location; ); Here, you get the current GPS coordinates (by the Position property of the args parameter) and store them in the location variable. Then, you check whether it is the first position update. In such a situation, the map should be automatically centered, which can be achieved by assigning a value to the Center property. At the end, you assign the obtained GPS coordinates to the UserLocation property. The ResolveGeolocatorStatus method translates the status enumeration value (for example, NotAvailable, Disabled, Initializing, and Ready) into a text message that is presented to the user, as shown in the following code: private string ResolveGeolocatorStatus(PositionStatus status) switch (status) case PositionStatus.NotAvailable: return AppResources.GeolocatorNotAvailable; (...) default: return string.empty; For instance, when the device is in the Initializing state, the Initializing GPS receiver information is presented. In case of the Ready state, the status message is cleared. You should define all necessary statuses as localized strings. [ 214 ]

17 Chapter 8 MapPage.xaml The remaining modifications are necessary in the view part. Here, you need to add the element representing the user location, as well as prepare a place for status information. At the beginning, you add the UserLocationMarker element as the second child of MapExtensions.Children, as follows: <Controls:Map x:name="mapplayers" (...) > <Toolkit:MapExtensions.Children> <Toolkit:MapItemsControl> (...) </Toolkit:MapItemsControl> <Toolkit:UserLocationMarker GeoCoordinate="Binding DataContext.UserLocation, ElementName=Page" /> </Toolkit:MapExtensions.Children> </Controls:Map> You bind the GeoCoordinate property to UserLocation. However, you need to use a bit different approach due to specificity of the Map extensions. For this reason, you need to set the ElementName binding property, which indicates the Map page, as well as include DataContext in the binding path. You need to get access to PhoneApplicationPage (the root element) by name, thus you will set Page as its name: <phone:phoneapplicationpage x:name="page" (...) > The TextBlock control, presenting the status information, is added just after Button controls and before the closing Grid tag: <TextBlock Text="Binding GeolocatorStatus" Style="StaticResource StatusText" Margin="0,-30,0,0" /> Its Text property is bound to GeolocatorStatus from the view model class. Its appearance is defined by the StatusText style, which sets a proper font size (16), height (25 pixels), as well as horizontal and vertical alignment (to right and to top). Now, you can launch the game and navigate to the Map screen. The process of GPS receiver initialization is started automatically. After a short period of time, you will read the GPS coordinates, and the current location indicator will be presented on the map. [ 215 ]

18 Maps, Geolocation, and Augmented Reality Augmented reality The augmented reality (AR) is an interesting solution in games and applications that combines the real world with elements generated by computers. In the Space Aim 3D game, you will use the augmented reality to present locations of other players into the image received from the camera. The size of the player indicator depends on the distance. If the player is close to your location, the rectangle is big. Similarly, while you are moving further, its size is smaller. The indicator contains both, the player name and the Navigate button that launches navigation from your current location to GPS coordinates of the place where the player was while playing the game. The following sketch presents indicators of three players on the World screen: Geo Augmented Reality Toolkit The augmented reality feature can be implemented from the scratch or with the usage of external libraries, like GART (Geo Augmented Reality Toolkit) available at Microsoft Limited Permissive License (MS-LPL). To keep simplicity, the second approach is chosen in this chapter. GART is a library that can be applied to applications which need to mark various places in the vicinity, for example, shops or historic buildings. The exemplary game also needs to indicate particular places, that is, locations of other players. Using the GART, you can implement the augmented reality feature in a significantly easier and faster way, because it automatically manages all required sensors, calculates distance to various places, updates results while moving, and puts indicators on the screen. If you choose to implement all of these mechanisms on your own, creation of the augmented reality feature will not be such an easy task. [ 216 ]

19 Chapter 8 It is interesting that GART can be used to present places both in 2D (on the map) and in 3D (in the world visible in the image obtained from the camera). It also supports the presentation of a special element that indicates the current heading direction, thus you can see in which direction you are looking. A process of adding the GART library into the project is different than in case of the Windows Phone Toolkit. At the beginning, you download the.zip file from the project website, available at In this book, the GART in version is described. Then, you extract the archive with library files and samples. Next, in the IDE, you should choose the Add Reference option from the context menu of the References node in the SpaceAim3D project. In the newly opened window, you select the Browse group (on the left), then click on the Browse button (in bottom-right corner), choose the GART.WP8.dll file (from the GART_1_2_0\Lib\WP8\ARM directory), and click on OK. Then, GART.WP8 should be also located in the project references list. Now, you can rebuild the solution. Locations of other players In this part, you will learn how to implement the augmented reality feature with the GART library. At the end, the World screen of the game will show player indicators. To obtain image from the camera, you should not forget to enable the ID_CAP_ISV_CAMERA capability in the manifest file. ARItemExtended.cs Each indicator used by the GART library is represented by an instance of the ARItem class or any class that derives from it. With the usage of ARItem you can store, for example, the player name and GPS coordinates. However, you also should be able to get data for navigation that is composed of both, the player name and the current location. Thus, you implement a new class, called ARItemExtended (in the.cs file inside the Models directory) that derives from ARItem: public class ARItemExtended : ARItem public PlayerData Player get [ 217 ]

20 Maps, Geolocation, and Augmented Reality return new PlayerData() Name = (string)this.content, Location = this.geolocation ; The class contains the Player property with the get accessor, which returns the PlayerData instance with suitable values of the Name and Location properties, content of ARItem (as string) and location, respectively. WorldViewModel.cs A few modifications are necessary in the view model of the World screen. At the beginning, you add the Players property, which will store instances of the ARItemExtended class representing the player data. By default, the m_players field contains an instance of ObservableCollection<ARItem> with zero items: private ObservableCollection<ARItem> m_players = new ObservableCollection<ARItem>(); public ObservableCollection<ARItem> Players (...) Many operations regarding the GART library (like starting necessary services) require access to the ARDisplay object, which you will create declaratively in the XAML code. Thus, you also add the Display property to the WorldViewModel class, to be able to perform some operations directly from the view model. You will set a reference to the ARDisplay instance from code-behind. public ARDisplay Display get; set; When the user navigates to the World screen, the OnNavigatedTo method will be called. Its code is as follows: public void OnNavigatedTo(NavigationEventArgs e) this.players.clear(); this.players.add(new ARItemExtended() Content = "Marcin", GeoLocation = new GeoCoordinate( , ) ); (...) this.display.serviceerrors += this.display_serviceerrors; this.display.startservices(); this.display.orientation = ControlOrientation.Clockwise270Degrees; The previous code requires addition of a few using directives, including for GART. BaseControls, GART.Controls, and GART.Data namespaces. [ 218 ]

21 In the code, you remove data of all player indicators (items inside the Players collection) and add some for testing purposes. Then, you configure and start the augmented reality mechanism by performing the following steps: Specifying a method called in case of errors Starting services required by the GART library Setting a device orientation (rotated 270 degrees clockwise in your case) With the usage of GART, the process of managing sensors is really easy, because all required operations are performed automatically. You just need to call StartServices and StopServices in proper methods. In the OnNavigatedFrom method, you unsubscribe the ServiceErrors event, and then stop services used by GART: public void OnNavigatedFrom(NavigationEventArgs e) this.display.serviceerrors -= this.display_serviceerrors; if (this.display.motion!= null) this.display.stopservices(); Chapter 8 You need to ensure that the last operation is performed only if the motion has been initialized correctly. Without this check, an exception will be thrown while closing the World page in the emulator. In case of errors regarding the GART library, the Display_ServiceErrors method is called. Here, you remove all indicators so as not to show them on the screen: private void Display_ServiceErrors(object sender, ServiceErrorsEventArgs e) this.players.clear(); The NavigateToPlayer method will start navigation to a location of the particular player, but currently it does not contain any content, as shown in the following line: public void NavigateToPlayer(PlayerData player) [ 219 ]

22 Maps, Geolocation, and Augmented Reality The current version of the augmented reality feature requires that the compass is already calibrated. Otherwise, the mechanism will not work correctly. You will learn how to present a way of compass calibration as a video clip, when necessary, in Chapter 10, Social networks, Feeds, Settings, and Local Rank. WorldPage.xaml The World screen differs significantly from others, including Map, because it will use the image from the camera as the background of the whole screen. Here, the control from the GART library is used. Thus, in the root element, you should add information about the namespace with GART controls. You need to specify a mapped prefix (GART in your case), as shown in the following line: xmlns:gart="clr-namespace:gart.controls;assembly=gart.wp8" Resources for the World page are defined as follows: <phone:phoneapplicationpage.resources> <DataTemplate x:key="playerindicator"> <Border Background="White" BorderBrush="Black" BorderThickness="3" Padding="5"> <StackPanel> <TextBlock Text="Binding Content" Foreground="Black" FontSize="24" HorizontalAlignment="Center" /> <Button Content="[ localized string ]" Tag="Binding Player" Click="BtnNavigate_Click" Foreground="Black" BorderBrush="Black" /> </StackPanel> </Border> </DataTemplate> <Style TargetType="TextBlock" x:key="loadingmessage"> (...) </Style> </phone:phoneapplicationpage.resources> The data template (with the PlayerIndicator key) represents an indicator of a single player. Here, the player name and the button are placed inside the Border and StackPanel controls. It is worth mentioning that the text presented in the TextBlock control comes from the Content property of the ARItem class. Similarly, the Tag property of Button is bound to the Player property of the ARItemExtended instance. Thus, you are able to pass the player name and the GPS coordinates to the method starting the navigation. [ 220 ]

23 Chapter 8 You also specify a style (with the LoadingMessage key) for the TextBlock control which presents a message about loading the augmented reality feature. It will be displayed as the centered white text with size 26. It is worth mentioning that this text will automatically disappear when the image from the camera is available. The main Grid contains just one column and two rows, as for other screens, for example, the Map one. However, in case of the World page, you do not need to specify the background image, because it will not be visible. Instead of it, you add the StackPanel layout control with the two TextBlock elements, which display information about loading the augmented reality feature, as shown in the following code: <Grid> <Grid.ColumnDefinitions> (...) </Grid.ColumnDefinitions> <Grid.RowDefinitions> (...) </Grid.RowDefinitions> <StackPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock FontWeight="Bold" Text="[ localized string ]" Style="StaticResource LoadingMessage" /> <TextBlock Text="[ localized string ]" Style="StaticResource LoadingMessage" /> </StackPanel> <GART:ARDisplay x:name="display" ARItems="Binding Players" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"> <GART:VideoPreview /> <GART:WorldView FarClippingPlane="10000" ItemTemplate="StaticResource PlayerIndicator" /> </GART:ARDisplay> </Grid> The most important part of the preceding code is the ARDisplay control, which is defined in the GART library. That makes it possible to show four layers represented by the following child elements: VideoPreview - Presenting an image from the device camera OverheadMap - Showing 2D map HeadingIndicator - Displaying the current heading direction WorldView - Presenting indicators in 3D world [ 221 ]

24 Maps, Geolocation, and Augmented Reality In the XAML code of the World screen, you specify a name of the ARDisplay control (to Display), as well as bind the ARItems property to the Players collection. You use the VideoPreview and WorldView controls added as child elements to ARDisplay. In case of WorldView, you specify the ItemTemplate property (as the PlayerIndicator data template), which makes it possible to present indicators in other way than as a text. Apart from that, you set a value of the FarClippingPlane property that specifies the maximum distance (in meters) to items to present them on the screen. If a distance is longer for a particular indicator, it is not shown. WorldPage.xaml.cs Apart from the XAML code, you need to make a few minor changes in code-behind. First of all, you modify the constructor, as follows: public WorldPage() (...) this.m_viewmodel.display = this.display; In the constructor, you assign a reference to the ARDisplay control to the Display property, defined in the view model class. Thus, you will be able to perform some operations regarding the GART library directly from the view model, as described earlier. You should also override the OnNavigatedTo and OnNavigatedFrom methods. Inside them you call the suitable methods (OnNavigatedTo and OnNavigatedFrom, respectively) from the view model class. Such an approach allows you to move the logic from view to view model. The BtnNavigate_Click method should be also implemented inside the code-behind file. It works in almost the same way as in case of the Map page. The author honestly encourages you to learn more about the GART library and the augmented reality possibilities. For instance, you can modify various properties of ARDisplay (like MovementThreshold) and WorldView (for example, NearClippingPlane or MaxItemScale) and observe differences. It is worth remembering that the augmented reality can be a really interesting and impressive way of presenting data to users. [ 222 ]

25 Error message Currently, the World screen can present an image from the camera as well as indicators representing particular players. However, in this part you will make some minor modifications which allow you to present an additional message in case of an error. Chapter 8 VisibilityConverter.cs At the beginning, you create the VisibilityConverter class (defined in the file inside the Models directory) which implements the IValueConverter interface. This class makes it possible to convert string into the Visibility enumeration value that indicates whether the control is shown (Visible) or hidden (Collapsed). You will use this class to show or hide the message depending on the content. If it is empty, the visibility is set to Collapse, otherwise set to Visible, as shown in the following code: public class VisibilityConverter : IValueConverter public object Convert(object value, Type targettype, object parameter, CultureInfo culture) string text = (string)value; return string.isnullorempty(text)? Visibility.Collapsed : Visibility.Visible; (...) WorldViewModel.cs Some minor changes are necessary in the view model of the World screen. First of all, you create a new property named ErrorMessage, which represents additional information which should be presented to the user: private string m_errormessage = string.empty; public string ErrorMessage (...) Another change involves the Display_ServiceErrors method. Here, you assign a message (from the localized strings) to the ErrorMessage property: private void Display_ServiceErrors(object sender, ServiceErrorsEventArgs e) (...) this.errormessage = AppResources.WorldCannotStartAR; [ 223 ]

26 Maps, Geolocation, and Augmented Reality App.xaml In the App.xaml file, you define a unified style for messages that can be presented to the user on various screens. For this reason, two styles related to messages are specified: <Style x:key="sa3dmessagebox" TargetType="Border" BasedOn="StaticResource SA3DBox"> (...) </Style> <Style x:key="sa3dmessage" TargetType="TextBlock"> (...) </Style> The first style (with SA3DMessageBox key) represents a rectangular area where the message is shown. It has a specified border thickness and brush, and a linear gradient as a background. The other (SA3DMessage key) defines an appearance of the text presented in the area. It should be displayed in white font with size 26. The text should be wrapped (TextWrapping) and centered (the TextAlignment and VerticalAlignment properties set to Center). WorldPage.xaml The last modifications are required in the XAML code of the World screen. At the beginning, you map the Models prefix and add VisibilityConverter to the resources, as shown in the following line: <Models:VisibilityConverter x:key="visibilityconverter" /> Then, you add the Border control (just before the closing Grid tag) which can present information about an error, for example, that the augmented reality feature cannot be started. A suitable part of the XAML code is as follows: <Grid> (...) <Border Visibility="Binding ErrorMessage, Converter=StaticResource VisibilityConverter" Style="StaticResource SA3DMessageBox" Grid.Row="1" Grid.Column="0" Width="600" Height="100"> <TextBlock Text="Binding ErrorMessage" Style="StaticResource SA3DMessage" /> </Border> </Grid> Let's launch the game and open the World screen. If you run the application in the emulator, you will see just a gray rectangle with a smaller moving one, as well as the information that the feature cannot be started. To display the real image from the camera, you need to run the application on the phone. Then, you will see the result: [ 224 ]

27 Chapter 8 Navigation to GPS coordinates Currently, you can launch the game on the phone and see locations of other players on the map and in the augmented reality. However, after clicking on the navigation button nothing happens. In this part, you will add another feature that allows running the navigation to the player after clicking on the Navigate button, both in the Map and World screens. Implementation The navigation to the specific GPS coordinates is possible using the Maps directions task. In this section, you will use only a subset of its features, because you just need to find a route from your current location to the specified GPS coordinates. However, the player name should be shown instead of raw coordinates. GameHelpers.cs In previous chapters, you created the GameHelpers static class. Here, you will add the NavigateToPlayer method, which starts the navigation: public static void NavigateToPlayer(string playername, GeoCoordinate location) MapsDirectionsTask task = new MapsDirectionsTask(); LabeledMapLocation endpoint = new LabeledMapLocation(playerName, location); task.end = endpoint; task.show(); [ 225 ]

28 Maps, Geolocation, and Augmented Reality To launch the navigation, you create a new instance of the MapsDirectionsTask class (from the Microsoft.Phone.Tasks namespace), set the end point (both the name and location), and call the Show method. The navigation mechanism starts automatically, as well as the route is calculated and presented to the user. MapViewModel.cs and WorldViewModel.cs The view model classes for the Map and World screens contain the NavigateToPlayer method. However, currently they do not contain any code. To support the navigation, you need to call the NavigateToPlayer method (from the GameHelpers class) with suitable parameters (the player name and location), as shown in the following code: public void NavigateToPlayer(PlayerData player) GameHelpers.NavigateToPlayer(player.Name, player.location); Let's launch the game and run navigation! After clicking on the Navigate button (on the Map or World screens) you should be automatically moved to the external application, which presents a route to the player, as shown in the following screenshot: [ 226 ]

29 Chapter 8 Summary The chapter was related to the maps, geolocation, and augmented reality features in the Windows Phone 8 applications and games. At the beginning, you learned how to use the Map control to present locations of other players in the vicinity, as well as the indicator of your current position. To make this task easier, you used the Windows Phone Toolkit, which provides you with controls representing the Pushpin element and the indicator of the user position. You also got to know how to read the current GPS coordinates and detect their changes. It is important that you can create this solution using the MVVM design pattern, data templates, and data binding mechanisms, presented earlier in the book. The next part of the chapter presented the topic of augmented reality. You learned how to create the application which shows indicators in the image received from the camera. To simplify the task, you used the GART library. You also handled some errors which could occur while launching the augmented reality feature, by showing additional message to the user. At the end, you got to know how to launch navigation to other players easily, both on the Map and World screens. Currently, on these screens you can see only test data, but in the next chapter you will create, deploy, and consume the web service which can provide the game with real data! Thus, let's test the newly added features and proceed to the next part of the book to learn how to allow the game to share various data between players over the Internet! [ 227 ]

30 Where to buy this book You can buy Windows Phone 8 Game Development from the Packt Publishing website: Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy. Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.