PIXI

Class: RenderTexture

PIXI. RenderTexture

A RenderTexture is a special texture that allows any Pixi display object to be rendered to it.

Hint: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded
otherwise black rectangles will be drawn instead.

A RenderTexture takes a snapshot of any Display Object given to its render method. For example:

let renderer = PIXI.autoDetectRenderer(1024, 1024, { view: canvas, ratio: 1 });
let renderTexture = PIXI.RenderTexture.create(800, 600);
let sprite = PIXI.Sprite.fromImage("spinObj_01.png");

sprite.position.x = 800/2;
sprite.position.y = 600/2;
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;

renderer.render(sprite, renderTexture);

The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0
you can clear the transform


sprite.setTransform()

let renderTexture = new PIXI.RenderTexture.create(100, 100);

renderer.render(sprite, renderTexture);  // Renders to center of RenderTexture

new PIXI.RenderTexture(baseRenderTexture, frame)

core/textures/RenderTexture.js, line 43
Name Type Description
baseRenderTexture PIXI.BaseRenderTexture

The renderer used for this RenderTexture
frame PIXI.Rectangle optional

The rectangle frame of the texture to show

Extends

Members

_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

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.RenderTexture.create(width, height, scaleMode, resolution){PIXI.RenderTexture}

core/textures/RenderTexture.js, line 125

A short hand way of creating a render texture.

Name Type Default Description
width number 100 optional

The width of the render texture
height number 100 optional

The height of the render texture
scaleMode number PIXI.settings.SCALE_MODE optional

See PIXI.SCALE_MODES for possible values
resolution number 1 optional

The resolution / device pixel ratio of the texture being generated
Returns:
Type Description
PIXI.RenderTexture The new render texture

inherited protected_updateUvs()

core/textures/Texture.js, line 265

Updates the internal WebGL UV cache.

inherited 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

inherited 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

resize(width, height, doNotResizeBaseTexture)

core/textures/RenderTexture.js, line 100

Resizes the RenderTexture.

Name Type Description
width number

The width to resize to.
height number

The height to resize to.
doNotResizeBaseTexture boolean

Should the baseTexture.width and height values be resized as well?

inherited setFrame(frame)

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

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

    inherited update()

    core/textures/Texture.js, line 167

    Updates this texture on the gpu.

    Events

    inherited update

    core/textures/Texture.js, line 146

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