HTML5 Game Development for Windows 8 #1: Getting started

Hi and welcome to the first part of the HTML5 Game Development for Windows 8 tutorial series.

Note: This was written on the plane to Las Vegas in a tired condition. Will fix typos at a later stage.

This tutorial will cover how you can get started by creating a working game, and requires that you have Windows 8 installed, with Visual Studio 2012.

Also, to aid the development, we will use a library called CreateJS. This is a very powerfull library that helps you with common tasks that’s needed when creating rich interactive apps like games.

Let’s get started!

Start Visual Studio 2012 and click File->New->Project, and create a new blank Windows Store JavaScript app:

Give it a name and click OK to generate a new project based on the Blank template.

The project now contains a lot of different files in a project tree. The first folder is css, containing the apps css stylesheet. It’s quite empty, consisting only of an empty body tag and elements for handling the different layout-modes the app can have.

The next folder is the images. It contains the default tile-graphics for the app (change these to modify how the app tile looks like).

We will use this folder to include more images when we create the game.

Next we have the js folder. This includes the JavaScript files we want to use in the app.

By default this contains one file called “default.js”, it contains the basic startup code-behind for the app.

Last we have the default.html file that contains the markup for the app. Change this to add more content and controlls.

First of all, we want to include the CreateJS library files. In this project, we only need two libraries: PreloadJS and EaselJS. Download these from CreateJS.org.

While these download, create a subfolder in “js” called CreateJS:

Unzip the two newly downloaded CreateJS libraries. In the filestructure of each library you will find a lib folder containing a js:

lib/easeljs-0.5.0.min.js
lib/preloadjs-0.2.0.min.js

Copy these two files into the CreateJS folder. Now back in Visual Studio, click on the “Show All Files” icon:

Now you can see the entire filesctructure, including the two library files you copied earlier. Rightclick on these and include them in the project:

Next, we will need to include these two libraries in the default.html file. Open this and you will see the following default code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App3</title>
  
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></script>   1:  
    <script src="//Microsoft.WinJS.1.0/js/ui.js">
</script>
  
    <!-- App3 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Click and drag the new library files into the <!—AppName references –> section in default.html (or you can type it in yourself):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App3</title>
  
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></script>   1:  
    <script src="//Microsoft.WinJS.1.0/js/ui.js">
</script>
  
    <!-- App3 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js">
</script>
    <script src="js/CreateJS/easeljs-0.5.0.min.js">
</script>
    <script src="js/CreateJS/preloadjs-0.2.0.min.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Now, the libraries are included and ready to ait your quest for game programming! Smilefjes

PreloadJS is a library that will help us load content like images that will be used in the app.

Making the game “Escape!”

Escape is a very simple game where you control a guy trapped in a ghost house. The objective is simple. Stay alive as long as possible! You must control the guy so he doesnt crash into the ghosts. You get points as long as you are awake!

So creating a game requires you to have some graphics. You can download a .zip file containing what you need for this tutorial here.

It contains the images our game will use.

First of all, we need the apps main screen:

The next thing we need is a floor. The game is using a top-down view:

Then we need the player:

And the ghosts that will chase you:

And thats it for the graphics! Under the images folder in the project tree, add a new folder called “GFX”:

And in the same way as we did earlier, copy the imagefiles in to the GFX folder and include them in the project.

Creating the game loop
The game loop in games is quite different that what you normally have in a game project. We will need to create a function that will initialize the app, then a function that will load the content and prepare everything, and then lastly enter a loop that renders and updates frames every second.

The default.js file will contain the game loop. Initially the default.js code will look like this:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
  
    WinJS.Binding.optimizeBindingReferences = true;
  
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
  
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
  
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
  
    app.start();
})();

Let’s start by adding the nessesary functions required by the game loop. I will follow the structure that I’m used to from programming directx and XNA.

Add the following lines into the default.js file, just above the app.oncheckpoint = function (args) { line of code.

function initialize() {
}
  
function loadContent() {
}
  
function gameLoop() {
}
  
function update() {
}
  
function draw() {
}

The entire default.js file now looks like this:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
  
    WinJS.Binding.optimizeBindingReferences = true;
  
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
  
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
  
    function initialize() {
    }
  
    function loadContent() {
    }
  
    function gameLoop() {
    }
  
    function update() {
    }
  
    function draw() {
    }
  
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
  
    app.start();
})();

Now, after initialize is done doing his work, loadContent should start. Once all the content is loaded, we will start the game loop. The gameLoop() will first call the update function, and then call the draw() function. update() will contain the game logic, and draw will handle the drawing.

Update the gameLoop() function to call update() and draw():

function gameLoop() {
    update();
    draw();
}

The last thing we need to do here before creating a drawable canvas is to make sure that our game loop starts once the OS has booted up our app and got the system ready to run it. We do this by using the DOMContentLoaded event. Once the app is ready, it will call the initialize function.

document.addEventListener(“DOMContentLoaded”, initialize, false);

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
};
  
document.addEventListener("DOMContentLoaded", initialize, false);
  
app.start();

Creating a drawable surface using the Canvas

Before we can do any drawing, we must add a canvas that we will use to draw on. The canvas will fill the entire screen width and height, making this into a fullscreen app.

Open “default.js” and replace the line <p>Content goes here</p> in the <body> tag with <canvas id=”gameCanvas”></canvas>:

<body>
    <canvas id="gameCanvas"></canvas>
</body>

This gives us a canvas with the id gameCanvas. We can use gameCanvas to reference to this canvas from default.js. But how do we draw to it?

Move back to the default.js file and add a few global variables, put these somewhere in the top of the file like below the line var activation = Windows.ApplicationModel.Activation; :

   1: var canvas, context;

Next we need to create a reference to the canvas element gameCanvas and grab the context to it.

This is done in the initialize() function. Make it look like this:

function initialize() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");
}

This gets the element gameCanvas, sets the resolution to fill the entire screen and gets the 2d context of it.

Next, we need a stage for our game. A stage is class that comes with CreateJS and helps you create “your world”. It needs a reference to the canvas it will draw to and is used to add items like images and soundeffects to your game.

Add a new variable called gameStage as a global variable:

   1: var canvas, context;
   2: var gameStage;

Below the code that gets the canvas and context, we will create the stage object:

function initialize() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");
  
    gameStage = new createjs.Stage(canvas);
}

Loading images

Now that we got a canvas and a stage to draw to, we can start loading images and drawing them in the canvas.

Once the initialize() function is done, it must call loadContent. This function will use PreloadJS to load images, and create objects that you can insert on your gameStage.

Make initialize() call the loadContent() function:

function initialize() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");
  
    gameStage = new createjs.Stage(canvas);
  
    loadContent();
}

Before we can load anything, we need to create a new global variable called “preload”.

var canvas, context;
var gameStage;
var preload;

In loadContent(), we create an instance of the PreloadJS class:

function loadContent() {
    preload = new createjs.PreloadJS();
}

The PreloadJS library works this way. It will need a function that it will call once all the content has been loaded. It will also need a manifest array that contains all the filenames it will load.

function loadContent() {
    preload = new createjs.PreloadJS();
    preload.onComplete = prepareStage;
  
    var manifest = [
        { id: "logoScreen", src: "images/GFX/LogoScreen.png" },
        { id: "floor", src: "images/GFX/floor.png" },
        { id: "ghost", src: "images/GFX/Ghost.png" },
        { id: "playerIdle", src: "images/GFX/PlayerIdle.png" }
    ];
  
    preload.loadManifest(manifest);
}

Once the manifest has been loaded, a function called prepareStage will be called. In this function I will simply use the preload object to get images and create instances of them.

Once the stage is ready, we can start the gameLoop() function.

To add images to the stage, we must create a few more global variables:

var canvas, context;
var gameStage;
var preload;
  
var logoScreenImage, logoScreenBitmap;

The logoScreenImage will containg the file, and the logoScreenBitmap will contain the image the file contained. Create we create a new function called prepareStage. To load an image and insert it into the canvas, we use the preload instance and grab what we want from it:

function prepareStage() {
    logoScreenImage = preload.getResult("logoScreen").result;
    logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
    gameStage.addChild(logoScreenBitmap);
}

Now, the stage contains one image and it’s default located at the position 0,0 (top-left corner of the screen. When you render an image, the top-left corner of the image is rendered at the given coordinate, not the center of the image.

The final part of our rendering engine is to make sure that the gameLoop function ticks at a framerate that good enough for a game.

To do this, we can use the Ticker-class from CreateJS. It will help us with the timing of our game.

function prepareStage() {
    logoScreenImage = preload.getResult("logoScreen").result;
    logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
    gameStage.addChild(logoScreenBitmap);
  
    createjs.Ticker.setInterval(window.requestAnimationFrame);
    createjs.Ticker.addListener(gameLoop);
}

This creates a new interval. At each tick of this interval, the gameLoop function is called. the windows.requestAnimationFrame makes sure that we only draw the frames that we need to draw.

Now, the final thing we need to do to render our stage is to update our draw() function so it updates the stage:

function draw() {
    gameStage.update();
}

And thats it!

Now you got a working game engine template. You should save this away as a different project, so you wont need to do this entire thing again when you create a new game. Smilefjes

If you compile and run your app, you will first see the splashscreen and then the main screen image rendered accross the entire screen (but it will not scale to all resolutions yet. More on this in the next tutorial).

Listing 1 – the entire default.js file containing the engine that makes our game go around and around:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
  
    WinJS.Binding.optimizeBindingReferences = true;
  
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
  
    var canvas, context;
    var gameStage;
    var preload;
  
    var logoScreenImage, logoScreenBitmap;
  
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
  
    function initialize() {
        canvas = document.getElementById("gameCanvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
  
        gameStage = new createjs.Stage(canvas);
  
        loadContent();
    }
  
    function loadContent() {
        preload = new createjs.PreloadJS();
        preload.onComplete = prepareStage;
  
        var manifest = [
            { id: "logoScreen", src: "images/GFX/LogoScreen.png" },
            { id: "floor", src: "images/GFX/floor.png" },
            { id: "ghost", src: "images/GFX/Ghost.png" },
            { id: "playerIdle", src: "images/GFX/PlayerIdle.png" }
        ];
  
        preload.loadManifest(manifest);
    }
  
    function prepareStage() {
        logoScreenImage = preload.getResult("logoScreen").result;
        logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
        gameStage.addChild(logoScreenBitmap);
  
        createjs.Ticker.setInterval(window.requestAnimationFrame);
        createjs.Ticker.addListener(gameLoop);
    }
  
    function gameLoop() {
        update();
        draw();
    }
  
    function update() {
    }
  
    function draw() {
        gameStage.update();
    }
  
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
  
    document.addEventListener("DOMContentLoaded", initialize, false);
  
    app.start();
})();

In the next tutorial, we will start on the logic of the game. This means implementing the game itself, input and handling of the player and enemies.

Download the source of the game here:
http://sdrv.ms/T2KTFg

12 Responses to HTML5 Game Development for Windows 8 #1: Getting started

Pingback: HTML5 Game Starter Kit for Windows 8 | digitalerr0r
Richard Bown says:

November 9, 2012 at 9:25 am

Hi there, nice blog – I’ll be following you! I’m doing the WOWZAPP thing today and noticed a typo. In section “Creating a drawable surface using the Canvas” you want to reference default.html rather than default.js in the first section.

Pingback: Windows 8 Games with CreateJS Tutorials & Resources « skater coder
BeaconEternal says:

December 16, 2012 at 1:44 am

If you got error:
Stage undefined, Bitmap undefined.
do this

replace Stage – > createjs.Stage
replace Bitmap -> createjs.Bitmap

and so on.
if Text undefined / can’t .. object?

replace Text -> createjs.Text

scramble says:

March 18, 2013 at 7:36 am

whoah this blog is wonderful i really like studying your articles.
Stay up the great work! You know, lots of people are
looking round for this info, you could aid them greatly.

Pingback: Game Starterkit for Windows 8 with leaderboard in Windows Azure | digitalerr0r
work at home moms money says:

April 7, 2013 at 7:34 am

Magnificent site. Plenty of helpful info here. I am sending it to several buddies ans additionally sharing in delicious.
And naturally, thank you to your effort!

Pingback: You can lead a dev to... "Game Starter Kit for Windows 8 with leaderboard in Windows Azure" - Windows Azure Blog
bypass sharecash surveys says:

May 12, 2013 at 2:33 am

It’s amazing in favor of me to have a web page, which is helpful designed for my know-how. thanks admin

Path of Exile Act 1 Powerleveling says:

July 31, 2013 at 3:53 pm

Howdy just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Firefox.
I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know.
The style and design look great though! Hope you get the issue resolved soon.
Kudos

abhinav says:

December 19, 2013 at 8:31 am

i am getting error
like following.. please help

Pingback: HTML5 Game Starter Kit for Windows 8 – HTML5 Game Development