Skip to main content
Version: Phaser v4.0.0

TextureSource

A Texture Source is the encapsulation of the actual source data for a Texture.

It wraps the raw pixel data — typically an Image Element loaded from the file system or network, a Canvas Element, or a Video Element — and manages the corresponding WebGL texture object used by the renderer. In WebGL mode, the TextureSource creates and owns the WebGLTextureWrapper that is uploaded to the GPU.

You will not usually create a TextureSource directly. Instead, it is created automatically when a Texture is added to the Texture Manager. You can access it via Texture.source, which is an array of TextureSource instances. Most textures have a single source, but multi-atlas textures can have several.

A Texture can contain multiple Texture Sources, which only happens when a multi-atlas is loaded.

Constructor

new TextureSource(texture, source, [width], [height], [flipY])

Parameters

nametypeoptionaldefaultdescription
texturePhaser.Textures.TextureNoThe Texture this TextureSource belongs to.
sourcePhaser.Types.Textures.TextureSourceNoThe source image data.
widthnumberYesOptional width of the source image. If not given it's derived from the source itself.
heightnumberYesOptional height of the source image. If not given it's derived from the source itself.
flipYbooleanYestrueSets the UNPACK_FLIP_Y_WEBGL flag the WebGL Texture uses during upload.

Scope: static

Source: src/textures/TextureSource.js#L13
Since: 3.0.0

Public Members​

compressionAlgorithm​

compressionAlgorithm: number​

Description:

Holds the compressed texture algorithm, or null if it's not a compressed texture.

Prior to Phaser 3.60 this value always held null.

Source: src/textures/TextureSource.js#L95
Since: 3.0.0

flipY​

flipY: boolean​

Description:

Whether the UNPACK_FLIP_Y_WEBGL flag is set on this WebGL Texture during upload. When true, the texture data is flipped vertically as it is uploaded to the GPU.

Source: src/textures/TextureSource.js#L204
Since: 3.20.0

glTexture​

glTexture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper​

Description:

The wrapped WebGL Texture of the source image. If this TextureSource is driven from a WebGLTexture already, then this wrapper contains a reference to that WebGLTexture.

Source: src/textures/TextureSource.js#L192
Since: 3.0.0

height​

height: number​

Description:

The height of the source image. If not specified in the constructor it will check the naturalHeight, videoHeight, and then height properties of the source image.

Source: src/textures/TextureSource.js#L127
Since: 3.0.0

image​

image: Phaser.Types.Textures.TextureSourceElement, null​

Description:

The image data.

This is either an Image element, Canvas element, Video Element, or null if the source is not an HTMLElement. Non-HTMLElement sources include compressed textures, data arrays, and references to other WebGL textures.

Source: src/textures/TextureSource.js#L81
Since: 3.0.0

isCanvas​

isCanvas: boolean​

Description:

Is the source image a Canvas Element?

Source: src/textures/TextureSource.js#L147
Since: 3.0.0

isGLTexture​

isGLTexture: boolean​

Description:

Is the source image a WebGLTextureWrapper?

Source: src/textures/TextureSource.js#L174
Since: 3.19.0

isPowerOf2​

isPowerOf2: boolean​

Description:

Are the source image dimensions a power of two?

Source: src/textures/TextureSource.js#L183
Since: 3.0.0

isRenderTexture​

isRenderTexture: boolean​

Description:

Is the source image a Render Texture?

Source: src/textures/TextureSource.js#L165
Since: 3.12.0

isVideo​

isVideo: boolean​

Description:

Is the source image a Video Element?

Source: src/textures/TextureSource.js#L156
Since: 3.20.0

renderer​

renderer: Phaser.Renderer.Canvas.CanvasRenderer, Phaser.Renderer.WebGL.WebGLRenderer​

Description:

A reference to the Canvas or WebGL Renderer.

Source: src/textures/TextureSource.js#L50
Since: 3.7.0

resolution​

resolution: number​

Description:

The resolution of the source image.

Source: src/textures/TextureSource.js#L107
Since: 3.0.0

scaleMode​

scaleMode: number​

Description:

The Scale Mode the image will use when rendering. Either Linear or Nearest.

Source: src/textures/TextureSource.js#L137
Since: 3.0.0

source​

source: Phaser.Types.Textures.TextureSource​

Description:

The source of the image data.

This is either an Image Element, a Canvas Element, a Video Element, a RenderTexture or a WebGLTextureWrapper.

In Phaser 3.60 and above it can also be a Compressed Texture data object.

Source: src/textures/TextureSource.js#L68
Since: 3.12.0

texture​

texture: Phaser.Textures.Texture​

Description:

The Texture this TextureSource instance belongs to.

Source: src/textures/TextureSource.js#L59
Since: 3.0.0

width​

width: number​

Description:

The width of the source image. If not specified in the constructor it will check the naturalWidth, videoWidth, and then width properties of the source image.

Source: src/textures/TextureSource.js#L117
Since: 3.0.0

Public Methods​

destroy​

<instance> destroy()​

Description:

Destroys this Texture Source and frees associated resources.

In WebGL mode, the underlying WebGL texture is deleted from the GPU via the renderer. If the source is a canvas, it is returned to the CanvasPool. All internal references are then set to null.

Source: src/textures/TextureSource.js#L470
Since: 3.0.0

init​

<instance> init(game)​

Description:

Creates a WebGL Texture, if required, and sets the Texture filter mode.

Parameters:

nametypeoptionaldescription
gamePhaser.GameNoA reference to the Phaser Game instance.

Source: src/textures/TextureSource.js#L217
Since: 3.0.0

setFilter​

<instance> setFilter(filterMode)​

Description:

Sets the Filter Mode for this Texture.

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

For pixel-art you should use Nearest.

Parameters:

nametypeoptionaldescription
filterModePhaser.Textures.FilterModeNoThe Filter Mode.

Source: src/textures/TextureSource.js#L287
Since: 3.0.0

setFlipY​

<instance> setFlipY([value])​

Description:

Sets the UNPACK_FLIP_Y_WEBGL flag for the WebGL Texture during texture upload.

Parameters:

nametypeoptionaldefaultdescription
valuebooleanYestrueShould the WebGL Texture be flipped on the Y axis on texture upload or not?

Source: src/textures/TextureSource.js#L309
Since: 3.20.0

setWrap​

<instance> setWrap(wrapModeS, wrapModeT)​

Description:

Sets the wrap mode for this TextureSource. This is only available for WebGL.

The wrap mode can be one of the following:

  • Phaser.Textures.WrapMode.CLAMP_TO_EDGE

  • Phaser.Textures.WrapMode.REPEAT

  • Phaser.Textures.WrapMode.MIRRORED_REPEAT

Note that only CLAMP_TO_EDGE is supported for non-power of two textures. If another wrap mode is specified for such a texture, it will be ignored.

Tags:

  • webglonly

Parameters:

nametypeoptionaldescription
wrapModeSPhaser.Textures.WrapModeNoThe wrap mode for the S (horizontal) axis.
wrapModeTPhaser.Textures.WrapModeNoThe wrap mode for the T (vertical) axis.

Returns: Phaser.Textures.TextureSource - This TextureSource instance.

Source: src/textures/TextureSource.js#L329
Since: 4.0.0

update​

<instance> update()​

Description:

Update the underlying WebGLTexture with the current source data. This is called automatically by game systems which manage textures, such as Text or Video, or on internal data changes. You should not need to call this method manually unless you are manually updating the source data.

Source: src/textures/TextureSource.js#L361
Since: 3.7.0

updateSize​

<instance> updateSize(width, height)​

Description:

Updates the dimensions of this Texture Source. This is called automatically by game systems which manage textures, such as Text, which renders to a dedicated canvas that changes size.

Parameters:

nametypeoptionaldescription
widthnumberNoThe new width of the source image.
heightnumberNoThe new height of the source image.

Source: src/textures/TextureSource.js#L406
Since: 4.0.0

updateSource​

<instance> updateSource(source)​

Description:

Change the source data of this TextureSource. This will update the underlying WebGLTexture with the new source data.

Note that this will not update any consumers of the texture. Frames and game objects with the Size component will automatically cache width and height on creation, so you will need to update them if you change the resolution of the texture this way.

Parameters:

nametypeoptionaldescription
sourcePhaser.Types.Textures.TextureSourceNoThe new source data.

Source: src/textures/TextureSource.js#L427
Since: 4.0.0