Class Texture<R>

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]https://github.com/pixijs/pixijs/issues/3085.

Memberof

PIXI

Type Parameters

R extends Resource = Resource
The BaseTexture's Resource type.

Hierarchy (View Summary)

Texture
Pixi.utils.EventEmitter
- Texture
  - RenderTexture

Index

Constructors

constructor

new Texture<R extends Resource = Resource>(
    baseTexture: BaseTexture<R>,
    frame?: Rectangle,
    orig?: Rectangle,
    trim?: Rectangle,
    rotate?: number,
    anchor?: IPointData,
    borders?: ITextureBorders,
): Texture<R>
Type Parameters
- R extends Resource = Resource
Parameters
- baseTexture: BaseTexture<R>
  The base texture source to create the texture from
- Optionalframe: Rectangle
  The rectangle frame of the texture to show
- Optionalorig: Rectangle
  The area of original texture
- Optionaltrim: Rectangle
  Trimmed rectangle of original texture
- Optionalrotate: number
  indicates how the texture was rotated by texture packer. See PIXI.groupD8
- Optionalanchor: IPointData
  Default anchor point used for sprite placement / rotation
- Optionalborders: ITextureBorders
  Default borders used for 9-slice scaling. See PIXI.NineSlicePlane
Returns Texture<R>
Inherited from EventEmitter.constructor

Properties

_frame

_frame: 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

baseTexture: BaseTexture<R>

The base texture that this texture uses.

defaultAnchor

defaultAnchor: 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

{0,0}

`Optional`defaultBorders

defaultBorders?: 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

`Readonly`destroyed

destroyed: boolean

Has the texture been destroyed?

noFrame

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

orig: Rectangle

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

textureCacheIds

textureCacheIds: 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

trim: 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

uvMatrix: TextureMatrix

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

valid

valid: boolean

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

`Static`prefixed

prefixed: string | boolean

Accessors

frame

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

Returns Rectangle
set frame(frame: Rectangle): void
Parameters
- frame: Rectangle
Returns void

height

get height(): number
The height of the Texture in pixels.

Returns number

resolution

get resolution(): number
Returns resolution of baseTexture

Returns number

rotate

get 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

Returns number
set rotate(rotate: number): void
Parameters
- rotate: number
Returns void

width

get width(): number
The width of the Texture in pixels.

Returns number

`Static`EMPTY

get EMPTY(): Texture<Resource>
An empty texture, used often to not have to create multiple empty textures. Can not be destroyed.

Returns Texture<Resource>

`Static`WHITE

get WHITE(): Texture<CanvasResource>
A white texture of 16x16 size, used for graphics and other things Can not be destroyed.

Returns Texture<CanvasResource>

Methods

addListener

addListener<T extends string | symbol>(
    event: T,
    fn: (...args: any[]) => void,
    context?: any,
): this
Type Parameters
- T extends string | symbol
Parameters
- event: T
- fn: (...args: any[]) => void
- Optionalcontext: any
Returns this
Inherited from EventEmitter.addListener

castToBaseTexture

castToBaseTexture(): BaseTexture
Utility function for BaseTexture|Texture cast.

Returns BaseTexture

clone

clone(): Texture
Creates a new texture object that acts the same as this one.

Returns Texture
- The new texture

destroy

destroy(destroyBase?: boolean): void
Destroys this texture
Parameters
- OptionaldestroyBase: boolean
  Whether to destroy the base texture as well
Returns void
Fires
PIXI.Texture#destroyed

emit

emit<T extends string | symbol>(event: T, ...args: any[]): boolean
Calls each of the listeners registered for a given event.
Type Parameters
- T extends string | symbol
Parameters
- event: T
- ...args: any[]
Returns boolean
Inherited from EventEmitter.emit

eventNames

eventNames(): (string | symbol)[]
Return an array listing the events for which the emitter has registered listeners.

Returns (string | symbol)[]
Inherited from EventEmitter.eventNames

listenerCount

listenerCount(event: string | symbol): number
Return the number of listeners listening to a given event.
Parameters
- event: string | symbol
Returns number
Inherited from EventEmitter.listenerCount

listeners

listeners<T extends string | symbol>(event: T): ((...args: any[]) => void)[]
Return the listeners registered for a given event.
Type Parameters
- T extends string | symbol
Parameters
- event: T
Returns ((...args: any[]) => void)[]
Inherited from EventEmitter.listeners

off

off<T extends string | symbol>(
    event: T,
    fn?: (...args: any[]) => void,
    context?: any,
    once?: boolean,
): this
Type Parameters
- T extends string | symbol
Parameters
- event: T
- Optionalfn: (...args: any[]) => void
- Optionalcontext: any
- Optionalonce: boolean
Returns this
Inherited from EventEmitter.off

on

on<T extends string | symbol>(
    event: T,
    fn: (...args: any[]) => void,
    context?: any,
): this
Add a listener for a given event.
Type Parameters
- T extends string | symbol
Parameters
- event: T
- fn: (...args: any[]) => void
- Optionalcontext: any
Returns this
Inherited from EventEmitter.on

once

once<T extends string | symbol>(
    event: T,
    fn: (...args: any[]) => void,
    context?: any,
): this
Add a one-time listener for a given event.
Type Parameters
- T extends string | symbol
Parameters
- event: T
- fn: (...args: any[]) => void
- Optionalcontext: any
Returns this
Inherited from EventEmitter.once

removeAllListeners

removeAllListeners(event?: string | symbol): this
Remove all listeners, or those of the specified event.
Parameters
- Optionalevent: string | symbol
Returns this
Inherited from EventEmitter.removeAllListeners

removeListener

removeListener<T extends string | symbol>(
    event: T,
    fn?: (...args: any[]) => void,
    context?: any,
    once?: boolean,
): this
Remove the listeners of a given event.
Type Parameters
- T extends string | symbol
Parameters
- event: T
- Optionalfn: (...args: any[]) => void
- Optionalcontext: any
- Optionalonce: boolean
Returns this
Inherited from EventEmitter.removeListener

update

update(): void
Updates this texture on the gpu.

Calls the TextureResource update.

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

Returns void

updateUvs

updateUvs(): void
Updates the internal WebGL UV cache. Use it after you change frame or trim of the texture. Call it after changing the frame

Returns void

`Static`addToCache

addToCache(texture: Texture, id: string): void
Adds a Texture to the global TextureCache. This cache is shared across the whole PIXI object.
Parameters
- texture: Texture
  The Texture to add to the cache.
- id: string
  The id that the Texture will be stored against.
Returns void

`Static`from

from<R extends Resource = Resource, RO = any>(
    source: TextureSource | TextureSource[],
    options?: IBaseTextureOptions<RO>,
    strict?: boolean,
): Texture<R>
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
Type Parameters
- R extends Resource = Resource
- RO = any
Parameters
- source: TextureSource | TextureSource[]
  Source or array of sources to create texture from
- Optionaloptions: IBaseTextureOptions<RO>
  See PIXI.BaseTexture's constructor for options.
  - OptionalalphaMode?: ALPHA_MODES
  - OptionalanisotropicLevel?: number
  - Optionalformat?: FORMATS
  - Optionalheight?: number
  - Optionalmipmap?: MIPMAP_MODES
  - Optionalmultisample?: MSAA_QUALITY
  - OptionalpixiIdPrefix?: string
  - Optionalresolution?: number
  - OptionalresourceOptions?: RO
  - OptionalscaleMode?: SCALE_MODES
  - Optionaltarget?: TARGETS
  - Optionaltype?: TYPES
  - Optionalwidth?: number
  - OptionalwrapMode?: WRAP_MODES
- Optionalstrict: boolean
  Enforce strict-mode, see PIXI.settings.STRICT_TEXTURE_CACHE.
Returns Texture<R>
The newly created texture

`Static`fromBuffer

fromBuffer(
    buffer: BufferType,
    width: number,
    height: number,
    options?: IBaseTextureOptions<IBufferResourceOptions>,
): Texture<BufferResource>
Create a new Texture with a BufferResource from a typed array.
Parameters
- 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
- Optionaloptions: IBaseTextureOptions<IBufferResourceOptions>
  See PIXI.BaseTexture's constructor for options. Default properties are different from the constructor's defaults.
  - OptionalalphaMode?: ALPHA_MODES
  - OptionalanisotropicLevel?: number
  - Optionalformat?: FORMATS
  - Optionalheight?: number
  - Optionalmipmap?: MIPMAP_MODES
  - Optionalmultisample?: MSAA_QUALITY
  - OptionalpixiIdPrefix?: string
  - Optionalresolution?: number
  - OptionalresourceOptions?: RO
  - OptionalscaleMode?: SCALE_MODES
  - Optionaltarget?: TARGETS
  - Optionaltype?: TYPES
  - Optionalwidth?: number
  - OptionalwrapMode?: WRAP_MODES
Returns Texture<BufferResource>
- The resulting new BaseTexture

`Static`fromLoader

fromLoader<R extends Resource = Resource>(
    source: string | ImageSource,
    imageUrl: string,
    name?: string,
    options?: IBaseTextureOptions<any>,
): Promise<Texture<R>>
Create a texture from a source and add to the cache.
Type Parameters
- R extends Resource = Resource
Parameters
- source: string | ImageSource
  The input source.
- imageUrl: string
  File name of texture, for cache and resolving resolution.
- Optionalname: string
  Human readable name for the texture cache. If no name is specified, only imageUrl will be used as the cache ID.
- Optionaloptions: IBaseTextureOptions<any>
Returns Promise<Texture<R>>
- Output texture

`Static`fromURL

fromURL<R extends Resource = Resource, RO = any>(
url: string | string[],
options?: IBaseTextureOptions<RO>,
): Promise<Texture<R>>
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.
Type Parameters
- R extends Resource = Resource
- RO = any
Parameters
- url: string | string[]
  The remote URL or array of URLs to load.
- Optionaloptions: IBaseTextureOptions<RO>
  Optional options to include
Returns Promise<Texture<R>>
- A Promise that resolves to a Texture.

`Static`removeFromCache

removeFromCache(texture: string | Texture<Resource>): null | Texture<Resource>
Remove a Texture from the global TextureCache.
Parameters
- texture: string | Texture<Resource>
  id of a Texture to be removed, or a Texture instance itself
Returns null | Texture<Resource>
- The Texture that was removed

Class Texture<R>

Memberof

Type Parameters

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns Texture<R>

Properties

_frame

baseTexture

defaultAnchor

Default

OptionaldefaultBorders

Since

See

Readonlydestroyed

noFrame

Example

orig

textureCacheIds

trim

uvMatrix

valid

Staticprefixed

Accessors

frame

Returns Rectangle

Parameters

Returns void

height

Returns number

resolution

Returns number

rotate

Returns number

Parameters

Returns void

width

Returns number

StaticEMPTY

Returns Texture<Resource>

StaticWHITE

Returns Texture<CanvasResource>

Methods

addListener

Type Parameters

Parameters

Returns this

castToBaseTexture

Returns BaseTexture

clone

Returns Texture

destroy

Parameters

Returns void

Fires

emit

Type Parameters

Parameters

Returns boolean

eventNames

Returns (string | symbol)[]

listenerCount

Parameters

Returns number

listeners

Type Parameters

Parameters

Returns ((...args: any[]) => void)[]

off

Type Parameters

Parameters

Returns this

`Optional`defaultBorders

`Readonly`destroyed

`Static`prefixed

`Static`EMPTY

`Static`WHITE

`Static`addToCache

`Static`from

`Optional`alphaMode?: ALPHA_MODES

`Optional`anisotropicLevel?: number

`Optional`format?: FORMATS

`Optional`height?: number

`Optional`mipmap?: MIPMAP_MODES

`Optional`multisample?: MSAA_QUALITY

`Optional`pixiIdPrefix?: string

`Optional`resolution?: number

`Optional`resourceOptions?: RO

`Optional`scaleMode?: SCALE_MODES

`Optional`target?: TARGETS

`Optional`type?: TYPES

`Optional`width?: number

`Optional`wrapMode?: WRAP_MODES

`Static`fromBuffer

`Optional`alphaMode?: ALPHA_MODES

`Optional`anisotropicLevel?: number

`Optional`format?: FORMATS

`Optional`height?: number

`Optional`mipmap?: MIPMAP_MODES

`Optional`multisample?: MSAA_QUALITY

`Optional`pixiIdPrefix?: string

`Optional`resolution?: number

`Optional`resourceOptions?: RO

`Optional`scaleMode?: SCALE_MODES

`Optional`target?: TARGETS

`Optional`type?: TYPES

`Optional`width?: number

`Optional`wrapMode?: WRAP_MODES

`Static`fromLoader

`Static`fromURL

`Static`removeFromCache