Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Loading the bitmap graphics into the game

In this task, we show the bitmap graphics by loading them into the game.

Prepare for lift off

In this task, we add the colored bitmaps and load them onto the game. These bitmaps are colored and exported from Adobe Flash.

So, make sure we have the PreloadJS file ready in the vendors folder and in the index.html file:

<script src="vendors/preloadjs-0.4.1.min.js"></script>

Engage thrusters

Let's follow the given steps to load the graphics into the game:

  1. In the game.js file, we define the load method:

    game.load = function() {
      // load bitmap assets before starting the game
      var loader = new createjs.LoadQueue(false);
      loader.addEventListener("fileload", function(e){
        if (e.item.type === "image") { images[] = e.result; }  // assign to images object for assets.js to use
      loader.addEventListener("complete", game.start);
  2. We originally have the game.start() function calling in the...