Jump to content

PixiJS Container with Transparent Background

Pepe Becker

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...