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
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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.item.id] = e.result; }  // assign to images object for assets.js to use
      });
      loader.addEventListener("complete", game.start);
      loader.loadManifest(lib.properties.manifest);
    }
  2. We originally have the game.start() function calling in the...