Best practice for using layers

[subpixel]

I'd like to write a bomberman-like game with lace.gg using pixi.js v5 as the rendering engine.

I was wondering what the best practices are when it comes to layers. I assume it wouldn't make sense to create 1 layer per game element.

Would it make sense to put everything into 1 layer?
Or should I put the background  (which never changes) into one layer and the rest into another one?
Or should I maybe put all players (constantly moving game elements) into one layer and everything else into another layer?
Or maybe every type of game object should go into one layer? Players, bombs, items, invulnarable blocks, normal blocks, explosions, background ...

I'm also wondering if I should use layers as in:

        this.stage = new PIXI.Container();
        this.backgroundLayer = new PIXI.Container();
        this.mainLayer = new PIXI.Container();

        this.stage.addChild(this.backgroundLayer, this.mainLayer);

or if I should use the pixi.layers plugin?

[ivan.popelyshev]

Yo! Fellow bomber! (look at my avatar)

Do it the way it makes sense based on features of the pixi scene tree. 

Structure of container tree exists to

1. add/remove elements at the same time as their parent. If you remove a bomb - you also remove its shadow, shadow should be its child.

2. transform with parents. If you adjust bomb coordinates - shadow also has to move. If you change camera container coordinates (pivot) - UI cant move, so UI cant be inside camera.

3. all elements are rendered in natural tree-walk order. Filter/masks create extra framebuffer, like, subspace, to deal with elements inside the container. There can be problems with that.

pixi-layers gives more freedom with that:

1. you can mark all shadows that way they are rendered BEFORE all bombs, no relation to container tree order - when special shadowLayer is rendered.

2. AS AN OPTION (NOT BY DEFAULT), layer can be rendered in renderTexture and that texture can be put in sprite/filter/whatever. That gives some lighting effects. https://pixijs.io/examples/#/plugin-layers/lighting.js

3. Cache. Unfortunately, there's no invalidation whether something inside layer texture was changed, so you have to do it on your own and add a flag whether renderTexture should be recalcalated

[subpixel]

I see, so it really makes more sense to talk about containers rather than layers.

So I would create a background container that just contains a background image or something like that.

Then I would create a foreground container that contains all the game elements, but every game element is wrapped into a container so that I can easily add shadows etc later on.

So something like that:

masterContainer
|-backgroundContainer
| |-background graphic
|-mainContainer
| |-blockContainer1
| | |-block graphic
| | |-shadow
| |-blockContainer2
| | |-block graphic
| | |-shadow
| |-blockContainer3
| | |-block graphic
| | |-shadow
| |....
| |-playerContainer1
| | |-player graphic
| | |-player name tag
| | |-shadow
| |-playerContainer2
| | |-player graphic
| | |-player name tag
| | |-shadow
| |....
| |-bombContainer1
| | |-bomb graphic
| | |-shadow
| |-bombContainer2
| | |-bomb graphic
| | |-shadow
| |....
| |-explosionContainer1
| | |-explosion graphic
| | |-shadow
| |-explosionContainer2
| | |-explosion graphic
| | |-shadow
| |....
| |-itemContainer1
| | |-item graphic
| | |-shadow
| |-itemContainer2
| | |-item graphic
| | |-shadow
| |....
| |-itemContainer1
|   |-item graphic
|   |-shadow
|-overlayContainer
  |-scoreContainer
  | |-kills/deaths text
  |-statsContainer
    |-playerSpeedContainer
    | |-player speed icon
    | |-player speed text
    |-playerBombLimitContainer
    | |-player bomb limit icon
    | |-player bomb limit text
    |-playerExplosionRange
      |-player explosion range icon
      |-player explosion range text

 

And when a player moves, I guess I just move his container around etc?

[ivan.popelyshev]

yep. im not sure about blocks, you can use Graphics.beginTextureFill or pixi-tilemap instead of sprites, because there are really many blocks.

[ivan.popelyshev]

Here's repo that uses pure canvas2d, no pixi: https://github.com/ivanpopelyshev/bombermine-shuffle , but you can get some pointers from it. Btw, art is free.

Graphics or pixi-tilemap is good for "clear, then fill with stuff, clear again, fill again"