PIXI

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)

core/textures/Texture.js, line 36
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

  • EventEmitter

Members

static,constantPIXI.Texture.EMPTY

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

frame

Set the frame.

heightnumber

The height of the Texture in pixels.

rotate

Set the rotation

rotatenumber

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

widthnumber

The width of the Texture in pixels.

Methods

staticPIXI.Texture.addTextureToCache(texture, id)

core/textures/Texture.js, line 424

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.

staticPIXI.Texture.from(source){PIXI.Texture}

core/textures/Texture.js, line 373

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

Name Type Description
source number | string | PIXI.BaseTexture | HTMLCanvasElement | HTMLVideoElement

Source to create texture from
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.fromCanvas(canvas, scaleMode){PIXI.Texture}

core/textures/Texture.js, line 329

Helper function that creates a new Texture based on the given canvas element.

Name Type Default Description
canvas HTMLCanvasElement

The canvas element source of the texture
scaleMode number PIXI.SCALE_MODES.DEFAULT optional

See PIXI.SCALE_MODES for possible values
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.fromFrame(frameId){PIXI.Texture}

core/textures/Texture.js, line 309

Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
The frame ids are created when a Texture packer file has been loaded

Name Type Description
frameId string

The frame Id of the texture in the cache
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.fromImage(imageUrl, crossorigin, scaleMode, sourceScale){PIXI.Texture}

core/textures/Texture.js, line 288

Helper function that creates a Texture object from the given image url.
If the image is not in the texture cache it will be created and loaded.

Name Type Default Description
imageUrl string

The image url of the texture
crossorigin boolean optional

Whether requests should be treated as crossorigin
scaleMode number PIXI.SCALE_MODES.DEFAULT optional

See PIXI.SCALE_MODES for possible values
sourceScale number (auto) optional

Scale for the original image, used with SVG images.
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.fromVideo(video, scaleMode){PIXI.Texture}

core/textures/Texture.js, line 342

Helper function that creates a new Texture based on the given video element.

Name Type Default Description
video HTMLVideoElement | string

The URL or actual element of the video
scaleMode number PIXI.SCALE_MODES.DEFAULT optional

See PIXI.SCALE_MODES for possible values
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.fromVideoUrl(videoUrl, scaleMode){PIXI.Texture}

core/textures/Texture.js, line 360

Helper function that creates a new Texture based on the video url.

Name Type Default Description
videoUrl string

URL of the video
scaleMode number PIXI.SCALE_MODES.DEFAULT optional

See PIXI.SCALE_MODES for possible values
Returns:
Type Description
PIXI.Texture The newly created texture

staticPIXI.Texture.removeTextureFromCache(id){PIXI.Texture}

core/textures/Texture.js, line 436

Remove a texture from the global TextureCache.

Name Type Description
id string

The id of the texture to be removed
Returns:
Type Description
PIXI.Texture The texture that was removed

protected_updateUvs()

core/textures/Texture.js, line 265

Updates the internal WebGL UV cache.

clone(){PIXI.Texture}

core/textures/Texture.js, line 255

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

Returns:
Type Description
PIXI.Texture The new texture

destroy(destroyBase)

core/textures/Texture.js, line 217

Destroys this texture

Name Type Default Description
destroyBase boolean false optional

Whether to destroy the base texture as well

setFrame(frame)

deprecation.js, line 546
Name Type Description
frame PIXI.Rectangle

The frame to set.
Deprecated
  • since version 3.0.0
    See:

    update()

    core/textures/Texture.js, line 167

    Updates this texture on the gpu.

    Events

    update

    core/textures/Texture.js, line 146

    Fired when the texture is updated. This happens if the frame or the baseTexture is updated.