A bit confused about how to use

[noih]

I tested a piece of code on CodeSandbox, and I don't understand the following:

1. Why does 'aBunny' disappear when I remove line 37 (cBunny.zOrder = 2)?
2. When I replace Container with ParticleContainer, why does the layering effect no longer work?

Did I get something wrong? Can anyone help clear this up for me? Thanks!

• pixi.js 7.2.3
• @pixi/layers 2.0.1

import { Application, Container, ParticleContainer, Sprite, Texture } from 'pixi.js'
import { Stage, Layer, Group, applyParticleMixin } from '@pixi/layers'

const app = new Application({ backgroundColor: 0x000000 })

document.body.appendChild(app.view)

app.stage = new Stage()
app.stage.sortableChildren = true

const texture = Texture.from('https://pixijs.io/examples/examples/assets/bunny.png')
const aBunny = new Sprite(texture)
const bBunny = new Sprite(texture)
const cBunny = new Sprite(texture)
bBunny.position.set(5, 5)
cBunny.position.set(10, 10)

// layers
const a = new Layer(new Group(6, true))
const b = new Layer(new Group(4, true))
const c = new Layer(new Group(2, true))
app.stage.addChild(a, b, c)

const container = new Container()

// applyParticleMixin(ParticleContainer)
// const container = new ParticleContainer()

container.addChild(aBunny)

a.addChild(container)
b.addChild(bBunny)
c.addChild(cBunny)

// test
aBunny.parentGroup = c.group
cBunny.zOrder = 2 // line 37

[jonlepage]

rem app.stage.sortableChildren = true
it actually not related to this plugin and can give conflit .

[noih]

rem app.stage.sortableChildren = true it actually not related to this plugin and can give conflit .

You're right, there seems to be a conflict. But I've encountered a new problem. If I add 'aBunny.zOrder = 3' at the end, aBunny disappears again. The zOrder of aBunny cannot be greater than that of cBunny.

cBunny.zOrder = 2 // line 37
aBunny.zOrder = 3

[noih]

I noticed that "app.stage.sortableChildren" is also used in the official example, and now I'm very confused .. Orz