Professional HTML5 Mobile Game Development

Creating a Tile Layer

The naive collision detection scheme used so far suffers from one major flaw: The collisions don’t scale as the number of items to collide with grows. If you remember the way collisions have been done to this point in Quintus (except the use of Box2D), it’s been to compare each sprite against every other sprite on the stage.

Although this is fine for stages in which there are a limited number of sprites and potential collisions, for a platformer—where there might be sprawling levels with potentially thousands of tiles in the level for sprites to collide with—this would get quickly out of hand. To get around this, the engine needs to support the idea of a collision layer. Determining which tile a sprite interacts with at any given point is simple, given that tiles don’t move between frames and are located at fixed points.

Because levels can get big, you also need to draw only the pieces of the level visible on the page, so optimizing what’s drawn will be another duty of the tile layer.

Writing the TileLayer Class

To add platformer support to the engine, add in another Quintus module: Quintus.Platformer. This module adds in the Q.TileLayer class with a 2d component and a special stage optimized to work the Q.TileLayer. The initial unoptimized TileLayer is straightforward. Its job is to load the tiles and draw all the tiles on each frame.

Create a new JavaScript file called quintus_platformer.js, and add the code from Listing 18-1.

Listing 18-1: The basic TileLayer ...