Sign in to follow this  
newBie here

Pixi Layers - request for an explanation

Recommended Posts

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 ;)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :D

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 :)

Share this post


Link to post
Share on other sites

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>

pixiv5.png

 

 

pixi-v4: 

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

pixiv4.png

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.