Pixi Layers - request for an explanation

[newBie here]

Hello
I have problem in understanding how pixi layers work. I want to make some layers like top one, mid and bottom. I want to add players to the top layer, enemies to mid and move dead enemies to bottom layer. I tried to do this, but my sprites are invisible now. Can you provide minimum working code for pixiv4 for my problem?

I init player this way:

this.player = new PIXI.Sprite(texture_hero);
this.player.anchor.set(0.5, 0.7);
this.player.x = cords.x;
this.player.y = cords.y;
this.player.visible = true;
container.addChild(this.player);

 

This is how i init pixi:

var type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
    type = "canvas"
}

const app = new PIXI.Application(1000, 800, {
    transparent: false,
    backgroundColor: '0x000000'
});

document.body.appendChild(app.view);

//var layer = new PIXI.display.Layer();
//stage.addChild(layer);

var container = new PIXI.Container();
app.stage.addChild(container);

My game is quite big and its hard to select code to post it here to explain my problem. If something is unclear i can post more.

Thank you for your time

[ivan.popelyshev]

you need a stage to be `PIXI.display.Stage`, not regular container. Notice 12th line at https://pixijs.io/examples-v4/#/plugin-layers/lighting.js Seems like I forgot to put it in README at https://github.com/pixijs/pixi-layers/tree/layers (its v4 branch)

Also before you actually use layers, you need to clarify why do you need it.

If you want to sort children inside container, there are easier ways, its explained in https://github.com/pixijs/pixi-layers/wiki#how-to-not-use-pixi-display , and there is built-in sort in pixi-v5.

If you need to sort THROUGH THE TREE, like, you have a character which has shadows and HP bar - then layers is the best plugin because it does exactly what you could do manually - it moves HPbar and shadow to another layer but it gives you ability to move and delete them with character itself.

Extra feature is getRenderTexture() , for those who know the power of PIXI.RenderTexture and filters - it helps with lighting of different types: multiplied light, filters light, normals, and I even saw a shadow plugin somewhere... Again, its not usable unless you understand how can you do it manually, its a shortcut.

[newBie here]

Ok, thank you. I used the fast script from https://github.com/pixijs/pixi-layers/wiki#how-to-not-use-pixi-display. Now players are above enemies, it works great. Next problem is: how can i move only one sprite to bottom? When enemy is killed he leaves a blood stain which cover other enemies which were added later than him. I want to move a single sprite from enemiesArray on their death moment to bottom.

Also when i try to add image to my post on this forum i get error:

/var/www/html/uploads/monthly_2019_07 could not be created.
Please contact us for assistance.

So you can see screen shot with my problem here: https://ibb.co/xShxJ1f

[ivan.popelyshev]

Its basic javascript array operations. Or any language array operations. I'm sure you can write your own game

Alternatively, move it in another container that renders before the main one, name it "floorBloodContainer". When you get sick of making extra containers and moving stuff there, start use pixi-layers.

[newBie here]

Ok i did it with second container, thanks. I have trouble with understanding this because it feels for me incomprehensible why it cant be done with simple sprite.zIndex = 1, sprite.zIndex = 2 like in CSS

It is quite complicated for me, but i believe its because canvas limit

 

When i end making this game is it good idea to post link to it here (maybe with source code?) to get some code review, criticism and advice?

Thank you for your help

[ivan.popelyshev]

it can be done with zIndex, just make sure that you call sorting function when its needed. in  pixi-v5 its easier, why dont you use v5?\

yes, games with source are rare and people appreciate it.

[newBie here]

I dont use pixi-v5 because my game is cut and the app is smaller with the same code for pixi-v4 (you can see it in screenshots)

pixi-v5: 

<script src="https://pixijs.download/v5.1.0/pixi.min.js"></script>

 

 

pixi-v4: 

<script src="https://pixijs.download/v4.4.2/pixi.min.js"></script>

I init my game with same code i posted in first post. My game just look better in pixi-v4. Do you now what cause that?

[ivan.popelyshev]

new PIXI.Application({width: 800, height:600, someOtherParams});

thats new one

new PIXI.Application(800, 600, {someOtherParams} );

that's old. 

same with WebGLRenderer / Renderer class.

Its mentioned in https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide#renderer-parameters