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

Visualizing the graphics

So far, we have been using debug draw. In this task, we replace it with our own visualize method. We are still using the canvas, but we make use of CreateJS to manage the display objects.

Prepare for lift off

We want to ensure that the graphics are ready. The following screenshot shows the graphics we have prepared:

Engage thrusters

Let's start visualizing the game with our graphics:

  1. In the view.js file, we create the following method that attaches a sprite graphic to the body:

    game.view.addSpriteToBody = function(body, spriteName, index) {
      var sprite = new lib[spriteName]();
      sprite.x = -99;
      if (index !== undefined) {
        game.stage.addChildAt(sprite, index);
      } else {
  2. Let's move to the physics.js file. On all the bodies, we use the method we just created to attach sprites. The first one is the rectangle shape obstacle:

    if (o.type === 'rect') {
      // existing code goes here.