Using Construct2 to build a HTML5 Window 8 Game

scirra-logo-01     WinPhone8 html5 Win8_logo

Using Construct 2 to build an awesome Windows 8 HTML5 game.

Construct2 is a superb application for building HTML5 games, you can download the Free edition and get going with the Beginner's guide to get started on building great games in a very short time period also I have produced a really nice framework for curricula adoption see https://blogs.msdn.com/b/uk_faculty_connection/archive/2012/10/15/learning-to-build-a-html5-windows-8-game-in-15-lessons.aspx 

Setup

You will need Windows 8. You then need to install Visual Studio 2012 Express on Windows 8 if you have a DreamSpark account then you can install any version of Visual Studio 2012. You will also need to ensure you setup a FREE windows 8 and Windows Phone developer account via DreamSpark see https://www.dreamspark.com/Student/Windows-Store-Access.aspx

Development

You'll need to add touch controls. See this tutorial on touch controls for help on that. Different devices have different size screens. See supporting multiple screen sizes. You can add the Windows 8 object to your project to take integrate with Windows 8 specific features like snap and roaming storage.

Exporting from Construct 2

First, ensure your project has the right Name, Description and Author properties set, since these will be used in the exported app.
In the Export Project dialog, choose Export for Windows 8 and follow the next steps as you would for exporting an ordinary project.
In the export directory you will find a Visual Studio project.

Note there are three image files for the app icons, app-logo.png, app-smalllogo.png and app-storelogo.png. You should replace these with your own images but keep them exactly the same dimensions. The main project file has the extension .sln (solution). Double-click it in Windows 8 and Visual Studio should open it.

Testing from Visual Studio

If you've not used Visual Studio before, it's a complex and sophisticated tool for application development. However, you only need to use a small number of commands to configure and test your app. Find the "Solution Explorer" bar which lists all the files in the project.
The solution explorer.

Double-click package.appxmanifest. This file contains all the settings for your app. There is one thing you need to set up because Construct 2 can't export it for you, which is the publisher certificate for your app. Click the Packaging tab, which probably has a red X by it because the certificate is not set.
The app manifest.
Now click Choose Certificate... . In the dialog that opens, click the dropdown and select Create test certificate... .
Choosing a certificate.

A dialog appears with your Publisher ID and a password entry. Don't enter a password - leave it blank and hit OK. Click OK on the Choose Certificate dialog as well, and you should now have a certificate set.

If you've done this correctly the red X should have disappeared too.

Test certificates only allow you to test your app. When publishing to the Windows 8 App Store, you'll need a different certificate to publish your app.
Now you can launch your app by pressing F5. Visual Studio will build it and launch it as a Windows 8 app, which uses the Internet Explorer 10 browsing engine. This allows you to test everything is working in the new browser and OS. You can also try tweaking the settings in package.appxmanifest, which include options like orientation lock and other tile images.

Publishing

To submit to the Windows 8 App Store, start following the steps from this URL: https://appdev.microsoft.com/StorePortals/ You might also be interested in exporting to Windows Phone 8 as well (which must be done separately).

For more details on Construct2 and Windows 8 see https://www.scirra.com/