Quick Question on Pixi-Layers

[KamiFightingSpirit]

Hello! I am back yet again. 

I have a quick question on Pixi-layers: https://github.com/pixijs/pixi-layers

I am building a solar system and want the planets to orbit a sun at it's center. As such, when a planet has  a lower y-value, I want it to automatically be placed in the background (have a lower z-value) and when it has a higher y-value I want it to be placed in the front. 
I saw this example: http://scottmcdonnell.github.io/pixi-examples/index.html?s=display&f=zorder.js&title=Z-order&plugins=pixi-display

However, this is event driven. I want it to be constantly checking the planet's y-position and update the z-index accordingly relative to one another. 

Will pixi-layers work if it's attached to the ticker?

Is there a way to do this without pixi-layers that would be simpler? 

Edited March 19, 2020 by KamiFightingSpirit
superfluous information

[ivan.popelyshev]

If you dont sort through several containers - you dont need pixi-layers, basic v5 sorting should work (look sources of PIXI.Container).

If you want to observe coord changes - learn how "Container.updateTransform" and "Transform.updateTransform" work. There are no true observables in pixi but we have updateID's which are faster but cant be explained without going through all the code."

Really, after that question you have to clone pixi and open it in separate IDE window to watch sources of classes (learn the shortcut of how to find class!) every time you have questions. That will provide you answer faster or give you enough material to make your question more specific.

Edited March 19, 2020 by ivan.popelyshev

[ivan.popelyshev]

pixi-layers entrypoint is https://github.com/pixijs/pixi-layers/blob/master/src/Stage.ts#L134 , its automatically injected in "renderer.render" by plugin. You can call it manually in your ticker handler instead, in that case you have to pass Container and not inner layers stage in renderer.render: https://github.com/pixijs/pixi-layers/blob/master/src/renderers.ts#L34

Also if you start work with tickers and gameloop seriously you just have to know https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop and make your own Application class. Here's hard example with layers, and architecture: https://codesandbox.io/s/tender-franklin-iycmu

[KamiFightingSpirit]

Do you mean, /** @class */ for how to search for a class?

[KamiFightingSpirit]

Took me a bit of thinking, but got what I needed with the following (where planetOrbitControlArr is an array of all my planet objects):

           

planetOrbitControlArr.map(planet => {

 planet.graphic.zIndex = Math.floor(planet.graphic.position.y);

    });

[ivan.popelyshev]

Good! I thought that solution was obvious.

In fact, pixi-layers does the same thing:

Here's the line with array mapping: https://github.com/pixijs/pixi-layers/blob/master/src/Layer.ts#L176

Here's how its being specified in layers - look at https://pixijs.io/examples/#/plugin-layers/zorder.js line 13

The more you work with vanilla pixi and learn layering, the more you will understand about pixi-layers plugin: it work results in exact same thing that people code manually.

[KamiFightingSpirit]

Yeah, it's just hard for me to know what is possible with my stage in development. I'm always worried about spending hours on something which is an obvious dead end to someone with more experience.
I am reading through the source code more and it is helpful and I have gotten used to reading the API docs which is awesome, but there is still a lot of experience I need in order for the source code to be as helpful as I know it can be. That will come in time. I'm learning a ton through this project and this community!