How to change z-index of multiple elements in different files in Phaser?

[weratius]

Hello!

I'm creating a game. There are a lot of interface elements, planets sprites, ships sprites of mobs and other players and so on.

Now I have faced with such a problem: z-index problem.

 

A lot of elements hover each other and that makes me nervous because the last loaded element is the element on the top.

And sometimes ships are under the planets, interface elements are under sprites of ships and planets and so on.

 

I understand that I need to create a group and use "bringtToTop()" method but how can union all elements when they are all in different files?

Should I create a lot of groups for each file and then union them into another big one or what should I do?

 

Thank you for your answer in advance!

 

I will really appreciate that)

 

Good luck!

[AzraelTycka]

You can use groups as layers similar to how you work in photoshop with folders + layers. Basically if you make on group for your UI, one group for background, one group for the stuff between (and so on, depending on your needs), you can adjust things easily in the big picture as well as in the small one (individual groups), just set at the beginning how the order of these groups (or change it later).

 

Btw there are other functions to change z-index of your sprite, check the docs moveDown, moveUp.

 

I'm not entirely sure what you mean by different files, but that probably shouldn't play any role, because your entire JS is put together first before it's interpreted by the browser, so even if you have one file per object fro some reason then you can still add it to one group without any problem.

 

Well I'm not sure if I hit the right spot with this answer correct me if wen in a wrong direction please.

[weratius]

You can use groups as layers similar to how you work in photoshop with folders + layers. Basically if you make on group for your UI, one group for background, one group for the stuff between (and so on, depending on your needs), you can adjust things easily in the big picture as well as in the small one (individual groups), just set at the beginning how the order of these groups (or change it later).

 

Btw there are other functions to change z-index of your sprite, check the docs moveDown, moveUp.

 

I'm not entirely sure what you mean by different files, but that probably shouldn't play any role, because your entire JS is put together first before it's interpreted by the browser, so even if you have one file per object fro some reason then you can still add it to one group without any problem.

 

Well I'm not sure if I hit the right spot with this answer correct me if wen in a wrong direction please.

Sure I do understand everything you said about different files. 

I just gave an example that all of sprites were for special needs

 

And I have already tried to use bringToTop() method but that hadn't solved the problem.

[AzraelTycka]

What I meant is to set your layers this way, and then work with that, you can add individual sprites as well as groups into these layers (groups) any time you want while you keep firm grip on rendering order.

You can use moveUp, moveDown, bringToTop inside layers (not on them because they are teh outermost layers) to change rendering order of subgroups/sprites in these layers if you need to, these methods will only bringToTop/moveDown/moveUp an element to the limits of the group so you can render it outside the groups render position which you set up at the beginning by creating a simple object this.layers = {// layers here}.

 

I tried puting a simple example in fiddle for you (use arrows to move around and see how the layers object sets the order for rendering), you can see how it's done, hope it helps, though still not sure if I caught your problem correctly ;-).

[weratius]

What I meant is to set your layers this way, and then work with that, you can add individual sprites as well as groups into these layers (groups) any time you want while you keep firm grip on rendering order.

You can use moveUp, moveDown, bringToTop inside layers (not on them because they are teh outermost layers) to change rendering order of subgroups/sprites in these layers if you need to, these methods will only bringToTop/moveDown/moveUp an element to the limits of the group so you can render it outside the groups render position which you set up at the beginning by creating a simple object this.layers = {// layers here}.

 

I tried puting a simple example in fiddle for you (use arrows to move around and see how the layers object sets the order for rendering), you can see how it's done, hope it helps, though still not sure if I caught your problem correctly ;-).

That's awesome!!!

 

Thank you very much !!!