Learning to build a HTML5 Windows 8 game in 15 lessons

So you want to build a game for Windows 8?

Well we want to make it as easy as possible for you to do so. That’s why we thought it would be a good idea to compile all the resources you could use to develop a short course for your school, college or University students using Scirra Construct 2 and HTML5.

Example Course Schedule

Class No.

Tasks to undertake

Topic to be discussed



Developing Games for Windows 8

  • What is expected
  • Build your first Windows 8 Application
  • Build your first game using a tutorial
  • The Windows 8 Store App Design Solution



Start your Portfolio:

· Start your design portfolio

Build a game:

· Create a Powerpoint based Storyboard for your game

· Build a simple game using a Construct2 tutorial and post it to a hosting site

· Beginner's guide to Construct 2

· http://www.scirra.com/arcade

· Modify the game using art, sounds you discovered online

Create online presence

· Create a Blog (documenting your learning experience, and application creation, ideas reasons why your doing this)

· Generate a “professional” Facebook Page for your App

· Generate a LinkedIn account (to promote your employability)

· Create a YouTube Channel (for demonstrating your game/app)

Design Processes, you are required to meet with your assigned teams and discuss the following:

· Review what you should put in a blog with respect to game design

· What is a design portfolio?

· What are the available tools to make a video

· Review simple games


· User Experience Design Fundamentals


Before class make sure to read:

o The Windows 8 Store App Design Solution

o User Experience Design Fundamentals

o Applying User Experience Process to Windows 8 Store  Applications

Turn in:

  • Links to your :
  • Blog, YouTube Station, Professional Facebook and LinkedIn
  • Game on Arcade

At the end of class session turn in:

· Turn in your Facebook baseline report

· Turn in your baseline Blog analytics

· Quiz

Discuss Design Principles in first three reading modules

Game Design for Slats:

· Snap

· Fill

· Full

Adding another level to your game:

Review of Treasure Map example


· Read:
Introduction To Windows 8 Store App Design Principle: Do More with Less

Turn In

  • Add a level to your the beginner game
  • Create a Platformer game using the tutorial at: https://aka.ms/csudh495platformer2
  • Design thoughts on your blog, Link only, about how you will use a platformer for a Holiday theme game
  • Video on how to you created the beginning game
  • Facebook postings

In Class:

· Turn in Documentation

· Quiz

Discussion about doing more with less, demonstration of design and implementation

Student demos of design considerations

In class lab:

· Students will gather design documentation from other students and then begin to break down the scenario implementation

· Introduction of HTML5/JavaScript code for Windows 8



Making a great app

Turn In:

  • Using the Platformer you created using the tutorial at https://aka.ms/csudh495platformer2, modify the game to a theme and upload it to the Arcade, turn in the link
  • Post your design thoughts on your design issues and implementation
  • Video on why people should play your game
  • Facebook postings

In Class:

  • At the end of class turn in scenario experiments
  • Quiz

· Discuss and experiment with scenarios

· Students will demonstrate and discuss their “platformer” games

· Feedback on games




Turn In:

  • Add a level to your game
  • Develop a marketing plan for your game
  • Post upgrade to the Scirra.Com arcade
  • Demonstrate how you will implement this game in Windows 8 using drawings, scenarios etc.

In Class:

  • Check-in Modified lab component to Team Foundation Services
  • Quiz

· Discuss Windows 8 Store App Design Principle and Pride in Craftsmanship

· Discuss Game design using HTML5/JavaScript Hello World App

· Quality software and how to create quality software

· Team Foundation Services

In Class Lab:

· Check-out lab component, modify and check-in modified component



Turn In:

· Modifications to assigned HTML5/JavaScript code

· Addition of Scoring and simulated Leaderboard to your Themed game

· Marketing plan for your Game

· YouTube Video about your game

In Class:

  • Quiz

· Discuss what it means to be Authentically Digital

· Examine MS Project report of status of the HTML5/JavaScript Hello World App

· Discuss Agile Design

· Selected Students Demo their Holiday game

· Review of selected YouTube Videos




Turn In:

  • Report on Blog Traffic and YouTube Video

In Class:

· Quiz

· Discuss what a contract is and how to implement in it your code

· Selected students will demo their Holiday game

· Discuss “Promise” and “Then”

· Discuss Scrum approach to design



Turn In:

· Update your “Hello World” Game to incorporate the Search Charm

· Update your “Hello World” Project to Incorporate Settings Charm

· Expand use of “Promise” and “Then”

In Class:

  • Code Profiling Lab Outcome
  • Quiz

· Discuss Live Tiles and Notifications

· Selected students will demo their “Hello World” Use of Charms and how they implemented their code

· Code Profiling

· UML and Game Design



Turn In:

  • Update to Themed Project to include Live Tiles and Notification
  • Update to “Hello World” Project to demo use of dynamic CSS

In Class:

  • Quiz

· Discuss Snap, Fill and Full Screens in Windows 8

· Selected Students demonstrates Promise and Then

· Designing for the Windows 8 Phone

· Selected Students demonstrate their Holiday Themed Projects



Turn In:

  • Addition of Windows 8 Snap and Fill solution for your Holiday Game
  • Addition of Dynamic CSS to “Hello World” project to handle Snap, Fill and Full

In Class:

  • Results from the WACK test

· Discuss the Submission Process

· Students run WACK test on their Projects

· Students are assisted in determining how to fix their WACK test failures


Get Windows Store account for FREE via DreamSpark


Turn In:

  • Design Portfolio for online evaluation by other students
  • Submit game to Windows Store evaluation
  • Begin Design process for a game based on seasons

In Class:

  • Submit Hello World consuming the WinRT Project

· Review of design process

· WinRT and what it is

· Selected Students will demonstrate their submitting games

In Class Lab:

· Students will consume an existing C# based WinRT project in their Hello World Project



· Introduction to C++

Turn In:

  • Design Portfolio improvements from Online Evaluations
  • Implement Seasonal Game Design

In Class:

  • Submit simple C++ Hello World app

· Demonstration of how to create and write a C++

· Students will explore and implement a simple Module and then consume it in their “Hello World” program



· Creating an online leaderboards 

Turn In:

  • Addition of WinRT to your Seasonal Game

In Class:

  • Quiz

· Discussion of Leaderboards and how to implement them using existing tools

· Selected students will demonstrate their games

· Class Evaluations



  • Blog Analytics
  • Facebook Analytics
  • YouTube Analytics
  • Design Portfolio (online material only)

· All students will play the other student’s games and give feedback

Comments (2)

  1. Good one lee, please add some samples.

  2. Lee Stott says:

    If your using construct2 then you need to check out this plugin – which provides you the ability to integrate better with Windows 8 capabilities when you export your Construct 2 project for Windows 8. This is a tutorial/intro to the plugin.


Skip to main content