Bring graphics on top of Dynamically added sprite in Phaser

[BixBax]

I am adding Sprites dynamically by using a timed event.

I can't find a way to bring a new graphics (a flooded rectangle) above the sprites generated.

 

The sprites are always on top

 

 

create()

{

    var graphics = game.add.graphics(0, 0);

    graphics.beginFill(0xFFFF0B);

    graphics.drawRect(0, 0, windowWidth, 70);

    graphics.endFill();

    timer = game.time.events.loop(1500, addSprite, this);

}

 

addSprite()

{  

    sprite= game.add.sprite(20, 30, 'sprite');

}

 

 

 

Any help??

 

 

[Pedro Alpera]

Something like this?:

    function addSprite () {                sprite= game.add.sprite(20, 30, 'sprite');                                var graphics = game.add.graphics(0, 0);                graphics.beginFill(0xFFFF0B);                graphics.drawRect(0, 0, 500, 70);                graphics.endFill();    }

[Pedro Alpera]

Other option could be a container group for the sprites, so you can draw first the group, and then draw the graphic.

window.onload = function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});    var spritesLayer;    function preload() {        game.load.image('sprite', 'assets/yeoman-logo.png', 17, 17);    }    function create() {    spritesLayer = game.add.group();    spritesLayer.z = 0;    timer = game.time.events.loop(1500, addSprite, this);         var graphics = game.add.graphics(0, 0);        graphics.beginFill(0xFFFF0B);        graphics.drawRect(0, 0, 500, 70);        graphics.endFill();    }    function addSprite () {        var sprite = new Phaser.Sprite(game, 20, 30, 'sprite');        spritesLayer.add(sprite);                 }    function update() {    }};

[Pedro Alpera]

Third option, a layer for graphics and a layer for sprites :

More info: http://examples.phaser.io/_site/view_full.html?d=groups&f=group+as+layer.js&t=group%20as%20layer

window.onload = function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});    var spritesLayer;    function preload() {        game.load.image('sprite', 'assets/yeoman-logo.png', 17, 17);    }    function create() {      spritesLayer = game.add.group();        spritesLayer.z = 0;        graphicsLayer = game.add.group();        graphicsLayer.z = 1;        timer = game.time.events.loop(1500, addSprite, this);             var graphics = game.add.graphics(0, 0);        graphics.beginFill(0xFFFF0B);        graphics.drawRect(0, 0, 500, 70);        graphics.endFill();        graphicsLayer.add(graphics);    }    function addSprite () {        var sprite = new Phaser.Sprite(game, 20, 30, 'sprite');        spritesLayer.add(sprite);                 }    function update() {    }};

[Heppell08]

Use bringToTop() on what you need on top.

[jouniii]

A bit related issue. It seems the Graphics object functions are not adjusted by the parent group offset, nor the rotation is added up (local rotation works). Probably more of a PIXI issue that Graphics object has static set of instructions for drawing. It was possible to animate with update() by re-building the draw instructions when needed.

 

Also noticed that TypeScript definition for PIXI.Graphics is incorrectly extended from PIXI.Texture, rather than PIXI.DisplayObjectContainer.