PixiJS

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 then the whole image is used.

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

let texture = PIXI.Texture.fromImage('assets/image.png');
let sprite1 = new PIXI.Sprite(texture);
let sprite2 = new PIXI.Sprite(texture);

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.

var texture = PIXI.Texture.fromImage('assets/image.svg');
var sprite1 = new PIXI.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 #3068.

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

Texture.js:38
Name Type Description
baseTexture PIXI.BaseTexture

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

Extends

Members

PIXI.Texture.EMPTY staticconstant

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

PIXI.Texture.WHITE staticconstant

A white texture of 10x10 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

The base texture that this texture uses.

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?

orig PIXI.Rectangle

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

requiresUpdate boolean

This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)

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.

Methods

PIXI.Texture.addToCache (texture, id) static

Texture.js:385

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)PIXI.Texture static

Texture.js:284

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 Description
source number | string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | PIXI.BaseTexture

Source to create texture from
options object optional

See PIXI.BaseTexture's constructor for options.
Returns:
Type Description
PIXI.Texture The newly created texture

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

Texture.js:328

Create a new Texture with a BufferResource from a Float32Array. RGBA values are floats from 0 to 1.

Name Type Description
buffer Float32Array | UintArray

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 object optional

See PIXI.BaseTexture's constructor for options.
Returns:
Type Description
PIXI.Texture The resulting new BaseTexture

PIXI.Texture.fromLoader (source, imageUrl, name)PIXI.Texture static

Texture.js:343

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

Name Type Description
source HTMLImageElement | HTMLCanvasElement

The input source.
imageUrl String

File name of texture, for cache and resolving resolution.
name String optional

Human readible name for the texture cache. If no name is specified, only imageUrl will be used as the cache ID.
Returns:
Type Description
PIXI.Texture Output texture

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

Texture.js:411

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

clone ()PIXI.Texture

Texture.js:253

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

Returns:
Type Description
PIXI.Texture The new texture

destroy (destroyBase)

Texture.js:216

Destroys this texture

Name Type Default Description
destroyBase boolean false optional

Whether to destroy the base texture as well

update ()

Texture.js:181

Updates this texture on the gpu.

updateUvs ()

Texture.js:262

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