HTML5 Game Development for Windows 8 #2: Adding a player

Hi, and welcome back to the HTML5 game programming tutorial series. In this tutorial we will continue on the previous tutorial, so if you havent done so yet, now is the time! 🙂

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

Last time, we got the main menu up and running. Now we are going to make the main menu screen wait for a touch input, and when that happens, it will start the game and a player is rendered.

The first thing we need is a boolean that tells if we are going to show the main menu or not.

Define the newGame global variable:

var canvas, context;
var gameStage;
var preload;
  
var logoScreenImage, logoScreenBitmap;
  
var newGame = true;

The newGame variable will be used to let our stage know what elements it should display. When we are in the main menu, we hide the game elements and only show the main menu screen.

This will be handled in the update() function (remeber, this is where the game logic is handled). You can use the visible-property of the Bitmap you want to control to make it visible or invisible:

function update() {
    if (newGame) {
        logoScreenBitmap.visible = true;
    }
    else {
        logoScreenBitmap.visible = false;
    }
}

New, the last thing we need in order to acctually change the scene is to wait for the user to touch the screen so the game can start:

In the initialize() function, after the context = canvas.getContext(“2d”); line of code, add the following line:

   1: canvas.addEventListener("MSPointerUp", pointerUp, false);

This function creates an event listener that will trigger when the user lifts up his finger (or release the mouse pointer). When this triggers, the function pointerUp is executed.

Let’s take a look at the pointerUp function:

function pointerUp(event) {
    if (newGame) {
        newGame = false;
    }
    else {
    }
}

This function sets the newGame boolean to false when it triggers a new release of the funger/mouse pointer.

Now it’s time to add the player character and the ghost house floor. To do this, we need a few global variables and a class that contains the player logic.

Add the following global variables:

var player;
  
var floorImage, floorBitmap;
var playerIdleImage, playerIdleBitmap;

We also need a variable that will help us keep track of scaling. When the game is deployed to various devices, it’s important that we scale the playfield to make sure it works on all devices.

All the games GFX is made with the 1366 x 768 resolution as the basis. If the resolution changes, we also want to make sure to scale everything. To do this we create two variables :

   1: var scaleW = window.innerWidth / 1366;
   2: var scaleH = window.innerHeight / 768;

Now, let’s make sure that the main menu screen scales.

Add the lines with the scale properties to your loadContent() function, where you define and load the mainMenuBitmap:

   1: logoScreenBitmap.scaleX = scaleW;
   2: logoScreenBitmap.scaleY = scaleH;

Also, load the floor texture and the playerIdle texture:

logoScreenImage = preload.getResult("logoScreen").result;
logoScreenBitmap = new createjs.Bitmap(logoScreenImage);
logoScreenBitmap.scaleX = scaleW;
logoScreenBitmap.scaleY = scaleH;
gameStage.addChild(logoScreenBitmap);
  
floorImage = preload.getResult("floor").result;
floorBitmap = new createjs.Bitmap(floorImage);
floorBitmap.visible = false;
floorBitmap.scaleX = scaleW;
floorBitmap.scaleY = scaleH;
gameStage.addChild(floorBitmap);
  
playerIdleImage = preload.getResult("playerIdle").result;
playerIdleBitmap = new createjs.Bitmap(playerIdleImage);
playerIdleBitmap.visible = false;
playerIdleBitmap.scaleX = scaleW;
playerIdleBitmap.scaleY = scaleH;
gameStage.addChild(playerIdleBitmap);

We load the needed graphics, and also set the visibility properties to invisible, making sure we don’t draw them on the main menu.

Also, update the update() function so it hides/shows player and floor:

function update() {
    if (newGame) {
        logoScreenBitmap.visible = true;
        playerIdleBitmap.visible = false;
        floorBitmap.visible = false;
    }
    else {
        logoScreenBitmap.visible = false;
        playerIdleBitmap.visible = true;
        floorBitmap.visible = true;
    }
}

If you run the game now, you will see the main screen showing. Tapping this will make the main screen go away and you will get in to the playfield.

The player needs a position where it will be rendered, and a target to where he is heading. Also, we need to keep track of the bitmap size in order to calculate collision detection later:

// The player class
function Player() {
    this.positionX = window.innerWidth / 2;
    this.positionY = window.innerHeight / 2;
  
    this.targetX = this.positionX;
    this.targetY = this.positionY;
  
    this.width = playerIdleBitmap.image.width * scaleW;
    this.height = playerIdleBitmap.image.height * scaleH;
}

Let’s make sure we can move our guy. We want to make him move to the last location the user eiter touched or moved the finger (mousepointer).

In the prepareStage function we create a new instance of the player, add this line above the Ticker.setInterval line of code:
player = new Player();

To make the player move you could either create a function in the player class that moves it based on his target, or put the logic in the update function. I will do both, the player class will get updated directly in the update() function, and the ghosts will be moved with a function on the ghost class level.

At every frame, we check if we should move our guy. It his position is different than the target, move it towards the target. One way to do this is to use a vector, or by directly checking the X and Y values of the position. I will do the latter:

function update() {
    if (newGame) {
        logoScreenBitmap.visible = true;
        playerIdleBitmap.visible = false;
        floorBitmap.visible = false;
    }
    else {
        logoScreenBitmap.visible = false;
        playerIdleBitmap.visible = true;
        floorBitmap.visible = true;
  
        if (player.targetX > player.positionX) {
            player.positionX += 3;
        }
        if (player.targetX < player.positionX) {
            player.positionX -= 3;
        }
        if (player.targetY > player.positionY) {
            player.positionY += 3;
        }
        if (player.targetY < player.positionY) {
            player.positionY -= 3;
        }
    }
}

Now, we add a few more event listeners that will make our character move:

function initialize() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");
  
    canvas.addEventListener("MSPointerUp", pointerUp, false);
    canvas.addEventListener("MSPointerMove", pointerMove, false);
    canvas.addEventListener("MSPointerDown", pointerDown, false);
  
    gameStage = new createjs.Stage(canvas);
  
    loadContent();
}

Let’s start by updating the pointerUp function. We need it to take in a parameter that will contain the touch position, and set the players target to this:

function pointerUp(event) {
    if (newGame) {
        newGame = false;
    }
    else {
        player.targetX = event.x;
        player.targetY = event.y;
    }
}

Also, lets add the two others as well:

function pointerDown(event) {
    if (newGame) {
    }
    else {
        player.targetX = event.x;
        player.targetY = event.y;
    }
}
  
function pointerMove(event) {
    if (newGame) {
    }
    else {
        player.targetX = event.x;
        player.targetY = event.y;
    }
}

The last thing we need to do is to update the player image to be rendered at the player positon. Add the following lines in the update function, below the code that makes the player move:

   1: playerIdleBitmap.x = player.positionX - (player.width / 2);
   2: playerIdleBitmap.y = player.positionY - (player.height / 2);

We want the center of the guy to move towards the location of the finger, not the top-left. thats why we subtract half of the height and width of the character.

The update() function should look like this:

function update() {
    if (newGame) {
        logoScreenBitmap.visible = true;
        playerIdleBitmap.visible = false;
        floorBitmap.visible = false;
    }
    else {
        logoScreenBitmap.visible = false;
        playerIdleBitmap.visible = true;
        floorBitmap.visible = true;
  
        if (player.targetX > player.positionX) {
            player.positionX += 3;
        }
        if (player.targetX < player.positionX) {
            player.positionX -= 3;
        }
        if (player.targetY > player.positionY) {
            player.positionY += 3;
        }
        if (player.targetY < player.positionY) {
            player.positionY -= 3;
        }
  
        playerIdleBitmap.x = player.positionX - (player.width / 2);
        playerIdleBitmap.y = player.positionY - (player.height / 2);
    }
}

If you run the app now, you should be able to move the guy!

Below is the entire source for this game:

// 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;
    var floorImage, floorBitmap;
    var playerIdleImage, playerIdleBitmap;
  
    var newGame = true;
  
    var player;
  
    var scaleW = window.innerWidth / 1366;
    var scaleH = window.innerHeight / 768;
  
  
    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());
        }
    };
  
    // The player class
    function Player() {
        this.positionX = window.innerWidth / 2;
        this.positionY = window.innerHeight / 2;
  
        this.targetX = this.positionX;
        this.targetY = this.positionY;
  
        this.width = playerIdleBitmap.image.width * scaleW;
        this.height = playerIdleBitmap.image.height * scaleH;
    }
  
  
    function pointerUp(event) {
        if (newGame) {
            newGame = false;
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerDown(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function pointerMove(event) {
        if (newGame) {
        }
        else {
            player.targetX = event.x;
            player.targetY = event.y;
        }
    }
  
    function initialize() {
        canvas = document.getElementById("gameCanvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
  
        canvas.addEventListener("MSPointerUp", pointerUp, false);
        canvas.addEventListener("MSPointerMove", pointerMove, false);
        canvas.addEventListener("MSPointerDown", pointerDown, false);
  
        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);
        logoScreenBitmap.scaleX = scaleW;
        logoScreenBitmap.scaleY = scaleH;
        gameStage.addChild(logoScreenBitmap);
  
        floorImage = preload.getResult("floor").result;
        floorBitmap = new createjs.Bitmap(floorImage);
        floorBitmap.visible = false;
        floorBitmap.scaleX = scaleW;
        floorBitmap.scaleY = scaleH;
        gameStage.addChild(floorBitmap);
  
        playerIdleImage = preload.getResult("playerIdle").result;
        playerIdleBitmap = new createjs.Bitmap(playerIdleImage);
        playerIdleBitmap.visible = false;
        playerIdleBitmap.scaleX = scaleW;
        playerIdleBitmap.scaleY = scaleH;
        gameStage.addChild(playerIdleBitmap);
  
        player = new Player();
  
        createjs.Ticker.setInterval(window.requestAnimationFrame);
        createjs.Ticker.addListener(gameLoop);
    }
  
    function gameLoop() {
        update();
        draw();
    }
  
    function update() {
        if (newGame) {
            logoScreenBitmap.visible = true;
            playerIdleBitmap.visible = false;
            floorBitmap.visible = false;
        }
        else {
            logoScreenBitmap.visible = false;
            playerIdleBitmap.visible = true;
            floorBitmap.visible = true;
  
            if (player.targetX > player.positionX) {
                player.positionX += 3;
            }
            if (player.targetX < player.positionX) {
                player.positionX -= 3;
            }
            if (player.targetY > player.positionY) {
                player.positionY += 3;
            }
            if (player.targetY < player.positionY) {
                player.positionY -= 3;
            }
  
            playerIdleBitmap.x = player.positionX - (player.width / 2);
            playerIdleBitmap.y = player.positionY - (player.height / 2);
        }
    }
  
    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 finish the game. This includes handling all the ghosts and keeping track of the score, and a game over function.

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

5 Responses to HTML5 Game Development for Windows 8 #2: Adding a player

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

November 11, 2012 at 3:40 pm

Thanks!

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

February 22, 2013 at 12:35 pm

Bonjour.
Ces lignes de code sont parfaites et le jeu fonctionne très bien.
Bravo à l’auteur.
Avez-vous d’autres sources concernant des jeux dans le même style sur Windows 8 en HTML5?
Je vous remercie beaucoup et encore bravo

Cordialement.

Pingback: Game Starterkit for Windows 8 with leaderboard in Windows Azure | digitalerr0r