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.
We want to ensure that the graphics are ready. The following screenshot shows the graphics we have prepared:
Let's start visualizing the game with our graphics:
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 { game.stage.addChild(sprite); } body.SetUserData(sprite); };
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. game.view.addSpriteToBody...