Windows Phone Games with Construct 2

  • 63 favourites



7,668 visits, 21,014 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Back button

Handling the back button is one of the most fundamental requirements to pass certification. More information on the requirements can be found here: Technical certification requirements for Windows Phone.

For our purposes the two following points apply to this game:

For games, when the Back button is pressed during gameplay, the game can choose to present a pause context menu or dialog or navigate the user to the prior menu screen. Pressing the Back button again while in a paused context menu or dialog closes the menu or dialog.

Pressing the Back button from the first screen of an app must close the app.

Most games have a pause screen, and during gameplay you would simply toggle the paused state. As this example is very simple, I’m just going to navigate from the game to the main menu when the back button is pressed.

To do this, open up the Gameplay event sheet and add the following. As this event sheet is only used ingame, this won’t be called from the menu.

Next up open the Menu event sheet and add the following.

So now when ingame and the user presses the back button, the game will go back to the main menu. When the user presses the back button from the main menu, the app quits. We now meet the certification requirements for the back button!


So this is all very good and well, but what if you want your game to run in portrait instead of landscape? You can very simply just open up the MainPage.xaml file in the Visual Studio Solution Explorer and change the following text:

    SupportedOrientations="Landscape" Orientation="Landscape"


    SupportedOrientations="Portrait" Orientation="Portrait"

Now when you launch the game it will run in portrait.


When a user presses the Windows button on their phone they deactivate your app. When they press back and continue playing, or if they click your apps icon again, they activate it again. By default the game will just resume from where it left off - which is convenient! However you may wish to pause the game to provide a better user experience when they return to the app.

We won’t add this functionality to the example .capx, as we don’t have pause functionality, but this is how you could add it to your own game. Notice that we use the browser object, and I’m assuming you have a function called “Pause” which would pause the game.


Tombstoning is a bit of a relic from Windows Phone 7, where multitasking apps had to be simulated by the developer through saving and loading states. These days tombstoning is less relevant, but can still happen if the phone’s memory runs out and you resume your app. By default the game will just restart, which isn’t so bad, but you may want to handle it more elegantly.

You can add the following to the example .capx in the Global event sheet. This stores the name of the layout when suspending, and goes to that layout when resuming from tombstone.

I have experimented with saving the complete state of the game using the System object Save and Load events. Unfortunately it looks like this is too much information to save during suspension and will fail, so I don’t recommend it.

You can easily test tombstoning by navigating to Project -> WindowsPhonePluginForConstruct2 Properties, selecting the Debug tab and checking Tombstone upon deactivation while debugging.

Now when playing the game, hit the Windows button and then press the back button. You’ve now tombstoned your app!

Splash screen

This sample .capx is a very small game so you probably don’t see the splash screen for very long. On larger games it will be displayed while the browser and JavaScript are loaded and will take a little longer, so I recommend adding in your own splash screen.

To do this open up the MainPage.xaml file in the Solution Explorer and find the following code:

        <Grid Background="[b]#00b0be[/b]">
            <Grid x:Name="LayoutRoot">
                    <ImageBrush ImageSource=[b]"/Assets/SplashScreen.png[/b]" Stretch="None"/>

Emboldened you’ll first see the hexadecimal background colour and the image URI. Change the colour to whatever you please and either just replace the SplashScreen.png file with your own, or add a new one to the project and specify the URI there.

In-app Purchases

For this section we’ll add an in-app purchase so the player needs make a payment to access the purple cap.

Navigate to the Menu event sheet to the example .capx. After expanding the Hats group you should see the following:

Add in the following logic to add in-app purchases on Windows Phone 8. This simply sets the purple hat button to be active when purchased and prompts to purchase when inactive and pressed.

Notice the product ID “PurpleCap”. This is very important and needs to be consistent at every step of the process.

Now export your project and copy c2runtime.js from the exported directory to the Windows Phone 8 project directory.

Currently the app will fail as we haven’t added the IAP to the Windows Phone project. To do that, open up the file WindowsStoreProxy.xml in the Solution Explorer. You should see the following:

    <?xml version="1.0" encoding="utf-16" ?>
      <!-- Durables-->
      <ProductListing Key="TestProduct" Purchased="false" Fulfilled="false">
        <Name>Windows Phone Plugin Test Product!</Name>
        <Description>This is the great-value test product that comes with the Windows Phone Plugin for Construct 2!</Description>
        <Tag>Additional text</Tag>
      <ProductListing Key="TestProduct2" Purchased="false" Fulfilled="false">
        <Name>Windows Phone Plugin Test Product!</Name>
        <Description>This is the great-value test product that comes with the Windows Phone Plugin for Construct 2!</Description>
        <Tag>Additional text</Tag>

Change it to this:

    <?xml version="1.0" encoding="utf-16" ?>
      <!-- Durables-->
      <ProductListing Key="PurpleCap" Purchased="false" Fulfilled="false">
        <Name>Purple Cap</Name>
        <Description>This is a great looking purple cap.</Description>

We’ve removed the test products from the file and instead added a name, description, product ID, product type, formatted price and keywords. These are parameters that can be viewable to the end user, so ensure they’re relevant to the product. For the purposes for this project we’re using a Durable product type, which means it’s a one-off purchase. You can find out more about Consumables, the other product type that you can purchase unlimited times, here: In-app purchase for Windows Phone 8.


There exists a standard Vibrate action in the Browser object, but unfortunately it doesn’t work on Windows Phone. For that we’ll need to use the Windows Phone object.

To make it vibrate when you launch your character, navigate to the Gameplay event sheet and expand the Fling group. The last condition in the group is the flinging of the character, so add the Vibrate Windows Phone action from the Windows Phone object and set the Vibrate parameter to 0.4.

Now when you export the phone will vibrate when you fire!


  • Order by
Want to leave a comment? Login or Register an account!
  • I see that you tried to explain in as much detail as possible, but frankly it's a little confusing. Maybe you'll have a chance to record this tutorial? It would make life a lot easier for a lot of people, at least for me))