BUILD | GAME DESIGN // 2D PLATFORMERS
can see that the sprite for X is square-ish (in fact, it is two tiles wide), but his hitbox is rectangular (one tile wide). Assuming that there are no slopes and
one-way platforms, the algorithm is reasonably straightforward: 1 - Decompose movement into X and Y
Mega Man X, with slope tile annotations
A detailed view of the {4, 7} tile from the
Mega Man X screen shot above
axes, one step at a time. If you’re planning on implementing slopes afterwards, step X first, then Y. Otherwise, the order shouldn’t matter much. Then, for each axis: 2 - Get the coordinate of the forward- facing edge, e.g: If walking left, the x coordinate of left of bounding box. If walking right, x coordinate of right side. If up, y coordinate of top, etcetera. 3 - Figure which lines of tiles the bounding box intersects with – this will give you a minimum and maximum tile value on the opposite axis. For example, if we’re walking left, perhaps the player intersects with horizontal rows 32, 33 and 34 (that is, tiles with y = 32 * TS, y = 33 * TS, and y = 34 * TS, where TS = tile size). 4 - Scan along those lines of tiles and
towards the direction of movement until you find the closest static obstacle. Then loop through every moving obstacle, and determine which is the closest obstacle that is actually on your path. 5 - The total movement of the player along that direction is then the minimum between the distance to closest obstacle, and the amount that you wanted to move in the first place. 6 - Move player to the new position. With this new position, step the other coordinate, if still not done.
SLOPES
Super Mario World, showing Mario falling through (left) and standing on (right) the same one-way platform
Slopes (the tiles highlighted by green arrows on the Mega Man X image to the left) can be very tricky, because they are obstacles, and yet still allow the character to move into their tile. They also cause movement along the X axis to adjust position on the Y axis. One way to deal with them is to have the tile store the ‘floor y’ of either side. Assuming a coordinate system where (0,
0) is at top-left, then the tile just left of X (first slope tile) is {0, 3} (left, right), then the one he stands on is {4, 7}, then {8, 11}, then {12, 15}. After that, the tiles repeat, with another {0, 3}, etcetera, and then we have a steeper slope, composed of two tiles: {0, 7} and {8, 15}. The system that I’m going to describe
Mega Man 7, with tile boundaries, highlighted ladder tiles, and player ladder hitbox
58 | JULY 2012
allows arbitrary slopes, though for visual reasons, those two slopes are the most common, and result in a total of 12 tiles (the six described previously, and their mirrorings). The collision algorithm changes as follows for horizontal movement: • Make sure that you step X position before Y position. • During collision detection, the slope only counts as a collision if its closest edge is the taller (smaller y coordinate) one. This will prevent characters from ‘popping’ through the slope from the opposite side. • You might want to forbid slopes to stop ‘halfway through’ (e.g. on a {4, 7} tile). This restriction is adopted by Mega Man X and
many other games. If you don’t, you have to deal with the more complicated case of the player attempting to climb from the lower side of the slope tile. One way to deal with this is to pre-process the level, and flag all such offending tiles. Then, on collision detection, also count it as a collision from the lower side if the player’s lowest y coordinate is greater (that is, below) the tile’s offset edge (tile coord * tile size + floor y). • A full obstacle tile adjacent to the slope the character is currently on should not be considered for collision if it connects to the slope, that is, if the character (that is, his bottom-centre pixel) is on a {0, *} slope, ignore left tile, and, if on a {*, 0} slope, ignore the right tile. You may have to do this for more tiles if your character is wider than two tiles – and you might simply skip checking on the entire row if the player is moving towards the upper side of the slope. The reason for this is to prevent the character from getting stuck at those tiles (highlighted yellow top-left) while still climbing the slope, as his foot will still be below the ‘surface level’ by the time he comes into contact with the otherwise solid tile.
And for vertical movement:
• If you’re letting gravity do its job for downhill movement, make sure that the minimum gravity displacement is compatible with slope and horizontal velocity. For example, on a 4:1 slope (as {4, 7} above), the gravity displacement must be at least 1/4 of the horizontal velocity, rounded up. On a 2:1 slope (such as {0, 7}), at least 1/2. If you don’t ensure this, the player will move horizontally right off the ramp for a while, until gravity catches up and drags him down, making him bounce on the ramp, instead of smoothly descending it. • An alternative to using gravity is to compute how many pixels above the floor the player was before movement, and how many it is afterwards (using the formula below), and adjust his position so they’re the same. When moving down, instead of
considering a slope tile’s top edge as its collision boundary, instead, compute its floor coordinate at the current vertical line, and use that. To do that, find the [0, 1] value which represents the player’s x position on tile (0 = left, 1 = right) and use it to linearly interpolate the floor Y values. The code will look something like:
float t = float(centerX - tileX) / tileSize;
float floorY = (1-t) * leftFloorY + t * rightFloorY
• When moving down, if multiple tiles on the same Y coordinate are obstacle candidates, and the one on the X coordinate of the player’s centre is a slope tile, use that one, and ignore the rest – even though the others are technically closer. This ensures proper behaviour around the edges of slopes, with the character actually ‘sinking’ on a completely solid tile because of the adjacent slope.
Page 1 |
Page 2 |
Page 3 |
Page 4 |
Page 5 |
Page 6 |
Page 7 |
Page 8 |
Page 9 |
Page 10 |
Page 11 |
Page 12 |
Page 13 |
Page 14 |
Page 15 |
Page 16 |
Page 17 |
Page 18 |
Page 19 |
Page 20 |
Page 21 |
Page 22 |
Page 23 |
Page 24 |
Page 25 |
Page 26 |
Page 27 |
Page 28 |
Page 29 |
Page 30 |
Page 31 |
Page 32 |
Page 33 |
Page 34 |
Page 35 |
Page 36 |
Page 37 |
Page 38 |
Page 39 |
Page 40 |
Page 41 |
Page 42 |
Page 43 |
Page 44 |
Page 45 |
Page 46 |
Page 47 |
Page 48 |
Page 49 |
Page 50 |
Page 51 |
Page 52 |
Page 53 |
Page 54 |
Page 55 |
Page 56 |
Page 57 |
Page 58 |
Page 59 |
Page 60 |
Page 61 |
Page 62 |
Page 63 |
Page 64 |
Page 65 |
Page 66 |
Page 67 |
Page 68 |
Page 69 |
Page 70 |
Page 71 |
Page 72 |
Page 73 |
Page 74 |
Page 75 |
Page 76 |
Page 77 |
Page 78 |
Page 79 |
Page 80 |
Page 81 |
Page 82 |
Page 83 |
Page 84