Pixi Sprite children z-index

[webdeveloper_issy]

Hi,

When I create a new sprite e.g. bunny i want to add a gun to him that rotates as the bunny rotates, however it is layered on top.
How can I layer this below the sprite? I assume children are supposed to layer below the parent?

 

You can try the code here:

https://pixijs.github.io/examples/#/basics/basic.js

Code:

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

var bunny2 = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
bunny2.tint = 0xFF0000;
bunny.addChild(bunny2);
// Listen for animate update
app.ticker.add(function(delta) {
  	bunny.rotation += 0.03 * delta;
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
});

 

[bubamara]

no, children are positioned above their parent. wrap gun & bunny into container

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var bunnyContainer = new PIXI.Container();
bunnyContainer.x = app.renderer.width / 2;
bunnyContainer.y = app.renderer.height / 2;
app.stage.addChild(bunnyContainer);

// gun
var gun = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
gun.tint = 0xFF0000;
bunnyContainer.addChild(gun);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
bunny.anchor.set(0.5);
bunnyContainer.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
  	bunnyContainer.rotation += 0.03 * delta;
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
});

 

[ivan.popelyshev]

Its solved in a plugin.

Either https://github.com/pixijs/pixi-display

Either new version, https://github.com/pixijs/pixi-display/tree/layers , allows even more: http://pixijs.github.io/examples/#/layers/lighting.js