Windows Phone Games with Construct 2

Favourite 43 favourites
Tutorial written by thehenOriginally published on 24th, June 2013 - 3 revisions

If you find this tutorial helpful, consider making a Bitcoin donation: 1KWU4MxiGR9wxoMHFN4wrtyhAyugYCzYac

Your continued support will help in maintaining existing and building new plugins, as well as writing tutorials such as this one. Thank you :)

Introduction

Windows Phone can be a great platform to release your Construct 2 games. My tests have shown it to outperform iOS and Android, enjoying silky-smooth gameplay even with physics-intensive games. The marketplace is also much less competitive than rivals, making it the perfect platform to test your game before branching out into more competitive territory.

Unfortunately the mobile version of Internet Explorer 10 has some shortcomings, so I created the Windows Phone Plugin for Construct 2 to plug the gaps, giving better performance and native feature support. Ensure you follow the forum post to keep up to date as new features are added.

For this tutorial we’re going to add the necessary features to a basic Construct 2 game, so that it will run and pass certification on Windows Phone.

Firstly ensure you’ve downloaded and installed the Windows Phone Plugin for Construct 2.

Next up, download the sample .capx. This is a simple flinging game where you have to reach your friend and give them a kiss ❤.

You can also download a completed .capx, with the changes made from this tutorial. I do however strongly recommend you work through the tutorial so you understand how to properly export and test on Windows Phone. This could be useful though incase you make a mistake and need a reference.


We’ll need to add the Windows Phone object to the project, otherwise the exported game won’t launch. First, open up the .capx and in the objects panel, right click and insert new object. Find the Windows Phone object and select Insert.

Exporting the project

Included in the Windows Phone Plugin for Construct 2 is a ready-exported project that we just need to drop the relevant exported files into. Never export directly from Construct 2 into this project otherwise vital files will be overwritten. I generally have two folders, one for the project and one for the exported files. Then I just copy what I need from the exported folder to the Windows Phone 8 project folder, helping to ensure nothing important gets overwritten.

Copy the Project folder included with the plugin to a safe location. Next, export the Construct 2 game for Windows Phone 8, ensuring that Minify script is unticked (Minifying works but for some reason performance is much slower on Windows Phone). For more information on exporting your project read How to make a Windows Phone 8 app -> Exporting from Construct 2.

Now we have two folders, one for the Windows Phone 8 project and one for our exported Construct 2 project. We now need to copy over our JavaScript and any images or files currently not included (no audio yet - that comes later).

From your exported Construct 2 project copy the c2runtime.js file and the images directory to the Windows Phone 8 project folder. For this game that’s all you need, but if your own project has files included, ensure they get copied across too.

Open up the Windows Phone 8 project (WindowsPhonePluginForConstruct2.sln) and we’ll need to add our images to the solution. Navigate to the solution explorer, right click the images folder, select Add -> Existing Item, then add the newly copied image files.



Converting audio

Unfortunately we can’t use the audio files that are exported by Construct 2, we’ll have to use .wav files. I always recommend using uncompressed .wav files for your source when loading audio into Construct 2 so that you can go back and make changes to the sound files without a degradation in quality.

Hopefully you’ll have these .wav files that you can copy straight into your exported projects media directory. If not then there are a number of tools that will allow you to convert to .wav. I use Adobe Audition, but I hear Audacity is a good free alternative.

If you get an audio-related error, or there is a visible lag when playing audio, I recommend you convert your channels to mono, change sample rate to 22050 Hz and bit depth to 8. This will reduce audible quality, so play with these values to determine what works best for your game.

For this tutorial I’ve included the .wav files needed in the download.

Once you’re happy with your .wav audio files, ensure they have the same name as your source files, then copy them to your exported projects media directory. Ensure these are also included in your exported project by navigating to the solution explorer, right clicking the media folder, selecting Add -> Existing Item, then adding the newly copied .wav files.



Playing audio with functions

Currently the game will uses the standard Audio object, but that doesn’t fully support Windows Phone, so we need to use the audio actions included in the Windows Phone object. The goal of playing audio with functions is to enable audio on Windows Phone whilst not breaking it for other platforms.


Having to detect the platform and use a different action every time we play a sound can become tedious and difficult to manage. Fortunately Construct 2 includes a Function object that makes this much easier to implement. In the objects panel, right click and insert new object. Find the Functions object and select Insert.

Switch back to the example .capx you downloaded earlier and open up the Global event sheet.

We need to add the following two functions PlaySound and PlayMusic:


In both functions we detect if the platform is NOT Windows Phone and use the standard audio object if that is the case. The following is inside the PlaySound function. Notice we’re using the function parameters for the fields - this allows us to reuse these function parameters for both the standard audio object and the Windows Phone audio.


The following is inside the PlayMusic function. Notice the Folder and Loop parameters are different to the previous play action.


Next we use an Else condition to determine when the game IS running on Windows Phone so we can use the Windows Phone object to play the audio.


This is the Windows Phone Play sound (by WAV URI) action inside the PlaySound function. Notice that the Audio file URI parameter is the full URI, rather than just the name of the sound. So in the following example if the first function parameter was “Whoosh” the full Audio file URI would be “media/Whoosh.wav”.


This is the Windows Phone Play music (by WAV URI) action inside the PlaySound function.


So now you should have your functions set up, which when called will correctly determine the platform and use the correct audio object as needed. This method also makes it much easier to handle when a user wants to change Sound/Music settings as all your audio playing logic is in one place. Generally it’s good practice all round!

Now we need to go through and replace where our sound effects and music is played with calls to the functions.

Open up the Gameplay event sheet and the Fling group. Here is where we’ll find our first sound effect. This is what the Audio object Play action currently looks like:


We need to replace it with the following Function object action Call function. The Name “PlaySound” is the name of the function we’re calling, Parameter 0 is the name of the sound (remember the filename is automatically generated from this for Windows Phone) and Parameter 1 is the volume.


Here is what it should look like:


Go through and make the same changes for the remaining sound effects. These can be found in the Blocks group and when added should look like this:



They should now look like this:


Next up we replace the Audio object action for the music with the Function object Call function action. Expand the Music group and you’ll find the Audio action below:


Replace this with the the Function object action Call function as below:


This should now look like this:


Ensure you’ve removed any Audio object actions and they’ve all been replaced with your function calls.

This was quite a long process so there’s every chance you may have made a mistake along the way. Not to worry! You can download a .capx here with the audio functions added to the sample .capx.

Testing the game

Now we’ve exported the game, copied across files and changed our audio to work with functions, we can test to make sure everything works so far. Export the game again, the same as you did previously, then copy c2runtime.js to the Windows Phone project directory.

Run the game and fingers crossed, everything should run fine and the music and sound should play!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

2
Zajkra 1,378 rep

Sup man, this is great but the "completedCapx" file download is empty, and its 22 bytes.

Thanks you.

Tuesday, June 25, 2013 at 2:13:55 AM
3
kenli 6,393 rep

It's nice tutorial for windows phone 8 gamedev with Construct 2. Thanks @thehen for sharing with us :)

Tuesday, June 25, 2013 at 4:48:38 AM
1
Blacksmith 7,278 rep

Fantastic tutorial @thehen, lots of information and easy to follow (great plugin too)!

Thanks for doing this :)

Tuesday, June 25, 2013 at 8:19:23 AM
1
Joskin 5,929 rep

Thanks you ! Great tutorial !

Tuesday, June 25, 2013 at 8:30:21 AM
1
anthonykojima 9,633 rep

This is fantastic bro. Really A HUGE THANK YOU! I will probably use this tutorial and the plugin you provided. You've been doing a lot of stuff for Microsoft devices lately and I was wondering if you are a javascript developer in addition to be a great graphic designer. You impress me dude! I wish I had your skills.

Tuesday, June 25, 2013 at 8:36:44 AM
0
thehen 10.2k rep

@Zajkra fixed thanks!

@kenli @Blacksmith no probs!

Tuesday, June 25, 2013 at 8:46:49 AM
1
thehen 10.2k rep

@Joskin no probs :)

@anthonykojima I am indeed a JavaScript dev as well as artist. A web dev/design background was a good foundation for HTML5 games ;)

Tuesday, June 25, 2013 at 8:48:47 AM
1
guero 2,991 rep

Thanks for awesome tutorial :) .İt is all ı need about Windows Phone.

Tuesday, June 25, 2013 at 7:56:15 PM
1
Tedg 5,458 rep

Thank you very much for sharing this!

Wednesday, June 26, 2013 at 3:45:40 PM
1
stridhiryu030363 1,284 rep

Hmm.. I tried the plugin and added the back button events but it doesn't appear to work on an windows phone emulator. Is this normal?

Thursday, June 27, 2013 at 10:41:34 AM
0
thehen 10.2k rep

@stridhiryu030363 did you follow the 'Exporting the project' section of the tutorial?

Thursday, June 27, 2013 at 10:46:03 AM
0
stridhiryu030363 1,284 rep

Oh ok. That was the problem. Thanks a lot for the help and the tutorial.

Thursday, June 27, 2013 at 12:04:25 PM
1
Cherico 2,429 rep

Absolutly GREAT!!!

Sunday, July 07, 2013 at 7:13:38 PM
2
WPGamer 1,943 rep

So glad you have this tutorial, I'm currently using it as a checklist to make sure I get everything.

Tuesday, July 09, 2013 at 1:43:47 AM
1
appeality 2,383 rep

Outstanding. I was able to convert one of my games in about 30 min after a couple of hiccups. Thank you very much!

Monday, July 15, 2013 at 8:35:04 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.