Creating a 2-D Platformer - HTML5 Mobile Game Development - page 353

}
},
debugDraw: function(ctx) {
var p = this.entity.p;
ctx.save();
ctx.fillStyle = "black";
if(p.col) {
_.each(p.col,function(points,dir) {
for(var i=0;i<points.length;i++) {
ctx.fillRect(p.x + points[i][0] - 2,
p.y + points[i][1] - 2,
4,4);
}
});
}
ctx.restore();
}
});
The added method of the component adds on some velocity and acceleration properties and a multiplier to
indicate how strongly the sprite reacts to gravity. It also sets a collision mask that can determine which objects
the sprite should actively collide with. It then binds to the step event to update the sprite on each step. As a
convenience it adds an optional binding to the draw event if a Q.debug property is turned on.
The 2d component adds the collisionPoints method directly onto the sprite to let it set the collision
points as a hash of arrays of points. If no points are passed in, the method creates some default ones that size to
the bounding box of sprite.
The step method uses the familiar equations from the last chapter for updating the position of the sprite
based on the acceleration and velocity. It then calls the collide method of the parent stage, which is respons-
ible for keeping the sprite out of tile objects and sending callbacks whenever it collides with something.
One thing that's different about this step method, though, is that it puts an upper bound of 1/30th of a
second on the dt so that it moves each call and loops over these smaller steps to prevent any sprite from mov-
ing too far. The reason for this is that the collision mechanism relies on sprites not being embedded too far into
objects because that would trigger the wrong collision point—because HTML5 games can still suffer from the
occasional stutter due to garbage collection.
Lastly, the debugDraw method, if turned on in added , draws a small rectangle at the position of each col-
lision point for debugging after each frame.
Calculating Platformer Collisions
The job to calculate collisions with a sprite's collision points falls upon the TileLayer class from the last
section. Its duty is to check each of the sprite's points against potential tile collisions and return the information
about the collision and how to correct.
How it calculates collisions is simple: Divide the position of each point by the size of each tile; look at the
array of tiles to see if a tile is present; and if it is, use the type of the point to figure out which way to push the
sprite to keep it from continuing to collide.