Skip to content
Game Programming

Tile Collision

Tile map collision is a fundamental concept in 2D games that helps determine when and where a game entity (such as a player, an enemy, or an object) interacts with the environment, represented by tiles on a grid. In games like platformers (e.g., Super Mario) or top-down games (e.g., Zelda), the world is often made up of a grid of tiles, each representing solid ground, walls, or passable areas.

Tile map collision detection checks whether a moving entity collides with one of these tiles, helping to define what parts of the environment the entity can move through and where its movement is restricted.

Tile Collision

What is a Tile Map?

A tile map is a grid of square-shaped tiles arranged in rows and columns. Each tile can represent a different element of the game world, such as:

  • Solid tiles that block movement (e.g., walls or platforms).
  • Empty or passable tiles that allow movement (e.g., air, water, or pathways).

In most cases, a tile map is represented as a 2D array where each element corresponds to a specific tile. For example, in a game with a map that is 10 tiles wide and 5 tiles high, you would have a 10x5 array of tiles.

Tile map (10 x 5):
0 0 0 0 0 0 1 1 1 1
0 0 0 0 0 0 1 0 0 0
0 0 1 1 1 0 1 0 0 0
1 1 1 0 1 0 1 1 1 0
1 0 0 0 1 1 0 0 0 0


Legend:
0 = Empty tile
1 = Solid tile

1D Array Tile Map Representation

Tile maps can also be represented in a 1D array rather than a 2D array. Using a 1D array simplifies storage and processing in some cases. You can calculate the position of a tile by using the formula:

tileIndex = x + y * mapWidth

Where:

  • x is the horizontal position (column) of the tile.
  • y is the vertical position (row) of the tile.
  • mapWidth is the total number of columns in the tile map.

For example, in a 10x5 tile map, the tile at position (3, 1) would be:

tileIndex = 3 + 1 * 10 = 13

This formula allows you to retrieve a tile from a 1D array representation of the map. Here’s a visual example:

1D array representation of the tile map:
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1,
 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
 0, 0, 1, 1, 1, 0, 1, 0, 0, 0,
 1, 1, 1, 0, 1, 0, 1, 1, 1, 0,
 1, 0, 0, 0, 1, 1, 0, 0, 0, 0]


Getting the tile at (3, 1):
tileIndex = 3 + 1 * 10 = 13
Value at index 13 is 0, so it’s a passable tile.

How Tile Map Collision Works

In tile map collision detection, the player’s position is checked against the tiles in the tile map to determine if the player is colliding with any solid tiles. Typically, the player’s position is represented by their x, y coordinates, and their size is defined by their width and height.

To perform tile map collision detection:

  1. Convert the player’s position into tile coordinates.
  2. Check the tiles at each corner of the player’s bounding box (top-left, top-right, bottom-left, bottom-right).
  3. Determine if any of these tiles are solid.
  4. If a solid tile is detected, adjust the player’s position to prevent them from moving into the tile.

Example of Tile Map Collision in Code

// Map dimensions
const mapWidth = 10;
const mapHeight = 5;


// Tile map (1D array)
const tileMap = [
  0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1,
  0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0,
];


// Get a tile from the 1D array
function getTile(x, y) {
  return tileMap[x + y * mapWidth];
}


// Player position and dimensions
let player = {
  x: 32, // Position in pixels
  y: 64,
  width: 32,
  height: 32,
};


// Convert player's position to tile coordinates
function checkCollision() {
  let tileXLeft = Math.floor(player.x / TILE_SIZE);
  let tileYTop = Math.floor(player.y / TILE_SIZE);
  let tileXRight = Math.floor((player.x + player.width) / TILE_SIZE);
  let tileYBottom = Math.floor((player.y + player.height) / TILE_SIZE);


  // Check if any corner is colliding with a solid tile
  if (
    getTile(tileXLeft, tileYTop) === 1 ||
    getTile(tileXRight, tileYTop) === 1 ||
    getTile(tileXLeft, tileYBottom) === 1 ||
    getTile(tileXRight, tileYBottom) === 1
  ) {
    console.log('Collision detected!');
    // Handle collision (e.g., stop movement or push player out)
  }
}

Tile Map Collision vs. AABB Collision Detection

Axis-Aligned Bounding Box (AABB) collision detection is a general collision detection algorithm used for detecting overlaps between rectangular objects. It works by checking if the bounding boxes of two objects overlap along the x and y axes. This is used when two free-moving objects need to be checked for collision.

  1. Tile Map Collision focuses on detecting whether an entity collides with predefined tiles on a grid. It’s best for games where the world is constructed from a grid of tiles.
  2. AABB Collision Detection checks if two rectangles overlap, making it more suited for detecting collisions between moving objects, such as projectiles and characters.
  3. Tile map collision uses a tile-based grid, while AABB works on arbitrary rectangles.
  4. Performance: Tile map collision is optimized for grid-based games, while AABB can handle any rectangle-to-rectangle collision.

For example, in tile map collision, a player moves within a grid, and collision checks are done only for the surrounding tiles, making it more efficient for games with a fixed world structure. In contrast, AABB would involve checking the player’s bounding box against every other object’s bounding box in the scene.