You are browsing legacy Phaser documentation that is 4+ years out of date. Please see https://newdocs.phaser.io

Class: Texture

Phaser.Textures. Texture

A Texture consists of a source, usually an Image from the Cache, and a collection of Frames. The Frames represent the different areas of the Texture. For example a texture atlas may have many Frames, one for each element within the atlas. Where-as a single image would have just one frame, that encompasses the whole image.

Every Texture, no matter where it comes from, always has at least 1 frame called the __BASE frame. This frame represents the entirety of the source image.

Textures are managed by the global TextureManager. This is a singleton class that is responsible for creating and delivering Textures and their corresponding Frames to Game Objects.

Sprites and other Game Objects get the texture data they need from the TextureManager.

new Texture(manager, key, source [, width] [, height])

Parameters:
Name Type Argument Description
manager Phaser.Textures.TextureManager

A reference to the Texture Manager this Texture belongs to.
key string

The unique string-based key of this Texture.
source HTMLImageElement | HTMLCanvasElement | Array.<HTMLImageElement> | Array.<HTMLCanvasElement>

An array of sources that are used to create the texture. Usually Images, but can also be a Canvas.
width number <optional>

The width of the Texture. This is optional and automatically derived from the source images.
height number <optional>

The height of the Texture. This is optional and automatically derived from the source images.
Since: 3.0.0
Source: src/textures/Texture.js (Line 14)

Members

customData :object

Any additional data that was set in the source JSON (if any), or any extra data you'd like to store relating to this texture

Type:
  • object
Since: 3.0.0
Source: src/textures/Texture.js (Line 98)

dataSource :array

An array of TextureSource data instances. Used to store additional data images, such as normal maps or specular maps.

Type:
  • array
Since: 3.0.0
Source: src/textures/Texture.js (Line 79)

firstFrame :string

The name of the first frame of the Texture.

Type:
  • string
Since: 3.0.0
Source: src/textures/Texture.js (Line 108)

frames :object

A key-value object pair associating the unique Frame keys with the Frames objects.

Type:
  • object
Since: 3.0.0
Source: src/textures/Texture.js (Line 89)

frameTotal :number

The total number of Frames in this Texture, including the __BASE frame.

A Texture will always contain at least 1 frame because every Texture contains a __BASE frame by default, in addition to any extra frames that have been added to it, such as when parsing a Sprite Sheet or Texture Atlas.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/textures/Texture.js (Line 117)

key :string

The unique string-based key of this Texture.

Type:
  • string
Since: 3.0.0
Source: src/textures/Texture.js (Line 60)

manager :Phaser.Textures.TextureManager

A reference to the Texture Manager this Texture belongs to.

Type:
Since: 3.0.0
Source: src/textures/Texture.js (Line 51)

source :Array.<Phaser.Textures.TextureSource>

An array of TextureSource instances. These are unique to this Texture and contain the actual Image (or Canvas) data.

Type:
Since: 3.0.0
Source: src/textures/Texture.js (Line 69)

Methods

add(name, sourceIndex, x, y, width, height)

Adds a new Frame to this Texture.

A Frame is a rectangular region of a TextureSource with a unique index or string-based key.

The name given must be unique within this Texture. If it already exists, this method will return null.

Parameters:
Name Type Description
name number | string

The name of this Frame. The name is unique within the Texture.
sourceIndex number

The index of the TextureSource that this Frame is a part of.
x number

The x coordinate of the top-left of this Frame.
y number

The y coordinate of the top-left of this Frame.
width number

The width of this Frame.
height number

The height of this Frame.
Since: 3.0.0
Source: src/textures/Texture.js (Line 137)
Returns:

The Frame that was added to this Texture, or null if the given name already exists.

Type
Phaser.Textures.Frame

destroy()

Destroys this Texture and releases references to its sources and frames.

Since: 3.0.0
Source: src/textures/Texture.js (Line 477)

get( [name])

Gets a Frame from this Texture based on either the key or the index of the Frame.

In a Texture Atlas Frames are typically referenced by a key. In a Sprite Sheet Frames are referenced by an index. Passing no value for the name returns the base texture.

Parameters:
Name Type Argument Description
name string | number <optional>

The string-based name, or integer based index, of the Frame to get from this Texture.
Since: 3.0.0
Source: src/textures/Texture.js (Line 225)
Returns:

The Texture Frame.

Type
Phaser.Textures.Frame

getDataSourceImage( [name])

Given a Frame name, return the data source image it uses to render with. You can use this to get the normal map for an image for example.

This will return the actual DOM Image.

Parameters:
Name Type Argument Description
name string | number <optional>

The string-based name, or integer based index, of the Frame to get from this Texture.
Since: 3.7.0
Source: src/textures/Texture.js (Line 385)
Returns:

The DOM Image or Canvas Element.

Type
HTMLImageElement | HTMLCanvasElement

getFrameNames( [includeBase])

Returns an array with all of the names of the Frames in this Texture.

Useful if you want to randomly assign a Frame to a Game Object, as you can pick a random element from the returned array.

Parameters:
Name Type Argument Default Description
includeBase boolean <optional>
 false

Include the __BASE Frame in the output array?
Since: 3.0.0
Source: src/textures/Texture.js (Line 320)
Returns:

An array of all Frame names in this Texture.

Type
Array.<string>

getFramesFromTextureSource(sourceIndex [, includeBase])

Returns an array of all the Frames in the given TextureSource.

Parameters:
Name Type Argument Default Description
sourceIndex number

The index of the TextureSource to get the Frames from.
includeBase boolean <optional>
 false

Include the __BASE Frame in the output array?
Since: 3.0.0
Source: src/textures/Texture.js (Line 285)
Returns:

An array of Texture Frames.

Type
Array.<Phaser.Textures.Frame>

getSourceImage( [name])

Given a Frame name, return the source image it uses to render with.

This will return the actual DOM Image or Canvas element.

Parameters:
Name Type Argument Description
name string | number <optional>

The string-based name, or integer based index, of the Frame to get from this Texture.
Since: 3.0.0
Source: src/textures/Texture.js (Line 352)
Returns:

The DOM Image, Canvas Element or Render Texture.

Type
HTMLImageElement | HTMLCanvasElement | Phaser.GameObjects.RenderTexture

getTextureSourceIndex(source)

Takes the given TextureSource and returns the index of it within this Texture. If it's not in this Texture, it returns -1. Unless this Texture has multiple TextureSources, such as with a multi-atlas, this method will always return zero or -1.

Parameters:
Name Type Description
source Phaser.Textures.TextureSource

The TextureSource to check.
Since: 3.0.0
Source: src/textures/Texture.js (Line 259)
Returns:

The index of the TextureSource within this Texture, or -1 if not in this Texture.

Type
number

has(name)

Checks to see if a Frame matching the given key exists within this Texture.

Parameters:
Name Type Description
name string

The key of the Frame to check for.
Since: 3.0.0
Source: src/textures/Texture.js (Line 210)
Returns:

True if a Frame with the matching key exists in this Texture.

Type
boolean

remove(name)

Removes the given Frame from this Texture. The Frame is destroyed immediately.

Any Game Objects using this Frame should stop using it before you remove it, as it does not happen automatically.

Parameters:
Name Type Description
name string

The key of the Frame to remove.
Since: 3.19.0
Source: src/textures/Texture.js (Line 181)
Returns:

True if a Frame with the matching key was removed from this Texture.

Type
boolean

setDataSource(data)

Adds a data source image to this Texture.

An example of a data source image would be a normal map, where all of the Frames for this Texture equally apply to the normal map.

Parameters:
Name Type Description
data HTMLImageElement | HTMLCanvasElement | Array.<HTMLImageElement> | Array.<HTMLCanvasElement>

The source image.
Since: 3.0.0
Source: src/textures/Texture.js (Line 422)

setFilter(filterMode)

Sets the Filter Mode for this Texture.

The mode can be either Linear, the default, or Nearest.

For pixel-art you should use Nearest.

The mode applies to the entire Texture, not just a specific Frame of it.

Parameters:
Name Type Description
filterMode Phaser.Textures.FilterMode

The Filter Mode.
Since: 3.0.0
Source: src/textures/Texture.js (Line 448)