Text Above Sprites

[Eamon]

Hey guys,

 

Ive have been playing around with Phaser 1.1.3 for the past few days and currently loving its ease of use. There is, however one problem. When I draw text to the game it seems to be drawn below the zombie sprites, I assume this is because the sprite are created and drawn after the text and thus are placed on top. You can see what I mean here:

 

 

My question it this, is there anyway to make the text drawn on the top and still have the zombies being drawn afterwards (due to spawning code)?

 

Thanks,

Eamon 

[XekeDeath]

Put the sprites and text in different groups.

Make the text group second.

That way, all text will appear on top of sprites.

[Eamon]

Put the sprites and text in different groups.

Make the text group second.

That way, all text will appear on top of sprites.

Do you mean create the text group after the sprite group? Or is there some other way to set the order of groups using code?

[XekeDeath]

The draw order is the order they are added to the game. So you can either do

//This adds to the game as they are made.var spriteGroup = game.add.group();var textGroup = game.add.group();

or

//These groups are not added to the game.var spriteGroup = new Phaser.Group(game);var textGroup = new Phaser.Group(game);//They are now being added.game.add.existing(spriteGroup);game.add.existing(textGroup);

[Eamon]

Ok thanks, but now I have another problem, the game works fine when the groups are added on the last line of the create event: 

function create() {if (game.device.desktop==false) {    //scaling startgame.stage.scale.startFullScreen();game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; //resize your window to see the stage resize toogame.stage.scale.setShowAll();game.stage.scale.pageAlignHorizontally = true;game.stage.scale.pageAlignVertically = true;game.stage.scale.refresh();    //scaling end}    background = game.add.tileSprite(0, 0, 320, 480, 'bkg');    player = game.add.sprite(160, 440, 'player');    txt = game.add.group();    timer = game.add.text(4, 48, 'Time: 0s', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5}, txt);    scoreText = game.add.text(4, 4, 'Score: 0', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5 }, txt);        //  Enable Input detection. Sprites have this disabled by default,     //  so you have to start it if you want to interact with them.    player.input.start(0,true);    //  This allows you to drag the sprite. The parameter controls if you drag from the position you touched it (false)    //  or if it will snap to the center (true)    player.input.enableDrag();    //  This will lock the sprite so it can only be dragged horizontally, not vertically    player.input.allowVerticalDrag = false;    player.body.immovable = true;    player.events.onDragStop.add(dragStop, this);    player.events.onDragStart.add(dragStart, this);        zombies = game.add.group();    bullets = game.add.group();}

But if I try to move them to above where the "txt" group is created then I get a lovely Error:

Uncaught TypeError: Cannot read property 'x' of undefined

You can view the full source code here: http://pastebin.com/sr2gHSdy

[Hsaka]

Hi, try replacing these lines:

timer = game.add.text(4, 48, 'Time: 0s', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5}, txt);scoreText = game.add.text(4, 4, 'Score: 0', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5 }, txt);

with this:

timer = game.add.text(4, 48, 'Time: 0s', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5});txt.add(timer);scoreText = game.add.text(4, 4, 'Score: 0', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5 });txt.add(scoreText);

You can put those lines at the bottom of your create function.

[Eamon]

Hi, try replacing these lines:

timer = game.add.text(4, 48, 'Time: 0s', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5}, txt);scoreText = game.add.text(4, 4, 'Score: 0', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5 }, txt);

with this:

timer = game.add.text(4, 48, 'Time: 0s', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5});txt.add(timer);scoreText = game.add.text(4, 4, 'Score: 0', { fontSize: '32px', fill: 'white', stroke: "black", strokeThickness: 5 });txt.add(scoreText);

You can put those lines at the bottom of your create function.

Ok, but I need the txt group to be created after the zombies and bullets ones so that it will be displayed on top. Moving either of the group creation codes around still brings up the same error...

[Hsaka]

I just recreated your issue. It seems that in Phaser 1.1.3, the groups need to have stuff in them for physics.collide to work. You can fix the problem by including this line:

if (bullets.length > 0 && zombies.length > 0) {    game.physics.collide(bullets, zombies, collisionHandler, null, this);}

The problem seems to be fixed in Phaser 1.1.4 though so you can try the dev version.

[Eamon]

I just recreated your issue. It seems that in Phaser 1.1.3, the groups need to have stuff in them for physics.collide to work. You can fix the problem by including this line:

if (bullets.length > 0 && zombies.length > 0) {    game.physics.collide(bullets, zombies, collisionHandler, null, this);}

The problem seems to be fixed in Phaser 1.1.4 though so you can try the dev version.

Thank you so much!

[gikdew]

the best way is using text.bringToFront(); whenever you create a new member of the group!