Jump to content

zIndex + updateTransform doing nothing, sortChildren doesn't exist?


Recommended Posts

I'm confused. It seems to me I'm doing what the docs say. But zIndex still seems to do nothing.

From the docs:


The zIndex of the displayObject. If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other displayObjects within the same container.

As you see, I add two sprites, add them to a container which I set "sortableChildren" on. On each sprite I set the zIndex. I later call updateTransform which is said to update the zIndex. I also tried calling "sortChildren" which the docs say will sort the children of a container by the zIndex, but the function seems to not exist.

As you see the test sprite (a red and green square) is rendered. If you move the player section to after the test section, then a little man sprite is rendered on top of the squares. No matter what I set the zIndex to, nothing seems to change. What am I doing wrong? What are the docs not telling me?

Below is my complete code, or you can see it in a codepen: https://codepen.io/samkeddy/pen/zyMVyp

//Create a Pixi Application
let app = new PIXI.Application({width: 64, height: 64, resolution: 1});
app.renderer.backgroundColor = 0x000000;

//Add the canvas that Pixi automatically created for you to the HTML document

let Tex = PIXI.utils.TextureCache;
let Loader = PIXI.loader;
let type = PIXI.utils.isWebGLSupported() ? "WebGL" : "canvas";

Loader.add('test',    'https://i.imgur.com/Y3lcpWg.png');
Loader.add('player',  'https://i.imgur.com/kLtfMYM.png');

Loader.on("progress", function (loader, resource) {
    console.log(Math.round(loader.progress)+'% ', "loading " + resource.name +" sprite"); 

//game is loaded
Loader.load(function () {
    let overworld = new PIXI.Container();
    overworld.sortableChildren = true;
    let player = new PIXI.Sprite(Tex['player']);
    player.x = 0;
    player.y = 0;
    let test = new PIXI.Sprite(Tex['test']);
    test.x = 0;
    test.y = 0;




Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...