tileset / tile / tilemap

block

A 2D grid of indexed tiles cropped from a shared spritesheet, authored numerically or via a glyph legend.

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.

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

Symbolic 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.

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

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.

- dopesheet

- image

- diagram