HTML5 Game Starter Kit for Windows 8

image

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

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.

I have created a simple HTML5 Game starter kit that will help you set up a new Windows 8 game project in short time.

For a game te be certified in Windows Store it must contain a given set of functionality like:
- Minimum resolution: 1024 x 768
- Snap view
- Implement the Settings charm with an About page and a Privacy Policy page.
- Tiles in various sizes.

By using this starter kit you can get most of this functionality ready,  just change the text and the images you want to show!

Updates

Version 0.1
This is the first release. It contains the most important functionalities to get you started. Also an example game comes with it (not really a part of the Starter Kit) just to show it runs and that you can see how Touch is working and so on.

 

How to use the HTML5 Game Stater Kit
It’s very simple to get started.

You can either read how to use this below by following the 5 steps, or see this video:

If you want to learn how to create the example game that comes with this starter kit, you can read the guide here:

Part I:
http://digitalerr0r.wordpress.com/2012/09/19/html5-game-development-for-windows-8-1-getting-started/

Part II:
http://digitalerr0r.wordpress.com/2012/09/20/html5-game-development-for-windows-8-2-adding-a-player/

Part III:
http://digitalerr0r.wordpress.com/2012/09/20/html5-game-development-for-windows-8-3-finishing-your-first-game/

 

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:
http://www.microsoft.com/visualstudio/eng/downloads

The Release Preview can be downloaded for free here:
http://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…

image

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

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

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

 

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:
image

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

image

The project folder will look somewhat like this:
image

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

image

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).

image

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

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

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?

smalllogostorelogologowidelogo

Tiles

 

image
Full screen mode

image
Snap view mode

image
Full screen with other app in snap view.

image
About page

image
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.

About these ads
This entry was posted in Game programming, Windows 8. Bookmark the permalink.

15 Responses to HTML5 Game Starter Kit for Windows 8

  1. Pingback: HTML5 Game Starter Kit for Windows 8

  2. Pingback: HTML5 Game Starter Kit for Windows 8 « CreepyEd's Tech-cellent Adventure

  3. Pingback: Tutorial: cum să creezi rapid un joc pentru Windows 8 | Mobzine.RO ::: Your mobile IT world!

  4. Pingback: Links of the week | Jan @ Development

  5. Pingback: HTML5 Game Starter Kit for Windows 8 | digitalerr0r | Ra Puke Moana

  6. gamer12345 says:

    hey thanks again, was wondering if we could use this in our games but change the logos and about text etc. :)

  7. gamer12345 says:

    also would it be possible for you to tell me how you would go about adding the high score to snapped view as it is something that sounds interesting but do not know how you would do it. thanks in advance :)

  8. Pingback: Register now for Wowzapp 2012!! « CreepyEd's Tech-cellent Adventure

  9. Pingback: Register now for Wowzapp 2012!! - Maria Naggaga - Site Home - MSDN Blogs

  10. Pingback: Register now for Wowzapp 2012!! - Developing the Future - Site Home - MSDN Blogs

  11. Johnonym says:

    Hi. I am trying to do the step from “step 1a” to “step 6″. I can compile and run the program, but when I run the program, I am only prompted with the html5 game starter kit logo, and then the app loses focus. Almost as if it were closing itself. Is that suppose to happen? If not, what is suppose to happen?
    Thank you in advance

  12. Pingback: Visual Studio 2012 and WOWZAPP | Chewing it Over

  13. What exactly seriously encouraged u to create “HTML5 Game Starter
    Kit for Windows 8 | digitalerr0r”? I personallyabsolutely enjoyed
    the blog post! Thank you -Agustin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s