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