mwg API
    Preparing search index...

    Class TileMap

    A grid of tiles, drawn as sprites.

    Layers stack in the order they are added: a floor, then whatever stands on it, then a roof. Every layer shares one grid, so a cell's lighting applies to all of them at once, which is what fog of war needs, since an unseen floor and the wall on it have to dim together.

    The map is chunked and culled against the camera, so its cost tracks what is on screen rather than how large the map is.

    Cells can also carry an elevation (setCellHeight): the top tile moves up by one heightStep per level, and on the diamond projections (isometric, staggered) each level grows two shaded side faces, the classic raised-block look. tileCenter rides along, so whoever stands on the cell stands on top of it.

    import { TileMap, EMPTY, SpriteSheet, createCamera } from '@datamoc/mw_games/two-d/render';

    const sheet = SpriteSheet.grid('tiles/ground.png', 16);

    const map = new TileMap({ width: 20, height: 20, sheet });
    map.addLayer('ground', new Array(400).fill(0)); // frame 0 everywhere
    map.addLayer('objects'); // an empty layer, filled in with setTile later

    map.setTile('objects', 3, 3, 5);
    console.log(map.getTile('objects', 3, 3)); // 5
    console.log(map.getTile('objects', 0, 0)); // EMPTY - never set

    map.setCellColor(3, 3, 0x888888); // half-lit, remembered-but-not-visible fog of war

    const camera = createCamera();
    map.cull(camera); // once per frame, switches off chunks the camera cannot see

    TileMap is a Container of layer Containers of TintedSprite tiles, not a sprite itself: setting map.alpha still fades the whole map, since Pixi composes a container's alpha into every descendant's when rendering. There is no per-cell alpha alongside setCellColor's tint/add - a see-through tile (as opposed to a translucent creature standing on one, which is TintedSprite's own case) is not something any reference game has asked for yet.

    Hierarchy

    • Container
      • TileMap
    Index
    constructor
    heightInTiles heightStep shape tileHeight tileWidth widthInTiles
    faceCount layerCount visibleChunks worldHeight worldWidth
    addLayer clearColors cull getCellHeight getCellTint getTile inside setCellColor setCellHeight setLayerData setTile tileCenter toTile
    heightInTiles: number
    heightStep: number

    pixels of lift per elevation level

    shape: "square" | "hex" | "isometric" | "staggered"
    tileHeight: number
    tileWidth: number
    widthInTiles: number

    • Adds a layer on top of the existing ones.

      Parameters

      • name: string
      • Optionaldata: ArrayLike<number>

        one frame index per cell, row-major, EMPTY for a blank cell. A missing array makes an empty layer to fill in later. On a multi-sheet map the values are tileFrame packs rather than plain indices.

      Returns this

    • Switches off chunks the camera cannot see.

      Call it once per frame. Culling by chunk rather than by tile is the point: a 200x200 map is 40 000 tiles but only 169 chunks, so the test runs a couple of hundred times instead of forty thousand.

      Parameters

      Returns void

    • the elevation of a cell in whole levels; off the map reads as ground

      Parameters

      • x: number
      • y: number

      Returns number

    • Parameters

      • layer: string | number
      • x: number
      • y: number

      Returns number

    • Colours one cell across every layer.

      This is the fog-of-war and lighting hook. tint multiplies, so it darkens; add is the additive term, which is what lets an unseen-but-remembered tile wash out towards grey rather than merely going dark. Side faces take the tint but not the add - plain geometry has no batcher of its own to carry it.

      Parameters

      • x: number
      • y: number
      • tint: number
      • add: number = 0

      Returns void

    • Raises or lowers one cell, in whole levels.

      Every layer's top tile moves up by one heightStep per level, and on the diamond projections a raised cell grows two shaded side faces per level - the left and right walls of the block, drawn into the bottom layer's chunk behind the cell's own top, so rows in front still overlap correctly. Square and hex cells lift without faces. A cell with no bottom-layer tile grows no faces: nothing to be the side of. Negative heights sink the top with no faces - pits are a hole, not an inverted block.

      The usual source is an Elevation: map.setCellHeight(x, y, elevation.heightAt(x, y)) over every cell, after the layers are added.

      Parameters

      • x: number
      • y: number
      • height: number

      Returns void

    • fills a whole layer at once, which is what loading a map does

      Parameters

      • layer: string | number
      • data: ArrayLike<number>

      Returns void

    • Parameters

      • layer: string | number
      • x: number
      • y: number
      • frame: number

      Returns void

    • The centre of a tile, in world units: where a character standing on it belongs.

      Rides the cell's elevation: a raised cell reports its lifted top, so whoever is placed there stands on the block rather than inside it.

      Parameters

      • x: number
      • y: number

      Returns { x: number; y: number }

    • world point to tile coordinates

      Parameters

      • worldX: number
      • worldY: number

      Returns { x: number; y: number }

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods