PixiJS API Documentation

Class: Texture

PIXI.Texture

A texture stores the information that represents an image or part of an image.

It cannot be added to the display list directly; instead use it as the texture for a Sprite. If no frame is provided for a texture, then the whole image is used.

You can directly create a texture from an image and then reuse it multiple times like this :

import { Sprite, Texture } from 'pixi.js';

const texture = Texture.from('assets/image.png');
const sprite1 = new Sprite(texture);
const sprite2 = new Sprite(texture);

If you didnt pass the texture frame to constructor, it enables noFrame mode: it subscribes on baseTexture events, it automatically resizes at the same time as baseTexture.

Textures made from SVGs, loaded or not, cannot be used before the file finishes processing. You can check for this by checking the sprite's _textureID property.

import { Sprite, Texture } from 'pixi.js';

const texture = Texture.from('assets/image.svg');
const sprite1 = new Sprite(texture);
// sprite1._textureID should not be undefined if the texture has finished processing the SVG file

You can use a ticker or rAF to ensure your sprites load the finished textures after processing. See issue #3085.

new PIXI.Texture (baseTexture, frame, orig, trim, rotate, anchor, borders)

Texture.ts:168

Name	Type	Attributes	Description
`baseTexture`	PIXI.BaseTexture<R>		The base texture source to create the texture from
`frame`	PIXI.Rectangle	<optional>	The rectangle frame of the texture to show
`orig`	PIXI.Rectangle	<optional>	The area of original texture
`trim`	PIXI.Rectangle	<optional>	Trimmed rectangle of original texture
`rotate`	number	<optional>	indicates how the texture was rotated by texture packer. See PIXI.groupD8
`anchor`	IPointData	<optional>	Default anchor point used for sprite placement / rotation
`borders`	PIXI.ITextureBorders	<optional>	Default borders used for 9-slice scaling. See PIXI.NineSlicePlane

Extends

EventEmitter

Members

PIXI.Texture.EMPTY PIXI.Texture<PIXI.Resource> static

An empty texture, used often to not have to create multiple empty textures. Can not be destroyed.

PIXI.Texture.WHITE PIXI.Texture<PIXI.CanvasResource> static

A white texture of 16x16 size, used for graphics and other things Can not be destroyed.

_frame PIXI.Rectangle

This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)

baseTexture PIXI.BaseTexture<R>

The base texture that this texture uses.

defaultAnchor PIXI.Point

Anchor point that is used as default if sprite is created with this texture. Changing the defaultAnchor at a later point of time will not update Sprite's anchor point.

Default Value:

{0,0}

defaultBorders PIXI.ITextureBorders

Default width of the non-scalable border that is used if 9-slice plane is created with this texture.

Since:

7.2.0

See:

PIXI.NineSlicePlane

destroyed boolean readonly

Has the texture been destroyed?

frame PIXI.Rectangle

The frame specifies the region of the base texture that this texture uses. Please call updateUvs() after you change coordinates of frame manually.

height number

The height of the Texture in pixels.

noFrame boolean

Does this Texture have any frame data assigned to it?

This mode is enabled automatically if no frame was passed inside constructor.

In this mode texture is subscribed to baseTexture events, and fires update on any change.

Beware, after loading or resize of baseTexture event can fired two times! If you want more control, subscribe on baseTexture itself.

Any assignment of frame switches off noFrame mode.

Example

texture.on('update', () => {});

orig PIXI.Rectangle

This is the area of original texture, before it was put in atlas.

resolution number readonly

Returns resolution of baseTexture

rotate number

Indicates whether the texture is rotated inside the atlas set to 2 to compensate for texture packer rotation set to 6 to compensate for spine packer rotation can be used to rotate or mirror sprites See PIXI.groupD8 for explanation

textureCacheIds Array<string>

The ids under which this Texture has been added to the texture cache. This is automatically set as long as Texture.addToCache is used, but may not be set if a Texture is added directly to the TextureCache array.

trim PIXI.Rectangle

This is the trimmed area of original texture, before it was put in atlas Please call updateUvs() after you change coordinates of trim manually.

uvMatrix PIXI.TextureMatrix

Default TextureMatrix instance for this texture. By default, that object is not created because its heavy.

valid boolean

This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.

width number

The width of the Texture in pixels.

_updateID number protected

Update ID is observed by sprites and TextureMatrix instances. Call updateUvs() to increment it.

_uvs PIXI.TextureUvs protected

The WebGL UV data cache. Can be used as quad UV.

Methods

PIXI.Texture.addToCache (texture, id) void static

Texture.ts:557

Adds a Texture to the global TextureCache. This cache is shared across the whole PIXI object.

Name	Type	Description
`texture`	PIXI.Texture	The Texture to add to the cache.
`id`	string	The id that the Texture will be stored against.

PIXI.Texture.from (source, options, strict) PIXI.Texture static

Texture.ts:375

Helper function that creates a new Texture based on the source you provide. The source can be - frame id, image url, video url, canvas element, video element, base texture

Name	Type	Attributes	Default	Description
`source`	string \| PIXI.BaseTexture \| HTMLImageElement \| HTMLVideoElement \| ImageBitmap \| PIXI.ICanvas			Source or array of sources to create texture from
`options`	IBaseTextureOptions<RO>			See PIXI.BaseTexture's constructor for options.
`options.pixiIdPrefix`	string	<optional>	pixiid	If a source has no id, this is the prefix of the generated id
`strict`	boolean	<optional>		Enforce strict-mode, see PIXI.settings.STRICT_TEXTURE_CACHE.

Returns:

Type	Description
PIXI.Texture	The newly created texture

PIXI.Texture.fromBuffer (buffer, width, height, options) PIXI.Texture<PIXI.BufferResource> static

Texture.ts:477

Create a new Texture with a BufferResource from a typed array.

Name	Type	Attributes	Default	Description
`buffer`	BufferType			The optional array to use. If no data is provided, a new Float32Array is created.
`width`	number			Width of the resource
`height`	number			Height of the resource
`options`	IBaseTextureOptions<PIXI.IBufferResourceOptions>	<optional>		See PIXI.BaseTexture's constructor for options. Default properties are different from the constructor's defaults.
`options.format`	PIXI.FORMATS	<optional>		The format is not given, the type is inferred from the type of the buffer: `RGBA` if Float32Array, Int8Array, Uint8Array, or Uint8ClampedArray, otherwise `RGBA_INTEGER`.
`options.type`	PIXI.TYPES	<optional>		The type is not given, the type is inferred from the type of the buffer. Maps Float32Array to `FLOAT`, Int32Array to `INT`, Uint32Array to `UNSIGNED_INT`, Int16Array to `SHORT`, Uint16Array to `UNSIGNED_SHORT`, Int8Array to `BYTE`, Uint8Array/Uint8ClampedArray to `UNSIGNED_BYTE`.
`options.alphaMode`	PIXI.ALPHA_MODES	<optional>	PIXI.ALPHA_MODES.NPM
`options.scaleMode`	PIXI.SCALE_MODES	<optional>	PIXI.SCALE_MODES.NEAREST

Returns:

Type	Description
PIXI.Texture<PIXI.BufferResource>	The resulting new BaseTexture

PIXI.Texture.fromLoader (source, imageUrl, name, options) Promise<R<PIXI.Texture>> static

Texture.ts:501

Create a texture from a source and add to the cache.

Name	Type	Attributes	Description
`source`	HTMLImageElement \| HTMLVideoElement \| ImageBitmap \| PIXI.ICanvas \| string		The input source.
`imageUrl`	string		File name of texture, for cache and resolving resolution.
`name`	string	<optional>	Human readable name for the texture cache. If no name is specified, only `imageUrl` will be used as the cache ID.
`options`	IBaseTextureOptions	<optional>

Returns:

Type	Description
Promise<R<PIXI.Texture>>	Output texture

PIXI.Texture.fromURL (url, options) Promise<R<PIXI.Texture>> static

Texture.ts:452

Useful for loading textures via URLs. Use instead of Texture.from because it does a better job of handling failed URLs more effectively. This also ignores PIXI.settings.STRICT_TEXTURE_CACHE. Works for Videos, SVGs, Images.

Name	Type	Attributes	Description
`url`	string \| string[]		The remote URL or array of URLs to load.
`options`	IBaseTextureOptions<RO>	<optional>	Optional options to include

Returns:

Type	Description
Promise<R<PIXI.Texture>>	A Promise that resolves to a Texture.

PIXI.Texture.removeFromCache (texture) PIXI.Texture | null static

Texture.ts:582

Remove a Texture from the global TextureCache.

Name	Type	Description
`texture`	string \| PIXI.Texture	id of a Texture to be removed, or a Texture instance itself

Returns:

Type	Description
PIXI.Texture \| null	The Texture that was removed

castToBaseTexture () PIXI.BaseTexture

Texture.ts:710

Utility function for BaseTexture|Texture cast.

Returns:

Type	Description
PIXI.BaseTexture

clone () PIXI.Texture

Texture.ts:334

Creates a new texture object that acts the same as this one.

Returns:

Type	Description
PIXI.Texture	The new texture

destroy (destroyBase) void

Texture.ts:290

Destroys this texture

Name	Type	Attributes	Default	Description
`destroyBase`	boolean	<optional>	false	Whether to destroy the base texture as well

Fires:

PIXI.Texture#destroyed

update () void

Texture.ts:246

Updates this texture on the gpu.

Calls the TextureResource update.

If you adjusted frame manually, please call updateUvs() instead.

updateUvs () void

Texture.ts:359

Updates the internal WebGL UV cache. Use it after you change frame or trim of the texture. Call it after changing the frame

onBaseTextureUpdated (baseTexture) void protected

Texture.ts:261

Called when the base texture is updated

Name	Type	Description
`baseTexture`	PIXI.BaseTexture	The base texture.