Jump to content

Issues with Pixi.js, zIndex, and layers


Recommended Posts

So I've been trying for a couple days now to get proper sorting of objects in my scene working. I tried the obvious sprite1.zindex = 2 method, nothing. So I tried to see if pixi layers would work. Nope. The only thing that happens is what's drawn last is the one on top.

Would appreciate any help, because I feel like I'm going insane.

Here's some mockup code I wrote, what's wrong with it?

import * as PIXI from 'pixi.js'
import { Layer } from '@pixi/layers'

let app = new PIXI.Application({
    view: document.getElementById('main-canvas')

let layer = new Layer();

const loader = PIXI.Loader.shared;

loader.baseUrl = "images"
loader.add(["untitled.png", "voxel.png"]);


loader.onComplete.add(() => {
    const sprite1 = new PIXI.Sprite.from(loader.resources['untitled.png'].texture);

    sprite1.width = sprite1.width *0.2;
    sprite1.height = sprite1.height *0.2;

    sprite1.parentLayer = layer;

    const sprite2 = new PIXI.Sprite.from(loader.resources['voxel.png'].texture);

    sprite2.width = sprite2.width *0.2;
    sprite2.height = sprite2.height *0.2;

    sprite2.parentLayer = layer;

    sprite1.zIndex = 2;
    sprite2.zOrder = 1;



2022-08-14 22_54_05-Window.png

Link to comment
Share on other sites

  • 1 month 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.

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