Sign in to follow this  
KamiFightingSpirit

Quick Question on Pixi-Layers

Recommended Posts

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 by KamiFightingSpirit
superfluous information

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

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.