To begin we need to export our project to a Windows Phone 8 app. In my previous tutorials, I have been working with a game called Golden Ball, so I will continue to use that project. If you have been worked through all of the Windows 8 Object tutorials or the Ads for Windows 8.1 tutorial, you can continue with that project. Otherwise, you can find a start project here, Golden Ball Ads Starter.
Feel free to open the project up and take a look around, but we don’t actually need to make any changes in Construct 2 right as all of our changes will take place in Visual Studio. So, we need to export our project to open up the source code in Visual Studio. Take a look here for my post on Exporting a Construct 2 Project to Windows. You should export your project as Windows Phone 8. After you export, open up your Visual Studio solution file (.sln). You should see a solution as below.
NoticeI had the WMAppManifest highlighted in the Solution Explorer in the previous picture. Go ahead and open that file up and navigate to the Capabilities tab. For ads to work, we have to select certain capabilities. Check that all of these capabilities are checked below in your Capabilities tab.
Now that we have the necessary capabilities selected, open up your MainPage.XAML, which should look like this. It mainly consists of a WebBrowser control that basically wraps out game (as a web app) in a XAML control.
What we want to do is to add another row to our grid for our ad banner. You can either use the visual editor to add a row or copy this code above the WebBrowser control. The result is shown in the image below.
If you used the Visual Editor, you might notice that a Grid.RowSpan property was added to your WebBrowser control. If so, make sure that it is set to 1.
Now, let’s add the control for our ads. The easiest way for me is to open up the toolbox and scroll down to the AdControl shown at the bottom, then drag it on the Visual Editor. Keep in mind that you must have all of the Windows Phone 8 tooling installed.
After you drag the AdControl control on the Visual Editor it creates XAML code for you as below.
Notice above that there is are properties for both Application ID and Ad Unit ID. We can leave these alone for testing (in fact, test ads won’t show up in the emulator if you use real Application IDs and Ad Unit IDs). However, when it comes time to publish, you will want to fill these properties appropriately. To set up an ad unit in PubCenter, you can read my post, Monetization with Ads - Creating App ID and Ad Unit ID.
Moving on, the generated code for the AdControl is giving us a lot of properties that we don’t necessarily need, so here is how I cleaned it up. I set Vertical and Horizontal Alignment to center, the width and height to 480 and 80 (the same size as the banner I created in PubCenter), and the set the Row to 1. After you clean it up, it should like this.
Now, go ahead and run your game in the Windows Phone Emulator, and you should see the Microsoft test banner as shown below!
Do keep in mind that when you publish you will need to add real Application ID and Ad Unit ID. Don’t forget that!
As always comment below or find me on twitter, @jamesqquick, with any questions, comments, or concerns.