O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Prepare for lift off

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required