PixiJS Tilemap

Class: Tilemap

Tilemap

A rectangular tilemap implementation that renders a predefined set of tile textures.

The tileset of a tilemap defines the list of base-textures that can be painted in the tilemap. A texture is identified using its base-texture's index into the this list, i.e. changing the base-texture at a given index in the tileset modifies the paint of all tiles pointing to that index.

The size of the tileset is limited by the texture units supported by the client device. The minimum supported value is 8, as defined by the WebGL 1 specification. gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS) can be used to extract this limit. CompositeTilemap can be used to get around this limit by layering multiple tilemap instances.

new Tilemap (tileset)

Name Type Description
tileset TextureSource | TextureSource<Array>

The tileset to use for the tilemap. This can be reset later with setTileset. The base-textures in this array must not be duplicated.

Example

 import { Tilemap } from '@pixi/tilemap';
 import { Loader } from '@pixi/loaders';

 // Add the spritesheet into your loader!
 Loader.shared.add('atlas', 'assets/atlas.json');

 // Make the tilemap once the tileset assets are available.
 Loader.shared.load(function onTilesetLoaded()
 {
      // The base-texture is shared between all the tile textures.
      const tilemap = new Tilemap([Texture.from('grass.png').baseTexture])
          .tile('grass.png', 0, 0)
          .tile('grass.png', 100, 100)
          .tile('brick_wall.png', 0, 100);
 });

Extends

  • Container

Members

shadowColor

Currently doesnt work.

tileAnim [number, number]

The tile animation frame.

Default Value:
  • undefined
See:

hasAnimatedTile boolean protected

Flags whether any animated tile was added.

Default Value:
  • false

tilemapBounds protectedreadonly

The local bounds of the tilemap itself. This does not include DisplayObject children.

tileset protected

The list of base-textures being used in the tilemap.

This should not be shuffled after tiles have been added into this tilemap. Usually, only tile textures should be added after tiles have been added into the map.

Methods

addFrame (texture, x, y, animX, animY) boolean Deprecated`` : Since @pixi/tilemap 3.

Deprecated signature for tile.

Name Type Description
texture Texture | string | number
x number
y number
animX number
animY number
Returns:
Type Description
boolean

addRect (textureIndex, u, v, x, y, tileWidth, tileHeight, animX, animY, rotate, animCountX, animCountY, animDivisor, alpha) this Deprecated`` : Since @pixi/tilemap 3.

Deprecated signature for tile.

Name Type Default Description
textureIndex number
u number
v number
x number
y number
tileWidth number
tileHeight number
animX number 0
animY number 0
rotate number 0
animCountX number 1024
animCountY number 1024
animDivisor number 1
alpha number 1
Returns:
Type Description
this

clear () this

Clears all the tiles added into this tilemap.

Returns:
Type Description
this

destroy (options) void

Name Type Attributes Description
options DestroyOptions <optional>

getTileset () TileTextureArray

Returns:
Type Description
TileTextureArray The tileset of this tilemap.

setTileset (textureOrArray) this

Define the tileset used by the tilemap.

Name Type Description
textureOrArray TileTextureArray | TextureSource | Array<TextureSource>

The list of textures to use in the tilemap. If a base-texture (not array) is passed, it will be wrapped into an array. This should not contain any duplicates.
Returns:
Type Description
this

tile (tileTexture, x, y, options) this

Adds a tile that paints the given texture at (x, y).

Name Type Attributes Default Description
tileTexture number | string | Texture | TextureSource

The tiling texture to render.
x number

The local x-coordinate of the tile's position.
y number

The local y-coordinate of the tile's position.
options {
   u?: number,
   v?: number,
   tileWidth?: number,
   tileHeight?: number,
   animX?: number,
   animY?: number,
   rotate?: number,
   animCountX?: number,
   animCountY?: number,
   animDivisor?: number,
   alpha?: number
}

Additional tile options.
options.u <optional>
 texture.frame.x

The x-coordinate of the texture in its base-texture's space.
options.v <optional>
 texture.frame.y

The y-coordinate of the texture in its base-texture's space.
options.tileWidth <optional>
 texture.orig.width

The local width of the tile.
options.tileHeight <optional>
 texture.orig.height

The local height of the tile.
options.animX <optional>
 0

For animated tiles, this is the "offset" along the x-axis for adjacent animation frame textures in the base-texture.
options.animY <optional>
 0

For animated tiles, this is the "offset" along the y-axis for adjacent animation frames textures in the base-texture.
options.rotate <optional>
 0
options.animCountX <optional>
 1024

For animated tiles, this is the number of animation frame textures per row.
options.animCountY <optional>
 1024

For animated tiles, this is the number of animation frame textures per column.
options.animDivisor <optional>
 1

For animated tiles, this is the animation duration of each frame
options.alpha <optional>
 1

Tile alpha
Returns:
Type Description
this This tilemap, good for chaining.

tileAnimDivisor (divisor) void

Changes the animDivisor value of the last tile.

Name Type Description
divisor number

tileAnimX (offset, count) void

Changes the animX, animCountX of the last tile.

Name Type Description
offset number
count number

tileAnimY (offset, count) void

Changes the animY, animCountY of the last tile.

Name Type Description
offset number
count number

tileRotate (rotate) void

Changes the rotation of the last tile.

Name Type Description
rotate number