Static background preserved between states, best practice?

[morosenerd]

Hey!

 

What would be the best way to implement a static (never changing) background comprised of repeated tiles, that doesn't disappear when switching states?

 

My first obvious thought was to use CSS in conjunction with transparent Phaser canvas, but at least when using Phaser.CANVAS mode, in certain browsers (Android Stock............) this causes visual artifacts: it would appear that the canvas is not cleared between frames, and for example when switching from a Preloader state to a MainMenu state, the loading bar will sometimes stay even if I explicitly destroy it in Preloader.shutdown().

 

BTW, is this working as intended or broken? If it's expected, is there a way to tell Phaser to clear the canvas between frames even when in transparent mode?

 

My second thought is just normal opaque canvas + global group with the bg tiles, but I have several problems with this approach:

1) global object, but I can live with that,

2) performance hit? My tiles are not too big, but I guess cacheAsBitmap could help here, to prevent having tons of draw calls just to display the bg?

 

Suggestions? I'm new to JS/HTML/CSS so I might be missing something extremely obvious.

[lewster32]

Personally I think all of your solutions are valid. If you have something which should be displayed globally within your game, then why not use it globally; or at least in a parent context to that of the individual states?

 

If your background is tiled with a TileSprite, it's probably not worth using cacheAsBitmap as this will increase memory usage and probably not increase your performance noticeably - in fact in WebGL at least TileSprite will be better left as-is, as it uses a very fast hardware routine to tile the texture. In canvas mode the entire scene has to be redrawn from scratch every frame, so however you do it you're going to end up drawing the same amount of pixels to the screen.

[morosenerd]

TileSprite?

 

I knew I'd miss something obvious! Thanks, I think I'll use a global TileSprite then.

 

Still, curious about the transparent mode and visual leftovers from previous states:

 

BTW, is this working as intended or broken? If it's expected, is there a way to tell Phaser to clear the canvas between frames even when in transparent mode?

What I mean by "clearing the canvas" is "remove everything that Phaser displayed, leaving only a fully transparent frame". It appears to work this way in desktop Firefox and Chrome at least, but not in Android Browser.

[lewster32]

To quote the docs:

 

 

A TileSprite is a Sprite that has a repeating texture. The texture can be scrolled and scaled and will automatically wrap on the edges as it does so. Please note that TileSprites, as with normal Sprites, have no input handler or physics bodies by default. Both need enabling.

 

It basically allows you to display a repeated rectangular texture within an arbitrarily sized frame: http://docs.phaser.io/Phaser.TileSprite.html

 

I'm not sure about your other issue - I'm pretty sure in canvas mode Phaser performs a standard clearRect every update, so there should never be things left on the screen provided all of the objects in the scene have been correctly destroyed. WebGL works differently in that it pushes data to the GPU, but I'm not an authority on the matter so I can't really give you any insight.