tilemaps

A tilemap draws a 2D grid of indexed tiles cropped from a shared spritesheet. A tileset names that spritesheet plus its slice geometry and hangs off the document root (like iconset); tile index N maps to sheet column N % columns, row N / columns. The tilemap is a diagram shape, so anything drawn after it overlays on top.

A symbolic level map painted from Kenney's CC0 "Platformer Pack", with a label overlaid on top:

diagram {
  width = 280
  height = 230
  tilemap {
    set = "platformer"
    scale = 0.5
    tile "#" {
      index = 25
    }  # brown crate — ground
    tile "~" {
      index = 1
    }  # water surface
    tile "=" {
      index = 6
    }  # deep water
    tile "T" {
      index = 16
    }  # torch
    tile "G" {
      index = 28
    }  # grass tuft
    map = ["........", "........", ".T.G....", "########", "~~~~~~~~", "========"]
  }
  label "Level 1" {
    x = 128.0
    y = 146.0
    font_size = 16.0
    fill = "#003a8c"
  }
}

§ 1Declaring a tileset

A root-level declaration that names a spritesheet and its slice geometry (tile_width / tile_height / columns); tile index N maps to sheet column N % columns, row N / columns.

tileset platformer {
  source      = "assets/kenney-platformer.png"
  tile_width  = 64
  tile_height = 64
  columns     = 5
}

The set's tiles, by index — a single numeric tiles row doubles as a palette of what the sheet can paint:

diagram {
  width = 320
  height = 44
  tilemap {
    set = "platformer"
    scale = 0.6
    tiles = [[25, 9, 1, 6, 16, 28, 27, 37]]
  }
}

§ 2Symbolic and numeric maps

For map-like authoring, declare a glyph legend with tile children and supply map — a list of utf8 rows; each character resolves through the legend to a tile index (an unmapped glyph draws nothing). Or write raw index rows with tiles (one inner list per row); -1, the default empty index, leaves a cell blank.

The numeric form — raw index rows, -1 for a blank cell:

diagram {
  width = 180
  height = 120
  tilemap {
    set = "platformer"
    scale = 0.5
    tiles = [[16, -1, 28], [25, 25, 25], [1, 1, 1]]
  }
}

A placeable diagram shape that paints a grid of indexed tiles from a tileset, authored either symbolically via map (utf8 rows through a glyph legend) or numerically via tiles (raw index rows).

Child blocks

A tile child of a tilemap that binds one legend glyph to a tile index.

scale sizes the display; image-rendering: pixelated is the default, and smooth = true opts into the browser's smoothing. The sheet is copied to _wdoc/, so tiles resolve when served.