Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Text Above Sprites


Eamon
 Share

Recommended Posts

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:

 

i21ZpEe.png

 

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 

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

  • 3 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...