Tilemap

class Tilemap extends PIXI.Container

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.


 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);
 });

Constructor

new Tilemap(tileset: PIXI.BaseTexture | PIXI.BaseTexture<Array>) → {}

Parameters:
Name	Type	Description
tileset	PIXI.BaseTexture \| PIXI.BaseTexture<Array>	The tileset to use for the tilemap. This can be reset later with Tilemap.setTileset. The base-textures in this array must not be duplicated.

Summary

Properties from Tilemap

[number, number]	tileAnim = undefined The tile animation frame.
boolean	protected hasAnimatedTile = false Flags whether any animated tile was added.
	protected tilemapBounds The local bounds of the tilemap itself. This does not include DisplayObject children.
Array<PIXI.BaseTexture>	protected tileset The list of base-textures being used in the tilemap.

Methods from Tilemap

boolean	addFrame(texture: PIXI.Texture \| string \| number, x: number, y: number, animX: number, animY: number) Deprecated signature for tile.
this	addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX: number, animY: number, rotate: number, animCountX: number, animCountY: number, animDivisor: number, alpha: number) Deprecated signature for tile.
this	clear() Clears all the tiles added into this tilemap.
void	destroy(options: IDestroyOptions)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle)
Array<PIXI.BaseTexture>	getTileset()
void	renderCanvas(renderer: PIXI.CanvasRenderer)
this	setTileset(tileset: PIXI.BaseTexture \| PIXI.BaseTexture<Array>) Define the tileset used by the tilemap.
this	tile(tileTexture: number \| string \| PIXI.Texture \| PIXI.BaseTexture, x: number, y: number, options: { u? : number, v? : number, tileWidth? : number, tileHeight? : number, animX? : number, animY? : number, rotate? : number, animCountX? : number, animCountY? : number, animDivisor? : number, alpha? : number }) Adds a tile that paints the given texture at (x, y).
void	tileAnimDivisor(divisor: number) Changes the `animDivisor` value of the last tile.
void	tileAnimX(offset: number, count: number) Changes the `animX`, `animCountX` of the last tile.
void	tileAnimY(offset: number, count: number) Changes the `animY`, `animCountY` of the last tile.
void	tileRotate(rotate: number) Changes the rotation of the last tile.
void	protected _calculateBounds()

Properties inherited from Container

T[]	children
number	height The height of the Container, setting this will actually modify the scale to achieve the value set.
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.
number	width The width of the Container, setting this will actually modify the scale to achieve the value set.

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
boolean	cacheAsBitmap
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
boolean	isSprite Used to fast check if a sprite is.. a sprite!
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	render(renderer: PIXI.Renderer) Renders the object using the WebGL renderer.
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _render(_renderer: PIXI.Renderer)
void	protected _renderCanvas(_renderer: PIXI.CanvasRenderer)
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from Container

childAdded

Inherited Events from DisplayObject

	added
	childRemoved
	click
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedown
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemove
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseout
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseover
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseup
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutside
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancel
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdown
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermove
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointerout
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerover
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertap
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerup
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutside
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclick
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdown
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightup
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutside
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tap
	tapcapture Capture phase equivalent of `tap`.
	touchcancel
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchend
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutside
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmove
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstart
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Properties

tileAnim Tilemap.ts:66

tileAnim: [number, number] = undefined

The tile animation frame.

See: CompositeTilemap.tileAnim

Protected Properties

hasAnimatedTile Tilemap.ts:101

protected hasAnimatedTile: boolean = false

Flags whether any animated tile was added.

tilemapBounds Tilemap.ts:96

protected tilemapBounds

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

tileset Tilemap.ts:88

protected tileset: Array<PIXI.BaseTexture>

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.

Public Methods

addFrame Tilemap.ts:702

addFrame(texture: PIXI.Texture | string | number, x: number, y: number, animX: number, animY: number) → {boolean}

Deprecated: Since @pixi/tilemap 3.

Deprecated signature for tile.

Parameters:
Name	Type	Description
texture	PIXI.Texture \| string \| number
x	number
y	number
animX	number
animY	number

Returns:
Type	Description
boolean

addRect Tilemap.ts:722

addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX: number, animY: number, rotate: number, animCountX: number, animCountY: number, animDivisor: number, alpha: number) → {this}

Deprecated: Since @pixi/tilemap 3.

Deprecated signature for tile.

Parameters:
Name	Type	Default
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 Tilemap.ts:150

clear() → {this}

Clears all the tiles added into this tilemap.

Returns:
Type	Description
this

destroy Tilemap.ts:695

destroy(options: IDestroyOptions) → {void}

Parameters:
Name	Type	Attributes	Description
options	IDestroyOptions	<optional>

Returns:
Type	Description
void

getLocalBounds Tilemap.ts:683

getLocalBounds(rect: PIXI.Rectangle) → {PIXI.Rectangle}

Parameters:
Name	Type	Attributes	Description
rect	PIXI.Rectangle	<optional>

Returns:
Type	Description
PIXI.Rectangle

getTileset Tilemap.ts:117

getTileset() → {Array<PIXI.BaseTexture>}

Returns:
Type	Description
Array<PIXI.BaseTexture>	The tileset of this tilemap.

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

setTileset Tilemap.ts:125

setTileset(tileset: PIXI.BaseTexture | PIXI.BaseTexture<Array>) → {this}

Define the tileset used by the tilemap.

Parameters:
Name	Type	Description
tileset	PIXI.BaseTexture \| PIXI.BaseTexture<Array>	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 Tilemap.ts:161

tile(tileTexture: number | string | PIXI.Texture | PIXI.BaseTexture, x: number, y: number, options: { u? : number, v? : number, tileWidth? : number, tileHeight? : number, animX? : number, animY? : number, rotate? : number, animCountX? : number, animCountY? : number, animDivisor? : number, alpha? : number }) → {this}

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

Parameters:
Name	Type	Attributes	Default	Description
tileTexture	number \| string \| PIXI.Texture \| PIXI.BaseTexture			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 Tilemap.ts:319

tileAnimDivisor(divisor: number) → {void}

Changes the animDivisor value of the last tile.

Parameters:
Name	Type	Description
divisor	number

Returns:
Type	Description
void

tileAnimX Tilemap.ts:300

tileAnimX(offset: number, count: number) → {void}

Changes the animX, animCountX of the last tile.

Parameters:
Name	Type	Description
offset	number
count	number

Returns:
Type	Description
void

tileAnimY Tilemap.ts:310

tileAnimY(offset: number, count: number) → {void}

Changes the animY, animCountY of the last tile.

Parameters:
Name	Type	Description
offset	number
count	number

Returns:
Type	Description
void

tileRotate Tilemap.ts:292

tileRotate(rotate: number) → {void}

Changes the rotation of the last tile.

Parameters:
Name	Type	Description
rotate	number

Returns:
Type	Description
void

Protected Methods

_calculateBounds Tilemap.ts:675

protected _calculateBounds() → {void}

Returns:
Type	Description
void