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:37
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.

static, constantPIXI.Texture.WHITE

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

_framePIXI.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)

baseTexturePIXI.BaseTexture

The base texture that this texture uses.

framePIXI.Rectangle

The frame specifies the region of the base texture that this texture uses.

heightnumber

The height of the Texture in pixels.

noFrameboolean

Does this Texture have any frame data assigned to it?

origPIXI.Rectangle

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

requiresUpdateboolean

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

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

textureCacheIdsArray.<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.

trimPIXI.Rectangle

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

validboolean

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

widthnumber

The width of the Texture in pixels.

Methods

staticPIXI.Texture.addTextureToCache(texture, id)

deprecation.js:881
Name Type Description
texture PIXI.Texture

The Texture to add to the cache.
id string

The id that the texture will be stored against.
Deprecated
  • since 4.5.0
    See:

    staticPIXI.Texture.addToCache(texture, id)

    Texture.js:473

    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

    Texture.js:385

    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
    Returns:
    Type Description
    PIXI.Texture The newly created texture

    staticPIXI.Texture.fromCanvas(canvas, scaleMode, origin)PIXI.Texture

    Texture.js:340

    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.settings.SCALE_MODE optional

    See PIXI.SCALE_MODES for possible values
    origin string 'canvas' optional

    A string origin of who created the base texture
    Returns:
    Type Description
    PIXI.Texture The newly created texture

    staticPIXI.Texture.fromFrame(frameId)PIXI.Texture

    Texture.js:319

    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

    Texture.js:298

    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.settings.SCALE_MODE 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.fromLoader(source, imageUrl, name)PIXI.Texture

    Texture.js:439

    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

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

    Texture.js:353

    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.settings.SCALE_MODE optional

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

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

    Texture.js:371

    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.settings.SCALE_MODE optional

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

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

    Texture.js:502

    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

    staticPIXI.Texture.removeTextureFromCache(id)PIXI.Texture | null

    deprecation.js:896
    Name Type Description
    id string

    The id of the texture to be removed
    Deprecated
    • since 4.5.0
      See:
      Returns:
      Type Description
      PIXI.Texture | null The texture that was removed

      protected_updateUvs()

      Texture.js:275

      Updates the internal WebGL UV cache.

      clone()PIXI.Texture

      Texture.js:265

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

      Returns:
      Type Description
      PIXI.Texture The new texture

      destroy(destroyBase)

      Texture.js:227

      Destroys this texture

      Name Type Default Description
      destroyBase boolean false optional

      Whether to destroy the base texture as well

      setFrame(frame)

      deprecation.js:868
      Name Type Description
      frame PIXI.Rectangle

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

        update()

        Texture.js:177

        Updates this texture on the gpu.

        Events

        update

        Texture.js:147

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

        Name Type Description
        texture PIXI.Texture

        Instance of texture being updated.