Want to create a HTML5 game for Windows 8? And publish it to the new Windows Store?

HTML5 Game Starter Kit for Windows 8

This is a great starter kit developed by one of my colleague Petri Tapio Wilhelmsen who is a member of the Microsoft Western Europe team.

As you can see from my previous posts were aware many of the apps that are submitted to the Windows Store are failing certification because they didn’t know that a Privacy Policy was needed, or that the game/app had to implement a snap view and so on. This kit will help you with the most important things.

Petri has created an excellent HTML5 Game starter kit that will help you set up a new Windows 8 game project in short time, this is ideal for schools, colleges and University who teach game development with HTML5.

By using this starter kit you can get most of this functionality ready, for more details see https://digitalerr0r.wordpress.com/2012/10/08/html5-game-starter-kit-for-windows-8/ or look at the following quick guides below.

Here is a quick video to using the HTML5 Starter kit

5 Step Guide to Bulding HTML5 games with the HTML5 Starter Kit

Step 1a. You need to have Visual Studio 2012 installed on a Windows 8 device to use this. If you are a student and have access to Dreamspark.com (MSDNAA) or a MSDN Subscription you can download both products from there.

You can use the free version of Visual Studio 2012 (express) and can be downloaded here:
https://www.microsoft.com/visualstudio/eng/downloads

The Release Preview can be downloaded for free here:
https://windows.microsoft.com/en-US/windows-8/release-preview

Step 1b. Download HTML5 Game Starter Kit for Windows 8

Step 2. Start Visual Studio 2012 and create a “Blank App” Windows 8 JavaScript project:

Click on File->New->Project…

Choose JavaScript as the language and the template “Blank App”:

Give your project a name (here: Mitt Spill) and press OK.

A new project is generated and the structure will look like this:

Step 3. What we will do now is to add the HTML5 Game Starter Kit files to the newly created project. We just copy the content of the HTML5 Game Starter Kit folder to the project folder.

So, copy thse files from the HTML5 Game Starter Kit:

Navigate to your new game soludtion and open the project folder. Paste the files here, and replace if asked:

The project folder will look somewhat like this:

Step 4. Go back to your Visual Studio 2012 project and update if needed:

Step 5. Include the new files in your project.
The last thing you need to do is to include the new files in your project structure from Visual Studio 2012.

Click on the button highlighted in the red circle below. It will show the files that exist in the filestructure but not in the project structure(dark gray).

Select the following files (hold control and click them):

Right click one of the files and select “Include in project”:

6. Test if it works.
Congratulations, you are now having a working game project! Run the app and test that it works.

Whats in the starter kit?

Tiles

Full screen mode

Snap view mode

Full screen with other app in snap view.

About page

Privacy Policy

Remember!    The example game is using CreateJS. It’s located under js/CreateJS. You can remove this folder if it’s not needed in your project. But if you do so, the example game will not compile.