Tileset
A Tileset is a combination of a single image containing the tiles and a container for data about each tile. It maps tile indexes (GIDs) to positions within the tileset image, stores per-tile properties and collision data, and supports tile spacing and margin. Tilesets are created automatically when parsing Tiled map data and are used by TilemapLayer during rendering.
Constructor
new Tileset(name, firstgid, [tileWidth], [tileHeight], [tileMargin], [tileSpacing], [tileProperties], [tileData], [tileOffset])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| name | string | No | The name of the tileset in the map data. | |
| firstgid | number | No | The first tile index this tileset contains. | |
| tileWidth | number | Yes | 32 | Width of each tile (in pixels). |
| tileHeight | number | Yes | 32 | Height of each tile (in pixels). |
| tileMargin | number | Yes | 0 | The margin around all tiles in the sheet (in pixels). |
| tileSpacing | number | Yes | 0 | The spacing between each tile in the sheet (in pixels). |
| tileProperties | object | Yes | "{}" | Custom properties defined per tile in the Tileset. These typically are custom properties created in Tiled when editing a tileset. |
| tileData | object | Yes | "{}" | Data stored per tile. These typically are created in Tiled when editing a tileset, e.g. from Tiled's tile collision editor or terrain editor. |
| tileOffset | object | Yes | "{x: 0, y: 0}" | Tile texture drawing offset. |
Scope: static
Source: src/tilemaps/Tileset.js#L10
Since: 3.0.0
Public Members
animationSearchThreshold
animationSearchThreshold: number
Description:
The number of frames above which a tile is considered to have many animation frames. This is used to optimize rendering. If a tile has fewer frames than this, frames are searched using a linear search. If a tile has more, frames are searched using a binary search.
Source: src/tilemaps/Tileset.js#L200
Since: 4.0.0
columns
columns: number
Description:
The number of tile columns in the tileset.
Source: src/tilemaps/Tileset.js#L169
Since: 3.0.0
firstgid
firstgid: number
Description:
The starting index of the first tile index this Tileset contains.
Source: src/tilemaps/Tileset.js#L55
Since: 3.0.0
glTexture
glTexture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper
Description:
The gl texture used by the WebGL renderer.
Source: src/tilemaps/Tileset.js#L149
Since: 3.11.0
image
image: Phaser.Textures.Texture
Description:
The cached image that contains the individual tiles. Use setImage to set.
Source: src/tilemaps/Tileset.js#L139
Since: 3.0.0
maxAnimationLength
maxAnimationLength: number
Description:
The maximum length of any animation in this tileset, in frames. This is used internally to optimize rendering. It is updated when createAnimationDataTexture is called.
Source: src/tilemaps/Tileset.js#L214
Since: 4.0.0
name
name: string
Description:
The name of the Tileset.
Source: src/tilemaps/Tileset.js#L46
Since: 3.0.0
rows
rows: number
Description:
The number of tile rows in the tileset.
Source: src/tilemaps/Tileset.js#L159
Since: 3.0.0
texCoordinates
texCoordinates: Array.<object>
Description:
The look-up table to specific tile image texture coordinates (UV in pixels). Each element contains the coordinates for a tile in an object of the form {x, y}.
Source: src/tilemaps/Tileset.js#L189
Since: 3.0.0
tileData
tileData: object
Description:
Tileset-specific data per tile that are typically defined in the Tiled editor, e.g. within the Tileset collision editor. This is where collision objects and terrain are stored.
Source: src/tilemaps/Tileset.js#L114
Since: 3.0.0
tileHeight
tileHeight: number
Description:
The height of each tile (in pixels). Use setTileSize to change.
Source: src/tilemaps/Tileset.js#L74
Since: 3.0.0
tileMargin
tileMargin: number
Description:
The margin around the tiles in the sheet (in pixels). Use setSpacing to change.
Source: src/tilemaps/Tileset.js#L84
Since: 3.0.0
tileOffset
tileOffset: Phaser.Math.Vector2
Description:
Controls the drawing offset from the tile origin. Defaults to 0x0, no offset.
Source: src/tilemaps/Tileset.js#L124
Since: 3.60.0
tileProperties
tileProperties: object
Description:
Tileset-specific properties per tile that are typically defined in the Tiled editor in the Tileset editor.
Source: src/tilemaps/Tileset.js#L104
Since: 3.0.0
tileSpacing
tileSpacing: number
Description:
The spacing between each tile in the sheet (in pixels). Use setSpacing to change.
Source: src/tilemaps/Tileset.js#L94
Since: 3.0.0
tileWidth
tileWidth: number
Description:
The width of each tile (in pixels). Use setTileSize to change.
Source: src/tilemaps/Tileset.js#L64
Since: 3.0.0
total
total: number
Description:
The total number of tiles in the tileset.
Source: src/tilemaps/Tileset.js#L179
Since: 3.0.0
Public Methods
containsTileIndex
<instance> containsTileIndex(tileIndex)
Description:
Returns true if and only if this Tileset contains the given tile index.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
Returns: boolean -
Source: src/tilemaps/Tileset.js#L313
Since: 3.0.0
createAnimationDataTexture
<instance> createAnimationDataTexture(renderer)
Description:
Creates a new WebGLTexture for the tileset's animation data.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| renderer | Phaser.Renderer.WebGL.WebGLRenderer | No | The renderer to use. |
Returns: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper - The new WebGLTexture.
Source: src/tilemaps/Tileset.js#L586
Since: 4.0.0
getAnimatedTileId
<instance> getAnimatedTileId(tileIndex, milliseconds)
Description:
Returns the ID of the tile to use, given a base tile and time, according to the tile's animation properties.
If the tile is not animated, this method returns the base tile ID.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
| milliseconds | number | No | The current time in milliseconds. |
Returns: number - The tile ID to use, or null if the tile is not contained in this tileset.
Source: src/tilemaps/Tileset.js#L331
Since: 4.0.0
getAnimationDataIndexMap
<instance> getAnimationDataIndexMap(renderer)
Description:
Get or create the map from tile index to animation data index. This is used by TilemapGPULayer to animate tiles.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| renderer | Phaser.Renderer.WebGL.WebGLRenderer | No | The renderer to use. |
Returns: Map.<number, number> - The map from tile index to animation data index.
Source: src/tilemaps/Tileset.js#L567
Since: 4.0.0
getAnimationDataTexture
<instance> getAnimationDataTexture(renderer)
Description:
Get or create the texture containing the animation data for this tileset. This is used by TilemapGPULayer to animate tiles.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| renderer | Phaser.Renderer.WebGL.WebGLRenderer | No | The renderer to use. |
Returns: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper - The animation data texture.
Source: src/tilemaps/Tileset.js#L548
Since: 4.0.0
getTileCollisionGroup
<instance> getTileCollisionGroup(tileIndex)
Description:
Get a tile's collision group that is stored in the Tileset. Returns null if tile index is not contained in this Tileset. This is typically defined within Tiled's tileset collision editor.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
Returns: object -
Source: src/tilemaps/Tileset.js#L295
Since: 3.0.0
getTileData
<instance> getTileData(tileIndex)
Description:
Get a tile's data that is stored in the Tileset. Returns null if tile index is not contained in this Tileset. This is typically defined in Tiled and will contain both Tileset collision info and terrain mapping.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
Returns: object, undefined -
Source: src/tilemaps/Tileset.js#L276
Since: 3.0.0
getTileProperties
<instance> getTileProperties(tileIndex)
Description:
Get a tile's properties that are stored in the Tileset. Returns null if tile index is not contained in this Tileset. This is typically defined in Tiled under the Tileset editor.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
Returns: object, undefined -
Source: src/tilemaps/Tileset.js#L258
Since: 3.0.0
getTileTextureCoordinates
<instance> getTileTextureCoordinates(tileIndex)
Description:
Returns the texture coordinates (UV in pixels) in the Tileset image for the given tile index. Returns null if tile index is not contained in this Tileset.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileIndex | number | No | The unique id of the tile across all tilesets in the map. |
Returns: object - Object in the form { x, y } representing the top-left UV coordinate within the Tileset image.
Source: src/tilemaps/Tileset.js#L386
Since: 3.0.0
setImage
<instance> setImage(texture)
Description:
Sets the image associated with this Tileset and updates the tile data (rows, columns, etc.).
Parameters:
| name | type | optional | description |
|---|---|---|---|
| texture | Phaser.Textures.Texture | No | The image that contains the tiles. |
Returns: Phaser.Tilemaps.Tileset - This Tileset object.
Source: src/tilemaps/Tileset.js#L405
Since: 3.0.0
setSpacing
<instance> setSpacing([margin], [spacing])
Description:
Sets the tile margin and spacing and updates the tile data (rows, columns, etc.).
Parameters:
| name | type | optional | description |
|---|---|---|---|
| margin | number | Yes | The margin around the tiles in the sheet (in pixels). |
| spacing | number | Yes | The spacing between the tiles in the sheet (in pixels). |
Returns: Phaser.Tilemaps.Tileset - This Tileset object.
Source: src/tilemaps/Tileset.js#L461
Since: 3.0.0
setTileSize
<instance> setTileSize([tileWidth], [tileHeight])
Description:
Sets the tile width & height and updates the tile data (rows, columns, etc.).
Parameters:
| name | type | optional | description |
|---|---|---|---|
| tileWidth | number | Yes | The width of a tile in pixels. |
| tileHeight | number | Yes | The height of a tile in pixels. |
Returns: Phaser.Tilemaps.Tileset - This Tileset object.
Source: src/tilemaps/Tileset.js#L437
Since: 3.0.0
updateTileData
<instance> updateTileData(imageWidth, imageHeight, [offsetX], [offsetY])
Description:
Updates tile texture coordinates and tileset data.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| imageWidth | number | No | The (expected) width of the image to slice. | |
| imageHeight | number | No | The (expected) height of the image to slice. | |
| offsetX | number | Yes | 0 | The x offset in the source texture where the tileset starts. |
| offsetY | number | Yes | 0 | The y offset in the source texture where the tileset starts. |
Returns: Phaser.Tilemaps.Tileset - This Tileset object.
Source: src/tilemaps/Tileset.js#L485
Since: 3.0.0