BixBax Posted May 11, 2014 Share Posted May 11, 2014 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?? Link to comment Share on other sites More sharing options...
Pedro Alpera Posted May 11, 2014 Share Posted May 11, 2014 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(); } Link to comment Share on other sites More sharing options...
Pedro Alpera Posted May 11, 2014 Share Posted May 11, 2014 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() { }}; Link to comment Share on other sites More sharing options...
Pedro Alpera Posted May 11, 2014 Share Posted May 11, 2014 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%20layerwindow.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() { }}; Link to comment Share on other sites More sharing options...
Heppell08 Posted May 11, 2014 Share Posted May 11, 2014 Use bringToTop() on what you need on top. Pedro Alpera 1 Link to comment Share on other sites More sharing options...
jouniii Posted May 28, 2014 Share Posted May 28, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts