Class IsoTilemap<T>

Class that extends basic 2D Tilemap functionality based on given projectionAngle.

Date

3/14/2023 - 2:14:31 PM

Export

Type Parameters

  • T

Hierarchy

Constructors

constructor

Properties

angle angleCos angleSin baseOrigin baseSurfaceHalfHeight baseSurfaceHeight baseTileDimensions baseTileOrigin bounds clamp getScreenDimensions getWorldPosition getWorldScale map tileDimensions worldOrigin

Accessors

baseDepth centerTile

Methods

_getAbsolutePosition _project _unproject add castRay center centerToPoint centerToTile collisionMap get getBounds getColumn getDimensionsColumn move recalculateBounds remove toScreenPoint toWorldPoint worldToTile

Constructors

constructor

Properties

Protected Readonly angle

angle: number

Isometric projection angle, defaults to CLASSIC. Other angles are exported as ISOMETRIC, MILITARY

Date

3/14/2023 - 2:14:31 PM

Protected Readonly angleCos

angleCos: number

The cosign of the angle

Date

3/14/2023 - 2:14:31 PM

Protected Readonly angleSin

angleSin: number

The sine of the angle

Date

3/14/2023 - 2:14:31 PM

Protected Readonly baseOrigin

baseOrigin: IPoint

The tile offset coordinates given the base dimensions and origin

Date

3/14/2023 - 2:14:31 PM

Protected Readonly baseSurfaceHalfHeight

baseSurfaceHalfHeight: number

The middle point of the top surface, (height - depth) / 2

Date

3/14/2023 - 2:14:31 PM

Protected Readonly baseSurfaceHeight

baseSurfaceHeight: number

The height of the top surface of the tile, height - depth

Date

3/14/2023 - 2:14:31 PM

Protected baseTileDimensions

baseTileDimensions: IRectangle3

Description placeholder

Date

3/14/2023 - 12:44:55 PM

Protected Readonly baseTileOrigin

baseTileOrigin: IPoint = MIDDLE

Description placeholder

Date

3/14/2023 - 12:44:55 PM

Protected Readonly bounds

bounds: {
    x: {
        max: number;
        min: number;
    };
    y: {
        max: number;
        min: number;
    };
    z: {
        max: number;
        min: number;
    };
} = ...

Contains the lower and upper bounds of the map's z, x, y axes using tile coordinates

Date

3/14/2023 - 12:44:55 PM

Type declaration

  • x: {
        max: number;
        min: number;
    }
    • max: number
    • min: number
  • y: {
        max: number;
        min: number;
    }
    • max: number
    • min: number
  • z: {
        max: number;
        min: number;
    }
    • max: number
    • min: number

Protected Readonly clamp

clamp: boolean

Whether or not to clamp values

Date

3/14/2023 - 2:14:31 PM

Protected getScreenDimensions

getScreenDimensions: (() => IRectangle)

Type declaration

Protected getWorldPosition

getWorldPosition: (() => IPoint)

Type declaration

    • (): IPoint

    • Description placeholder

      Date

      3/14/2023 - 12:44:55 PM

      Returns IPoint

Protected getWorldScale

getWorldScale: (() => IPoint)

Type declaration

    • (): IPoint

    • Description placeholder

      Date

      3/14/2023 - 12:44:55 PM

      Returns IPoint

Protected Readonly map

map: MapThree<T> = ...

Contains references to T values using their tile coordinates for three-dimensional map indices, z -> x -> y

Date

3/14/2023 - 12:44:55 PM

Readonly tileDimensions

tileDimensions: MapThree<ExtendedBox<T>> = ...

A three-dimensional map of boxes containing references to tiles, with world coordinations and dimensions of placed tiles

Date

3/14/2023 - 2:14:31 PM

Protected Readonly worldOrigin

worldOrigin: IPoint = MIDDLE

Description placeholder

Date

3/14/2023 - 12:44:55 PM

Accessors

Protected baseDepth

centerTile

  • get centerTile(): IPoint

  • Calculates the current map bounds and returns the tile coordinates in the center

    Date

    3/14/2023 - 12:44:55 PM

    Returns IPoint

Methods

Protected _getAbsolutePosition

Protected _project

Protected _unproject

add

  • Add a tile to the tilemap at a given coordinate, optionally providing different tile dimensions if the tile is a different size than the base scale. The returned coordinate is relative to the world origin.

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    A point at which to place this tile relative to the world origin

    Example

    const T = {}
     const { x, y, z } = isoTilemap.add(T, { x: 1, y: 1, z: 0 })
     sprite.position.x = x
     sprite.position.y = y
     sprite.zIndex = z
     map.get({ x: 1, y: 1, z: 0 }) === T // true

    Parameters

    • v: T

      The value to store at provided map coordinates

    • tile: IPoint3

      The map tile coordinates to store the provided

    • Optional dimensions: IRectangle3 = ...

      Alternate dimensions to use instead of the base tile dimensions

    • Optional origin: IPoint = ...

      Alterate origin with which to place tile if different from base origin

    Returns IPoint3

castRay

  • Return the first visible tile that collides with a projected world coordinate. Starts at highest z and scans tiles along a ray to the lowest z. Optionally takes a callback with the backing value and tile coordinates to include in the ray's path

    Date

    3/14/2023 - 2:14:30 PM

    Returns

    Example

    const foo = map.add('foo', { x: 0, y: 0, z: 0 })
     const bar = map.add('bar', { x: 1, y: 1, z: 1 })
     castRay({ x: 400, y: 400 }) === bar

    Parameters

    • point: IPoint
    • Optional include: ((t: T, tile: IPoint3) => boolean)
        • (t: T, tile: IPoint3): boolean

        • Parameters

          Returns boolean

    Returns undefined | T

center

  • Returns a world offset position where the centermost tile is centered to the viewport

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Example

    const mapContainer = new PIXI.Container()
       const worldPosition = tilemap.center()
       mapContainer.x = worldPosition.x
       mapCOntainer.y = worldPosition.y

    Returns IPoint

centerToPoint

  • Returns a world offset position where the given screen space coordinate is centered to the viewport

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Example

    const mapContainer = new PIXI.Container()
       const worldPosition = tilemap.centerToPoint({ x: 500, y: 200 })
       mapContainer.x = worldPosition.x
       mapCOntainer.y = worldPosition.y

    Parameters

    Returns IPoint

centerToTile

  • Returns the new world position where the given tile is in the center of the viewport.

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Example

    const mapContainer = new PIXI.Container()
       const worldPosition = tilemap.centerToTile({ x: 1, y: 1, z: 0 })
       mapContainer.x = worldPosition.x
       mapCOntainer.y = worldPosition.y

    Parameters

    • tile: IPoint3

      The tile coordinates to center

    Returns IPoint

collisionMap

  • Returns a three-dimensional map of all tiles that collide with a projected world coordinate Optionally takes a callback with the backing value and tile coordinates to include in the ray's path

    Date

    3/14/2023 - 2:14:30 PM

    Returns

    Example

    const foo = map.add('foo', { x: 0, y: 0, z: 0 })
     const bar = map.add('bar', { x: 1, y: 1, z: 1 })
     hits({ x: 400, y: 400 }) === Map{ 0: Map{ 0: Map{ 0: foo } }, 1: Map{ 1: Map{ 1: bar } } }

    Parameters

    • point: IPoint
    • Optional include: ((t: T, tile: IPoint3) => boolean)
        • (t: T, tile: IPoint3): boolean

        • Parameters

          Returns boolean

    Returns MapThree<T>

get

  • Get a single tile at given map coordinates

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    The tile at given coordinates

    Example

    const tile = tilemap.get({ x: 1, y: 1, z: 1 })

    Parameters

    • point: IPoint3

      Map tile coordinates. If no z is provided, it defaults to 0.

    Returns undefined | T

getBounds

  • Calculates the map bounds of the current tilemap.

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Example

    const { x, y, width, height, depth } = tilemap.getBounds()

    Returns IBox

getColumn

  • Get an array of values from a map at given x,y coordinates, from ascending z index

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Example

    const [z0Tile, z1Tile, z2Tile] = tilemap.getColumn({ x: 1, y: 1, z: 1 })

    Type Parameters

    • C = T

    Parameters

    • point: IPoint

      Map coordinates to get at each z-layer

    • Optional map: MapThree<C>

      Map to search against, defaults to this.map

    Returns C[]

getDimensionsColumn

  • Get an array of tile dimensions from a map at given x,y coordinates, from ascending z index

    Date

    3/14/2023 - 2:36:28 PM

    Returns

    Example

    const [...boxDimensions] = tilemap.getDimensionsColumn({ x: 1, y: 1 })

    Parameters

    Returns ExtendedBox<T>[]

move

  • Moves a tile from given coordinate to another coordinate

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    A point at which to place the moved tile relative to the world origin

    Example

    const { x, y, z } = tilemap.move({ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 0 })
       sprite.position.x = x
       sprite.position.y = y
       sprite.zIndex = z

    Parameters

    • from: IPoint3

      The map coordinates of the tile to move

    • to: IPoint3

      The map coordinates to move the tile to

    • Optional dimensions: IRectangle = ...

      The dimensions of the tile, defaults to this.baseTileDimensions

    • Optional origin: IPoint = ...

      The origin point of the tile, defaults to this.baseTileOrigin

    • Optional fallback: T

    Returns undefined | IPoint3

Protected recalculateBounds

  • Protected

    Recalculate bounds given a new point modifying the floors and ceilings of all axes

    Date

    3/14/2023 - 12:44:55 PM

    Example

    tilemap.recalculateBounds({ x: 1, y: 1, z: -1 })

    Parameters

    Returns void

remove

  • Remove a tile from the given point coordinates.

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Removed tile, if any

    Example

    const tile = tilemap.remove({ x: 1, y: 1 })

    Parameters

    • point: IPoint3

      Map coordinates to remove

    Returns undefined | T

toScreenPoint

  • Project a tile coordinate to an absolute screen space coordinate relative to the window, taking world offset / scale into account

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    Screen space point

    Example

    const { x, y } = map.toScreenPoint({ x: 0, y: 0, z: 0 });
     debugGraphics.lineStyle(2, 0xff00ff, 1);
     debugGraphics.drawRect(
       x - 32 * mapContainer.scale.x,
       y - 32 * mapContainer.scale.y,
       64 * mapContainer.scale.x,
       32 * mapContainer.scale.y
     );

    Parameters

    • tile: IPoint3

      The tile coordinates

    • Optional dimensions: IRectangle3 = ...

      The dimensions of the tile, defaults to this.baseTileDimensions

    • Optional origin: IPoint = ...

      The origin point of the tile, defaults to this.baseTileOrigin

    Returns IPoint3

toWorldPoint

  • Project a tile coordinate to a world coordinate, not taking world offset / scale into account

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    World space point

    Parameters

    • tile: IPoint3

      The tile coordinates

    • Optional dimensions: IRectangle3 = ...

      The dimensions of the tile, defaults to this.baseTileDimensions

    • Optional origin: IPoint = ...

      The origin point of the tile, defaults to this.baseTileOrigin

    Returns IPoint3

worldToTile

  • Project a world coordinate to a tile coordinate, not taking world offset / scale into account.

    Date

    3/14/2023 - 12:44:55 PM

    Returns

    tile coordinate

    Example

    const tileCoord = tileMap.worldToTile(transformGlobalEventToWorldCoordinates({ x: e.offsetX, y: e.offsetY }))
     const tileCoord = tileMap.worldToTile({ x: 400, y: 300 })

    Parameters

    • point: IPoint3

      The world coordinates

    • Optional dimensions: IRectangle3 = ...

      The dimensions of the tile, defaults to this.baseTileDimensions

    • Optional origin: IPoint = ...

      The origin point of the tile, defaults to this.baseTileOrigin

    Returns IPoint3

Settings

Member Visibility

Theme

Generated using TypeDoc