Jump to content

Best practice for using layers


subpixel
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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