A Ball-shooting Machine with Physics Engine - HTML5 Game Development - page 283

Visualizing the graphics
So far, we have been using debug draw. In this task, we replace it with our own visualize
method. We are sill 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 ile, we create the following method that ataches 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 {
game.stage.addChild(sprite);
}
body.SetUserData(sprite);
};