Chrome Sprites Stacking

[Zalon]

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.

[lewster32]

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.

[Heppell08]

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

[Zalon]

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.

[lewster32]

I'm pretty sure SVG is unsupported in Phaser; or at least not intended to be used. Visual assets are typically expected to be bitmap images, i.e. png, jpg etc.

[Zalon]

Ok, maybe that is why then... I'm just confused about this issue, as it works just fine in firefox

[lewster32]

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.

[Zalon]

It does indeed get pixelated, so there is no point in using SVG

[lewster32]

I kinda figured this would be the case, but I'm still surprised that pixi handled this as well as it did in the first place! Clearly something's going on in the browsers to provide abstraction to this kind of scenario.