Jump to content

Any sort of depth system?


Recommended Posts

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.

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 8 months later...

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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...