Any sort of depth system?

[Joery]

Hello,

 

I'm creating something to know how Pixi.js works, but I need a depth system and I've no idea if it's implemented in Pixi.js or not.

 

When I add add new sprite(furniture) the 'selector' tile is above it.

 

The code I'm using:

    for (x = 0; x < mapxtiles; x++) {        for (y = 0; y < mapytiles; y++) {            if(map[x][y].height != 'x') {                i++;                var topPos = (x * 16) + (y * 16) - 24;                var leftPos = (y * 32) - (x * 32) + (mapxtiles * 32) - 32;                var normalTileTexture = PIXI.Texture.fromImage("./assets/map/normal.png");                var tileHoverTexture = PIXI.Texture.fromImage("./assets/map/hoverTexture.png");                var tileHover = new PIXI.Sprite(tileHoverTexture);                (function(i) {                    tileArray[i] = new PIXI.Sprite(normalTileTexture);                    tileArray[i].setInteractive(true);                    tileArray[i].mouseover = function (mouseData) {                        tileHover.position = new PIXI.Point(tileArray[i].x - 2, tileArray[i].y + 22);                        floorMap.addChild(tileHover); // This part goes above the furniture                    };                    tileArray[i].hitArea = new PIXI.Polygon([                        new PIXI.Point(32, 24 + 0),                        new PIXI.Point(64, 24 + 16),                        new PIXI.Point(32, 24 + 32),                        new PIXI.Point(0, 24 + 16),                        new PIXI.Point(32, 24 + 0)                    ]);                })(i);                tileArray[i].name = x + "." + y;                tileArray[i].position = new PIXI.Point(leftPos, topPos);                floorMap.addChild(tileArray[i]);            }        }    }// After generating I'll add furniture, tilehover is now above the furniture!var furnitureTexture = new PIXI.Texture.fromImage("./assets/furniture/throne.png");var furniture = new PIXI.Sprite(furnitureTexture);//furniture.zIndex = 10;furniture.position = new PIXI.Point(100, 100);floorMap.addChild(furniture)

Sorry for the horrible explanation :/. 

 

Sorry for my bad English, I'm from the Netherlands.

 

Thanks.

[hubert]

What you are looking for is addChildAt method for sprite

 

http://www.goodboydigital.com/pixijs/docs/classes/Sprite.html#method_addChildAt

 

This will allow you to add children at certain position  since the order of the children is the order how are they being drawn. 

 

You can order the sprites by the sprite.position.y in order:

myContainer.children.sort(function(obj1, obj2) { return obj1.position.y - obj2.position.y; });

This function will help you to manage the order of the sprites inside the container while your character or anything else would move.

var Mover = function(target, from, to) { target.splice(to, 0, target.splice(from, 1)[0]); };if(camera[cam].children[player_position].position.y < camera[cam].children[player_position - 1].position.y){for(var i = player_position; i >= 0; i-- ){if((camera[cam].children[player_position].position.y <= camera[cam].children[i].position.y) && camera[cam].children[i]._class !== 'player'){                                               Mover(camera[cam].children, player_position, i);player_position = i;};                                            };                                        }else if(camera[cam].children[player_position].position.y > camera[cam].children[parseInt(parseInt(player_position) + 1)].position.y){for(var i = parseInt(player_position); i <= camera[cam].children.length; i++ ){if(camera[cam].children[player_position].position.y > camera[cam].children[i].position.y){ Mover(camera[cam].children, parseInt(player_position), i);player_position = i;};                                            } ;                                       };

You can use this sample code as a template to get the idea what happens.

 

REMEMBER THERE IS NO SUCH THING AS Z-INDEX IN PIXI. THE ORDER OF DRAWING THE ELEMENTS DECIDES WHICH IS ON THE TOP AND WHICH IS BEHIND.

 

 

http://www.sevenative.com

[GourmetGorilla]

What benefit does using the camera give us in this situation? Newbie question o.O