PixiJS

https://pixijs.com/guides/
Admin
PixiJS is a 2D rendering engine that uses WebGL to deliver fast performance with a simple API for...
Tokens:1,003
Snippets:16
Trust Score:9.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Create and Add Sprites to Stage

Source: https://pixijs.com/guides/advanced/render-layers

Initializes two sprites, redGuy and blueGuy, and adds them to the stage. The default rendering order will be based on their addition order.

```javascript
const redGuy = new PIXI.Sprite('red guy');
redGuy.tint = 0xff0000;

const blueGuy = new PIXI.Sprite('blue guy');
blueGuy.tint = 0x0000ff;

stage.addChild(redGuy, blueGuy);
```

--------------------------------

### Attach Sprite to a RenderLayer

Source: https://pixijs.com/guides/advanced/render-layers

Creates a RenderLayer, adds it to the stage, and then attaches the redGuy sprite to this layer. This overrides the redGuy's default rendering order, making it render at the layer's position.

```javascript
// a layer..
const layer = new RenderLayer();
stage.addChild(layer);
layer.attach(redGuy);
```

--------------------------------

### Reparent RenderLayer in Scene Graph

Source: https://pixijs.com/guides/advanced/render-layers

Changes the rendering priority of a RenderLayer by reparenting it to a different position in the stage's scene graph. Adding the layer at index 0 ensures it renders first.

```javascript
// reparent the layer to render first in the stage
stage.addChildAt(layer, 0);
```

--------------------------------

### Sorting Children within a RenderLayer

Source: https://pixijs.com/guides/advanced/render-layers

Use zIndex to control the render order of objects within a layer. Enable sortableChildren and call sortRenderLayerChildren to apply the sorting.

```javascript
rect.zIndex = 10; // Higher values render later  
layer.sortableChildren = true; // Enable sorting  
layer.sortRenderLayerChildren(); // Apply the sorting  
```

--------------------------------

### Remove Sprite from Stage and Reattach to Layer

Source: https://pixijs.com/guides/advanced/render-layers

Demonstrates that removing a sprite from its logical parent (the stage) also removes it from its RenderLayer. To re-render it within the layer, it must be explicitly reattached after being added back to the stage.

```javascript
stage.removeChild(redGuy); // if the red guy was removed from the stage, it will also be removed from the layer

// add red guy to his original position
stage.addChildAt(redGuy, 0);

layer.attach(redGuy); // re attach it to the layer again!
```

--------------------------------

### Detach Sprite from RenderLayer

Source: https://pixijs.com/guides/advanced/render-layers

Removes the redGuy sprite from its RenderLayer using `detach`. After detachment, the sprite will render according to its position in the scene graph, not the layer.

```javascript
layer.detach(redGuy); //  Stop rendering the rect via the layer
```
Tokens:
Raw