CompositeTilemap

class CompositeTilemap extends PIXI.Container

A tilemap composite that lazily builds tilesets layered into multiple tilemaps.

The composite tileset is the concatenatation of the individual tilesets used in the tilemaps. You can preinitialized it by passing a list of tile textures to the constructor. Otherwise, the composite tilemap is lazily built as you add more tiles with newer tile textures. A new tilemap is created once the last tilemap has reached its limit (as set by texturesPerTilemap).


 import { Application } from '@pixi/app';
 import { CompositeTilemap } from '@pixi/tilemap';
 import { Loader } from '@pixi/loaders';

 // Setup view & stage.
 const app = new Application();

 document.body.appendChild(app.renderer.view);
 app.stage.interactive = true;

 // Global reference to the tilemap.
 let globalTilemap: CompositeTilemap;

 // Load the tileset spritesheet!
 Loader.shared.load('atlas.json');

 // Initialize the tilemap scene when the assets load.
 Loader.shared.load(function onTilesetLoaded()
 {
      const tilemap = new CompositeTilemap();

      // Setup the game level with grass and dungeons!
      for (let x = 0; x < 10; x++)
      {
          for (let y = 0; y < 10; y++)
          {
              tilemap.tile(
                  x % 2 === 0 && (x === y || x + y === 10) ? 'dungeon.png' : 'grass.png',
                  x * 100,
                  y * 100,
              );
          }
      }

      globalTilemap = app.stage.addChild(tilemap);
 });

 // Show a bomb at a random location whenever the user clicks!
 app.stage.on('click', function onClick()
 {
      if (!globalTilemap) return;

      const x = Math.floor(Math.random() * 10);
      const y = Math.floor(Math.random() * 10);

      globalTilemap.tile('bomb.png', x * 100, y * 100);
 });

Constructor

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

Parameters:
Name	Type	Attributes	Description
tileset	Array<PIXI.BaseTexture>	<optional>	A list of tile base-textures that will be used to eagerly initialized the layered tilemaps. This is only an performance optimization, and using tile will work equivalently.

Summary

Properties from CompositeTilemap

	setBitmaps Alias for tileset.
number	texPerChild
number	texturesPerTilemap The hard limit on the number of tile textures used in each tilemap.
[number, number]	tileAnim = undefined The animation frame vector.
Tilemap	protected lastModifiedTilemap = undefined The last modified tilemap.

Methods from CompositeTilemap

this	addFrame(texture: PIXI.Texture \| string \| number, x: number, y: number, animX: number, animY: number, animWidth: number, animHeight: number, animDivisor: number, alpha: number)
this	addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX: number, animY: number, rotate: number, animWidth: number, animHeight: number)
this	clear() Clears the tilemap composite.
void	renderCanvas(renderer: PIXI.CanvasRenderer)
this	tile(tileTexture: PIXI.Texture \| string \| number, 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 tile texture at (x, y).
this	tileAnimDivisor(divisor: number) Changes `tileAnimDivisor` value of the last added tile.
this	tileAnimX(offset: number, count: number) Changes `animX`, `animCountX` of the last added tile.
this	tileAnimY(offset: number, count: number) Changes `animY`, `animCountY` of the last added tile.
this	tileRotate(rotate: number) Changes the rotation of the last added tile.
this	tileset(tileTextures: Array<PIXI.BaseTexture>) This will preinitialize the tilesets of the layered tilemaps.

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()
void	destroy(options: IDestroyOptions \| boolean)
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) Retrieves the local bounds of the displayObject as a rectangle object.
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 _calculateBounds()
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

setBitmaps CompositeTilemap.ts:514

setBitmaps

Deprecated: Since @pixi/tilemap 3.

Alias for tileset.

texPerChild CompositeTilemap.ts:521

texPerChild: number

Deprecated: Since @pixi/tilemap 3.

See: CompositeTilemap.texturesPerTilemap

texturesPerTilemap CompositeTilemap.ts:69

texturesPerTilemap: number

The hard limit on the number of tile textures used in each tilemap.

tileAnim CompositeTilemap.ts:72

tileAnim: [number, number] = undefined

The animation frame vector.

Animated tiles have four parameters - animX, animY, animCountX, animCountY. The textures of adjacent animation frames are at offset animX or animY of each other, with animCountX per row and animCountY per column.

The animation frame vector specifies which animation frame texture to use. If the x/y coordinate is larger than the animCountX or animCountY for a specific tile, the modulus is taken.

Protected Properties

lastModifiedTilemap CompositeTilemap.ts:84

protected lastModifiedTilemap: Tilemap = undefined

The last modified tilemap.

Public Methods

addFrame CompositeTilemap.ts:446

addFrame(texture: PIXI.Texture | string | number, x: number, y: number, animX: number, animY: number, animWidth: number, animHeight: number, animDivisor: number, alpha: number) → {this}

Deprecated: Since @pixi/tilemap 3.

Parameters:
Name	Type	Attributes
texture	PIXI.Texture \| string \| number
x	number
y	number
animX	number	<optional>
animY	number	<optional>
animWidth	number	<optional>
animHeight	number	<optional>
animDivisor	number	<optional>
alpha	number	<optional>

Returns:
Type	Description
this

See: CompositeTilemap.tile

addRect CompositeTilemap.ts:476

addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX: number, animY: number, rotate: number, animWidth: number, animHeight: number) → {this}

Deprecated: @pixi/tilemap 3

Parameters:
Name	Type	Attributes
textureIndex	number
u	number
v	number
x	number
y	number
tileWidth	number
tileHeight	number
animX	number	<optional>
animY	number	<optional>
rotate	number	<optional>
animWidth	number	<optional>
animHeight	number	<optional>

Returns:
Type	Description
this

See: CompositeTilemap.tile

clear CompositeTilemap.ts:144

clear() → {this}

Clears the tilemap composite.

Returns:
Type	Description
this

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

tile CompositeTilemap.ts:201

tile(tileTexture: PIXI.Texture | string | number, 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 tile texture at (x, y).

Parameters:
Name	Type	Attributes	Default	Description
tileTexture	PIXI.Texture \| string \| number			The tile texture. You can pass an index into the composite tilemap as well.
x	number			The local x-coordinate of the tile's location.
y	number			The local y-coordinate of the tile's location.
options	{ u? : number, v? : number, tileWidth? : number, tileHeight? : number, animX? : number, animY? : number, rotate? : number, animCountX? : number, animCountY? : number, animDivisor? : number, alpha? : number }			Additional options to pass to Tilemap.tile.
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 each frame
options.alpha		<optional>	1	Tile alpha

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

tileAnimDivisor CompositeTilemap.ts:190

tileAnimDivisor(divisor: number) → {this}

Changes tileAnimDivisor value of the last added tile.

Parameters:
Name	Type	Description
divisor	number

Returns:
Type	Description
this

tileAnimX CompositeTilemap.ts:168

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

Changes animX, animCountX of the last added tile.

Parameters:
Name	Type	Description
offset	number
count	number

Returns:
Type	Description
this

tileAnimY CompositeTilemap.ts:179

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

Changes animY, animCountY of the last added tile.

Parameters:
Name	Type	Description
offset	number
count	number

Returns:
Type	Description
this

tileRotate CompositeTilemap.ts:157

tileRotate(rotate: number) → {this}

Changes the rotation of the last added tile.

Parameters:
Name	Type	Description
rotate	number

Returns:
Type	Description
this

tileset CompositeTilemap.ts:104

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

This will preinitialize the tilesets of the layered tilemaps.

If used after a tilemap has been created (or a tile added), this will overwrite the tile textures of the existing tilemaps. Passing the tileset to the constructor instead is the best practice.

Parameters:
Name	Type	Description
tileTextures	Array<PIXI.BaseTexture>	The list of tile textures that make up the tileset.

Returns:
Type	Description
this