How to Create Tile Maps for 2D Games: A Step-by-Step Beginner's Guide

const levelMap = [
  [0, 0, 0, 0],
  [0, 1, 1, 0],
  [0, 2, 2, 0],
  [0, 0, 0, 0]
];

// Rendering logic (simplified)
for (let row = 0; row < levelMap.length; row++) {
  for (let col = 0; col < levelMap[row].length; col++) {
    
    // 1. Get the ID from the grid
    const tileID = levelMap[row][col];
    
    // 2. Find the graphic for that ID
    const graphic = tileset[tileID];
    
    // 3. Draw it at the correct X,Y coordinates
    drawGraphic(graphic, col * TILE_SIZE, row * TILE_SIZE);
  }
}

const TILE_SIZE = 32; // The Master Ruler

function getScreenPosition(row, col) {
  // 1. Calculate X (Horizontal)
  const screenX = col * TILE_SIZE;
  
  // 2. Calculate Y (Vertical)
  const screenY = row * TILE_SIZE;
  
  return { x: screenX, y: screenY };
}

// Example: Drawing the tile at Grid Row 2, Col 5
const pos = getScreenPosition(2, 5);
// Result: x = 160, y = 64
      

// 1 = Floor (Walkable), 0 = Wall (Blocked)
const simpleRoom = [
  [0, 0, 0, 0, 0, 0], // Top Wall
  [0, 1, 1, 1, 1, 0], // Floor Area
  [0, 1, 1, 1, 1, 0], // Floor Area
  [0, 1, 1, 1, 1, 0], // Floor Area
  [0, 0, 0, 0, 0, 0]  // Bottom Wall
];

// This array is your "Skeleton".
// You can test gameplay logic with just these numbers.
      

const TILE_SIZE = 16;
const TILES_PER_ROW = 4;

function getTileSource(id) {
  // 1. Find which row the tile is in (integer division)
  const row = Math.floor(id / TILES_PER_ROW);
  
  // 2. Find which column (modulo operator)
  const col = id % TILES_PER_ROW;
  
  // 3. Calculate pixel coordinates in the image
  const sourceX = col * TILE_SIZE;
  const sourceY = row * TILE_SIZE;
  
  return { x: sourceX, y: sourceY };
}

// Example: ID 5
// Row = 1, Col = 1
// Draw from pixel (16, 16) with size 16x16
      

// 1. The data file (exported from Tiled)
const levelData = [
  [1, 1, 1, 1],
  [1, 0, 0, 1],
  [1, 0, 0, 1],
  [1, 1, 1, 1]
];

// 2. Load it into your game engine
function loadLevel(data) {
  // The engine simply reads the array
  for (let r = 0; r < data.length; r++) {
    for (let c = 0; c < data[r].length; c++) {
      const tileID = data[r][c];
      
      // Place the object at calculated position
      if (tileID === 1) {
        placeWall(c, r);
      } else if (tileID === 0) {
        placeFloor(c, r);
      }
    }
  }
}
      

// 1. Define the rules for each tile ID
const collisionProps = {
  0: { solid: false }, // Floor
  1: { solid: true },  // Wall
  2: { solid: false, hazard: true } // Lava
};

// 2. The Collision Function
function canMoveTo(x, y) {
  // Convert pixels to grid coordinates
  const col = Math.floor(x / TILE_SIZE);
  const row = Math.floor(y / TILE_SIZE);
  
  // Get the ID at that spot
  const tileID = map[row][col];
  
  // Check the properties of that ID
  const props = collisionProps[tileID];
  
  return !props.solid; // Return true if NOT solid
}
      

const camera = { x: 0, y: 0 };

// 1. Center the camera on the player
function updateCamera(player) {
  // Calculate where the top-left of the screen should be
  camera.x = player.x - (screenWidth / 2) + (player.width / 2);
  camera.y = player.y - (screenHeight / 2) + (player.height / 2);

  // 2. Clamp to map bounds (don't show outside world)
  camera.x = Math.max(0, Math.min(camera.x, mapWidth - screenWidth));
  camera.y = Math.max(0, Math.min(camera.y, mapHeight - screenHeight));
}

// 3. Render Loop (Optimized)
function render() {
  // Calculate only the visible grid range
  const startCol = Math.floor(camera.x / TILE_SIZE);
  const endCol = startCol + (screenWidth / TILE_SIZE) + 1;
  
  for (let col = startCol; col < endCol; col++) {
    // ... draw only visible tiles
    const screenX = col * TILE_SIZE - camera.x;
    drawTile(col, screenX);
  }
}
      

const TILE_SIZE = 32;

// ✅ CORRECT: Row is Y (Vertical), Col is X (Horizontal)
function getScreenPos(row, col) {
  const x = col * TILE_SIZE;
  const y = row * TILE_SIZE;
  return { x, y };
}

// ❌ BUGGY: Swapped! Map will look mirrored.
function getScreenPos_Bug(row, col) {
  const x = row * TILE_SIZE; // Wrong!
  const y = col * TILE_SIZE; // Wrong!
  return { x, y };
}
      

// 1. Define the properties for each ID
const tileProperties = {
  0: { type: 'floor', solid: false },
  1: { type: 'wall',   solid: true },
  2: { type: 'water',  solid: false, slow: true } // Logic added here!
};

// 2. Use the properties in your game loop
function updatePlayer(player, tileID) {
  const props = tileProperties[tileID];
  
  if (props.solid) {
    // Stop movement
    player.speed = 0;
  }
  
  if (props.slow) {
    // Apply water physics
    player.speed = player.baseSpeed * 0.5;
  }
}
      

// A map object containing multiple layers
const levelData = {
  "terrain": [
    [0, 0, 0, 0], // Floor everywhere
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ],
  "details": [
    [0, 0, 0, 0],
    [0, 1, 0, 0], // ID 1 = Flower at (1,1)
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ],
  "objects": [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 2, 0], // ID 2 = Chest at (2,2)
    [0, 0, 0, 0]
  ]
};

// Rendering Logic: Draw layers in order
function renderLevel(data) {
  drawLayer(data.terrain);  // 1. Base
  drawLayer(data.details);  // 2. Decor
  drawLayer(data.objects);  // 3. Props
}