add sprite to layers ?

[jonlepage]

@ivanpopelyshev
hey, thank you first and bravos.
I just rewrote all Update core Rmmv with pixi-display.js
Your plugin allows me to get amazing performances in my little project RMMV!
Performance && setup preview:
https://youtu.be/8oGkRMTnReQ

Now my project can old more than 400 interactive events on a map with spines
Before only 100!! and a lot fps drop with the basic rmmv z rendering core.
My actual config on my map are:

• all tree have 32 vertice * 6 bones * 400!
• all element are auto update by detect Y for z-Index
• 8MB gpu memory only for the live map rendering!
• 1600*900 Resolution
• map a 3400 * 2000 px
• fake physic update for hairs and hands

i have question about how add i can add elements to a layer groups
in my example i have

var groupMap = new PIXI.display.Group(0, true);// all element type map 
var lG_groupMap = new PIXI.display.Layer(groupMap);
this.addChild(lG_groupMap); //ELEMENTS MAPS

why i can add specific element to lG_groupMap
example i need to do

this.addChild(spriteElement); // work
//but 
lG_groupMap.addChild(spriteElement); // not Work ??

full code experimental code

Stage.prototype = Object.create(PIXI.display.Stage.prototype); // 
Stage.prototype.constructor = Stage;

Stage.prototype.initialize = function() {
    PIXI.display.Stage.call(this);
    // The interactive flag causes a memory leak.
    this.interactive = false;
    this.group.enableSort = true;
};
// LAYERS SYSTEM ASIGNATION FOR ZINDEX ZORDER :see pixi-display.js
//↓↓↓□-▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇-□-Spriteset_Map-□-▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇-□↓↓↓//
Spriteset_Base.prototype.initialize = function() {
    Sprite.prototype.initialize.call(this);
    //this.setFrame(0, 0, Graphics.width, Graphics.height);
    //this._tone = [0, 0, 0, 0];
    this.opaque = true;
    this.createLowerLayer();
    //this.createToneChanger();
    //this.createUpperLayer();
    this.update();
};

Spriteset_Base.prototype.update = function() {
    Sprite.prototype.update.call(this);
    //this.updateScreenSprites();
    //this.updateToneChanger();
    this.updatePosition();
};

Spriteset_Map.prototype.update = function() {
    Spriteset_Base.prototype.update.call(this);
    //this.updateTileset();
    this.updateParallax();
    //this.updateTilemap();
    //this.updateShadow();
    //this.updateWeather();
};


// LAYER ASIGNATION TO MAP
Spriteset_Map.prototype.createLowerLayer = function() {
    Spriteset_Base.prototype.createLowerLayer.call(this);
    var groupMap = new PIXI.display.Group(0, true);// all element type map 
    var groupGui = new PIXI.display.Group(1, true);// all element type guy over map
    var groupMenu = new PIXI.display.Group(2, true);// all element menue show
    var lG_groupMap = new PIXI.display.Layer(groupMap);
    var lG_groupGui = new PIXI.display.Layer(groupGui);
    var lG_groupMenu = new PIXI.display.Layer(groupMenu);

    this.addChild(lG_groupMap); //ELEMENTS MAPS
    this.addChild(lG_groupGui); // GUI
    this.addChild(lG_groupMenu); // MENU
    this.createParallax(); // Create parralaxe and add parralaxe layers
    //this.createTilemap();
    this.createCharacters(lG_groupMap, groupMap); // pass as para the groupe 
    //this.createShadow();
    //this.createDestination(); // TODO: OK
    //this.createWeather();
    this.createPixiSA(groupMap);
};

    Spriteset_Map.prototype.createParallax = function() {
        this._parallax = new TilingSprite();
        this._parallax.move(0, 0, Graphics.width, Graphics.height);
        this._baseSprite.addChild(this._parallax);
    };

// create and assign a elements to groupe 
    Spriteset_Map.prototype.createCharacters = function(lG, G) { // lG_groupMap, group
        this._characterSprites = [];
        $gameMap.events().forEach(function(event) {
            this._characterSprites.push(new Sprite_Character(event));
        }, this);
        $gamePlayer.followers().reverseEach(function(follower) {
            this._characterSprites.push(new Sprite_Character(follower));
        }, this);
        this._characterSprites.push(new Sprite_Character($gamePlayer));
        for (var i = 0; i < this._characterSprites.length; i++) {
            var element = this._characterSprites[i];
            this.addChild(element); // add self 
            element.parentGroup = G; // zIndex= local , zOrder = global
            element.zIndex = 0;
            element.y
            console.log(' element.y: ',  element.y);
            console.log(' this._characterSprites[i]: ',  this._characterSprites[i],this._characterSprites[i]._characterName);
        }
    };

    Sprite_Character.prototype.updatePosition = function() {
        this.x = this._character.screenX();
        this.y = this._character.screenY();
        //this.z = this._character.screenZ();
        this.zIndex = this.y; // PIXI-LAYER.JS UPDATE INDEX GROUPE
    };

    // ADD ALL ELEMENT PIXI SPRITE 
    Spriteset_Map.prototype.createPixiSA = function() {
        console.log('createPixiSA: ', 'createPixiSA');
        
      
    };

thank for help if you have time

[ivanpopelyshev]

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.

[ivanpopelyshev]

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?

[jonlepage]

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.

[ivanpopelyshev]

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.

[jonlepage]

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...

[jonlepage]

@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.

[ivanpopelyshev]

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

[ivanpopelyshev]

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.

[ivanpopelyshev]

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

[jonlepage]

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.

[jonlepage]

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.

[ivanpopelyshev]

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

[jonlepage]

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.

[ivanpopelyshev]

You are the master of pivots!