Tiles

• Why Tiles?

  March 8, 2026

  Games like Super Mario Bros, The Legend of Zelda, and Stardew Valley build their worlds from tiles — small, reusable images arranged on a grid. The technique has been around since the early arcade era, and it’s still standard practice because it solves a real problem efficiently.

  So if you want to put a nice background into your game, but the picture would be too large and make the game very slow. What to do? Slice the picture into tiles!

• Map Format

  March 8, 2026

  Maps in tile-based games are stored as 2D arrays — grids of numbers where each value identifies a tile type. The position of each number in the array corresponds directly to its position in the world.

  2D arrays

  A 2D array is an array whose elements are themselves arrays. Each inner array is a row, and the outer array holds all the rows. Starting simple:

  A basic array might store your player’s inventory:

• More Maps

  March 8, 2026

  2D arrays work well for most tile-based games, but the format has trade-offs. Different game structures call for different storage strategies — this section covers the main options and when each makes sense.

  Frame-based mapping

  Each number in the array directly represents a sprite frame or tile type. No separate type definitions required — the number is the tile identity.

  // Each number = a different tile graphic
  const levelMap = [
    [5, 5, 5, 5, 5],  // Stone walls  
    [5, 1, 2, 3, 5],  // Floor, grass, water, sand
    [5, 5, 5, 5, 5]   // Stone walls
  ];
  
  // Define tile ranges for collision
  const TileRanges = {
    walkable: [1, 2, 3],      // Frames 1-3 are walkable
    walls: [5],               // Frame 5 blocks movement
    water: [2],               // Frame 2 is water (maybe slows player?)
    damage: [10, 11, 12]      // Frames 10-12 hurt the player
  };
  

  Good for: Retro platformers, puzzle games, simple RPGs
  Trade-off: Fast to implement and reason about; harder to attach complex behaviour to individual tile types later.

• Rendering a Map

  March 9, 2026

  Rendering converts a 2D array into a visual grid. For each value in the map, draw a coloured rectangle at the corresponding pixel position.

  Array:           Visual result:
  [1, 1, 1, 1] →  🧱🧱🧱🧱
  [1, 0, 0, 1] →  🧱  🌟🌟🧱  
  [1, 1, 1, 1] →  🧱🧱🧱🧱
  
  Each 1 becomes a solid wall, each 0 becomes walkable space.
  

  Loading editor…

  Map data and tile definitions

  The map and tile type definitions from the previous tutorial, ready to use:

• The Hero

  March 9, 2026

  The hero is a data object that stores position, size, and a reference to its sprite. Separating data from visuals keeps the game logic independent of how things are drawn.

  Loading editor…

  The hero object

  The hero stores two coordinate systems alongside its sprite reference: