PixiJS Container with Transparent Background

[Pepe Becker]

How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container?

My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts:

layer 1 should be rendered beneath the player
layer 2 should be rendered above layer 1
layer 3 should be rendered above the player and above layer 1 and layer 2
layer 4 should be rendered above everything else for debug information

In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?

[xerver]

Containers are not rendered, so they in essence transparent. Each layer is a container. Things in pixi are rendered in the order they appear in the `.children` array, last being on top.

[themoonrat]

Indeed; after I've created my renderer I often create and add containers onto the parent, so I have my layers

this._baseContainer = new PIXI.Container();

this._layers = {};
this._layers['game'] = new PIXI.Container();
this._layers['ui'] = new PIXI.Container();
this._layers['debug'] = new PIXI.Container();

baseContainer.addChild( this._layers['game'], this._layers['ui'], this._layers['debug'] );

I call render on the baseContainer, and then have an api of getLayer( layerName ) for other components to grab a container they can draw to.