add sprite to layers ? about layers HOT 14 CLOSED

yeah, that's why its that difficult. And I actually have code that can split sprites and render them, without extra Sprite instances. Its just, its not production-ready and it would be very difficult to setup in your project, we need to work with it in more controlled environment first, and I have to spend time e.t.c. :)

from layers.

Ok, imagine that you have a stage, and layer+container inside.

var stage = app.stage ; //new PIXI.display.Stage();
var layer = new PIXI.display.Layer();
var container = new PIXI.Container();
var sprite = new PIXI.Sprite();
stage.addChild(layer);
stage.addChild(container);
container.addChild(sprite);

You tell sprite inside container that it has to be rendered inside layer:

sprite.parentLayer = layer;

before rendering, sprite is added to special list of layer:

console.log(layer._sortedChildren[0] === sprite); //TRUE!

now sprite will be rendered inside layer instead of his parent container.

The question is: what are groups and why do we need them here?

Imagine that you have a function that creates a composite element:

function createCharacter() {
   var char = new PIXI.Container();
   var shadow = new PIXI.Sprite();
   var body = new PIXI.Sprite();
   char.addChild(shadow);
   char.addChild(body);
   shadow.parentLayer = shadowLayer;
   return char;
}

Body is rendered in natural order, but shadow is rendered in shadow layer behind everything else. The problem is that function might have no access to stage or layer

Stage or layers can be re-created every time you load new level. We need something independent from them - that's a group.

var shadowGroup = new PIXI.display.Group(0, true); //sort those bitches! also 0 doesnt mean anything in pixi-layers.

//layer, when stage is created
var layer = new PIXI.display.Layer(shadowGroup);

//somewhere else, independent from everything
shadow.parentGroup = shadowGroup;

Group is global constant, its a marker.

from layers.

Why dont I use numbers (z-index) to mark things instead of groups? That's my original idea: its easier to mark with objects because we can use this object as a temporary bucket to sort all things inside.

Imagine that we have 1000 objects, and 2 are special: one is behind everything and one is above. With my approach, these are three groups: one behind, one above and one that has rest of elements (998), we sort only 3 groups. In naive, we have 1000 elements that we have to sort by z-indices. Sort(3) or Sort(1000) , which one is faster?

from layers.

ok ok thank a lot , this help me a lot to understand.
You are awesome.
in fact I want to splitter into 3 categories of elements
if I understood well then I must create 3 group

  var groupMap = new PIXI.display.Group(0, true); // all elements on map
    var groupGui = new PIXI.display.Group(1, true); // all GUI over the map
    var groupMenu = new PIXI.display.Group(2, true); // all ,menu over the map and gui

I will try to study and translate a little more what you your say upper and make more test.
Thank a lot, you are help me a lot.

from layers.

You dont have to enable sort inside every group, you can pass second param as false when you need natural order of things. Do remember that pixi-layers uses sort every frame, and its better to not use it if you can use natural tree order.

from layers.

ok tank.
this are awesome.!
I did not have too much confidence in your layer system.
I developed a unique system for the layers!
Your code is superior in performance, I have to change everything.
Thank you very much.

I keep you updated...

from layers.

@ivanpopelyshev
I made myself a mini basic Sketch to try to evaluate an approach.
Imagine that game will can allow 3 level deep. (Group)

Example here, I have a special house, that the player will be able to move on the roof.
The house builded with 3 sprites splitted in 3 level.
White: level0
Red: level1
Green: level2

The character is assigned by default at level 0, for the moment all is well.
The player rendering is done correctly, in front and behind the house with the Z sort by Y.

If I want to jump up the character on the roof, I can easly transfer it to level 2
In this example, everything is fine.

The problems begin at the moment when there is superposition of 2 levels on the character.
I can not think of a possible solution to correct this type of problem.
The top of the character is obviously at the same level as the feet.

I wonder if this shows the limit of your plugin, or it is possible to find a small hack to work around the problem, without radically making too complicated the process.
Knowing that I use the Y value to get the Z sorting of all sprite in a level.
You have ideas or suggestions?

to make this kind of sprite I will probably map to photoshop and use the atlas to export with texturePacker.

from layers.

I have a solution but it is not packaged into a plugin, and its hardcore.

The problem is that you have to do topological sort for objects, it cant be done with Arrays.sort . For some cases, you have to dissect sprite into two parts.

The main feature of my plugin is sorting by layers and within the layer you can do your own stuff.

If i give you the code, I also would have to spend some time explaining how it works and I certainly dont have time right now. May be in a month.

Try do some hacks for now, use both Y and Z in sorting that suits your case. The problem is that for every solution you can also imagine a new case that breaks it :)

from layers.

The thing you are asking is a hard work and certainly is behind the limits of pixi open-source space. People pay me for that kind of solutions suited for specific projects, and I'm working on one right now.

from layers.

We can try collaborate on it in a month or two :)

from layers.

ok, i'll try some hack and different technique.
I have a pretty simple idea, I will have to experiment in real.

split characters in 2 part (the upper body alway have +1 level) or maybe something like that.
this can be easy with sprite bitmap.

here a very small example for give a idea

if (!this._upperBody) {
     this._upperBody = new Sprite();
     this._upperBody.anchor.x = 0.5;
     this._upperBody.anchor.y = 1;
     this.addChild(this._upperBody);
 }
 if (!this._lowerBody) {
     this._lowerBody = new Sprite();
     this._lowerBody.anchor.x = 0.5;
     this._lowerBody.anchor.y = 1;
     this.addChild(this._lowerBody);
 }

but the real issue are all my game made with Spine.
I can not see myself splitting a character or a house spine 2d in 2 or 3!!
well, i will try some experimentation with different logics.
and see where that could lead me.

from layers.

where to find a way to assign a value to the bones.|
a valur thats this plugin will can sort Z and also the level groupe!
I'll see if it can work.

from layers.

well my problem are solved, i experimente different solution with my map editor, and everything is simply happening in a good management of the pivots in the workflow.
I just needed a visual tool to understand how to proceed.

I will also add switches on some sprites, which will be transferred to the layer at the same time as the heroes.

thank you very much for your suggestions and your plugin, I hope that you continue to improve it, is very well done.

from layers.

You are the master of pivots!

from layers.