Jump to content

Chrome Sprites Stacking


Zalon
 Share

Recommended Posts

I have an issue where in Chrome some sprites will stack, it's not an issue in firefox.

With stacking i mean that when adding a sprite, another sprite will show up behind the newly added sprite.

Here is a rundown:

I create a group called "Instructions"

I add a sprite with an image saying "Get Ready" to that group

When the game starts, I destroy the "Instructions" group

The player dies

I then have a scoreboard object that i add using add.existing (It basically just adds a "Game Over" sprite)

Now the issue, behind the "Game Over" sprite, you will see the "Get Ready" sprite.

Link to comment
Share on other sites

This sounds like a bug if it's performing differently in different browsers, but I'm not sure what it is you're trying to do - where are you adding the scoreboard object? To the already destroyed 'instructions' group? If you intend to reuse objects you should kill them or set visible to false, rather than destroying them.

Link to comment
Share on other sites

If this were me then i would differentiate the sprites for when they need used. not differing from the potential bug but as an outline i'd create away from the group context and use the sprites if and when needed and destroy seperately.

I suppose this may be a personal coding context but also maybe worth trying the seperate sprite coding away from the group stuff

Link to comment
Share on other sites

No, I'm not adding it to the "Instructions" group.

The way I've structured my game is using the Yeoman Generator, generator-phaser-official, and then I've used the "Flappy Bird Reborn" structure for having states and prefabs.

So I'm adding the sprites exactly like they are being added in the source for Flappy Bird Reborn. Here is a rundown from the source.

Adding the instructions group, with getReady sprite

    this.instructionGroup = this.game.add.group();    this.instructionGroup.add(this.game.add.sprite(this.game.width/2, 100,'getReady'));    this.instructionGroup.add(this.game.add.sprite(this.game.width/2, 325,'instructions'));    this.instructionGroup.setAll('anchor.x', 0.5);    this.instructionGroup.setAll('anchor.y', 0.5);
Destroying the instructions group when game starts

  startGame: function() {    if(!this.bird.alive && !this.gameover) {        this.instructionGroup.destroy();    }  },
Showing the scoreboard on death

  deathHandler: function(bird, enemy) {    if(enemy instanceof Ground && !this.bird.onGround) {        this.scoreboard = new Scoreboard(this.game);        this.game.add.existing(this.scoreboard);        this.scoreboard.show(this.score);    }
The scoreboard is a "prefab", the source for this is available here: scoreboard.js

UPDATE

During testing with the "Flappy Bird Reborn" source, I've limited the issue a bit. In my game I'm using SVG sprites, these are the ones that are stacking in Chrome. If I replace my sprites with PNG versions, they do not stack.

Link to comment
Share on other sites

I'm not sure, possibly down to how each browser rasterises the SVG file. Out of interest, if you up the sprite's scale, does it become pixellated/blurry? I'd imagine it does, since rasterisation is the only way I can think of that the image would even get displayed in Phaser.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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