Class ContainerTexture

A Texture that shows a live 2D PixiJS Container

Use it in any material texture slot, on any geometry. To make several textures over one container, build a ContainerSource and create Textures from it.

Unless autoUpdate is on, nothing redraws it. Call ContainerTexture#render after setup and after each change, before you render your scene, or keep a renderer and set autoUpdate for animated content. Until its first render it's transparent black; a renderer option renders it once as it's made, unless firstRender is false.

In an opaque material, the parts the container leaves empty draw black; clearColor says how to keep their edges smooth.

The picture is stored the other way up from an image texture. It shows upright where v grows upward, as on a default PlaneGeometry or a CubeGeometry's sides, and upside down where an image shows upright, as on a SphereGeometry, a plane with flipV, a loaded model or a 2D Sprite. On a sprite, sprite.scale.y = -1 with sprite.anchor.y = 1 turns it over in place.

Example

const label = new ContainerTexture({ container: labelText, resolution: 2 });
sign.material = new FlatMaterial({ baseColorTexture: label });
label.render(app.renderer);

const screen = new ContainerTexture({ container: gameUi, renderer: app.renderer, autoUpdate: true });
monitor.material = new FlatMaterial({ baseColorTexture: screen });

Hierarchy

Texture
- ContainerTexture

Index

Constructors

constructor

new ContainerTexture(options: ContainerSourceOptions): ContainerTexture
Parameters
- options: ContainerSourceOptions
Returns ContainerTexture

Overrides Texture.constructor

Accessors

autoUpdate

get autoUpdate(): boolean
Whether the texture re-renders every frame; ContainerSourceOptions#autoUpdate has the details

Returns boolean
Example
```
screen.autoUpdate = !paused;
```
set autoUpdate(value: boolean): void
Sets whether the texture re-renders every frame
Parameters
- value: boolean
  true to re-render every frame.
Returns void

clearColor

get clearColor(): Color
The colour ContainerSourceOptions#clearColor describes; set it or change this one in place, then render again

Returns Color
Example
```
screen.clearColor = 'black';
screen.render();
```
set clearColor(value: ColorSource): void
Sets the colour the next render clears to
Parameters
- value: ColorSource
  Any ColorSource, such as 'black'.
Returns void

container

get container(): Container
The 2D Container drawn into this texture

Returns Container
Example
```
screen.container.addChild(scoreText);
screen.render();
```

containerSource

get containerSource(): ContainerSource

The ContainerSource behind this texture

Returns ContainerSource

Example

import { Rectangle, Texture } from 'pixi.js';

const corner = new Texture({ source: screen.containerSource, frame: new Rectangle(0, 0, 64, 64) });

renderer

get renderer(): Renderer | null
The renderer kept for ContainerTexture#render calls with no argument, or null

Returns Renderer | null
Example
```
screen.renderer = app.renderer;
screen.render();
```
set renderer(value: Renderer | null): void
Sets the kept renderer
Parameters
- value: Renderer | null
  A renderer, or null to release it.
Returns void

transform

get transform(): Matrix
The capture matrix ContainerSourceOptions#transform describes; change it or assign a new one, then render again

Returns Matrix
Example
```
screen.transform = new Matrix().translate(-scrollX, 0);
screen.render();
```
set transform(value: Matrix): void
Sets the capture matrix, copying value
Parameters
- value: Matrix
  The new capture matrix.
Returns void

Methods

destroy

destroy(options?: boolean | { container?: boolean; source?: boolean }): void
Destroys this texture, and optionally its source and its container

As with pixi's Texture#destroy, destroy() leaves the ContainerSource alive, since other textures may share it, and with ContainerTexture#autoUpdate on, still rendering every frame. destroy(true) frees the source too. The container is yours unless you pass { container: true }, which destroys it with its children and frees the source.
Parameters
- options: boolean | { container?: boolean; source?: boolean } = false
  true also frees the source; an object picks source and container separately.
  - boolean
  - { container?: boolean; source?: boolean }
    
    Optionalcontainer?: boolean
    
    Also destroy the 2D container and its children, which frees the source too
    
    Example
    screen.destroy({ container: true });
    
    Optionalsource?: boolean
    
    Also free the ContainerSource and its render target
    
    Example
    screen.destroy({ source: true });
Returns void
Example
```
screen.destroy(true);
```
Overrides Texture.destroy

render

render(renderer?: Renderer): void
Draws the container into this texture

Call it before you render your scene, never from code that runs during a render. A renderer passed here is kept for later calls with no argument; with none passed or kept, it warns and draws nothing.
Parameters
- Optionalrenderer: Renderer
  Renderer to draw with, kept for later calls; omit to use the kept one.
Returns void
Example
```
scoreText.text = `${score}`;
scoreboard.render(app.renderer);
```

setContainer

setContainer(container: Container): void
Swaps the Container this texture renders, keeping its render target and size

A container other than the current one leaves its parent, the old one is left detached, and the old picture stays until the next ContainerTexture#render.
Parameters
- container: Container
  The new container to render.
Returns void
Example
```
screen.setContainer(pauseMenu);
screen.render();
```

Class ContainerTexture

Example

Hierarchy

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns ContainerTexture

Accessors

autoUpdate

Returns boolean

Example

Parameters

Returns void

clearColor

Returns Color

Example

Parameters

Returns void

container

Returns Container

Example

containerSource

Returns ContainerSource

Example

renderer

Returns Renderer | null

Example

Parameters

Returns void

transform

Returns Matrix

Example

Parameters

Returns void

Methods

destroy

Parameters

Optionalcontainer?: boolean

Example

Optionalsource?: boolean

Example

Returns void

Example

render

Parameters

Returns void

Example

setContainer

Parameters

Returns void

Example

Settings

On This Page

`Optional`container?: boolean

`Optional`source?: boolean