HTML and CSS Reference
Creating a 2-D Platformer
What's in This Chapter?
• Creating a tile layer
• Optimizing tile rendering
• Adding 2-D platformer collision detection
• Building a platformer game
Wrox.com Code Downloads for this Chapter
title.cgi?isbn=9781118301326 on the Download Code tab. The code is in the Chapter 18 download and individu-
ally named according to the names throughout the chapter.
The 2-D platformer will always have a special place in the hearts of developers who grew up in the era of the
Nintendo Entertainment system (and who, like me, can and often do hum the opening 8-bit chords of Super Mario
Brothers in their heads). The 2-D platformer remains a popular genre for mobile games because it has simple
controls that match nicely to an onscreen keypad and is easy to pick up. This chapter builds the basic elements
of a simple 2-D platformer, using the animation tools from Chapter 16, “Getting Animated,” and adding some
platformer-specific tiles and collisions.
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 Quin-
tus (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.