Black screen while changing states

[jd5]

Currently I see a black screen for half a second or so when switching between the TitleScreen state of my game and the main GameScreen.

What is the best way to avoid this?

[raaaahman]

Hi,

without seeing your code I can't really do much but trying to guess: Did you load the background in the GameScreen state?

[jd5]

Did you load the background in the GameScreen state?

The title screen and GameScreen both share the same background image. The titlescreen does load a bunch more stuff.

When you say background - are you referring to something in particular? I have just created a sprite in the "create" method of each state.

[raaaahman]

It still would be easier if you provide your code.

The create method is triggered after the preload method has finished its job, so anything you want to display in the create method will wait for the loading of every assets to finish. That's the point in having a dedicated Preloader state you'll see in most of the Phaser projects out there, it let you start each of the following states with all the needed assets in the cache (which is kept between states).

[jd5]

That's the point in having a dedicated Preloader state you'll see in most of the Phaser projects out there

So the background image used on both the title state and game state is the same. I would assume that the image is already in the cache when the main state is loaded?

this.game.state.start('main', true, false); 

So what I need to do is create a background sprite as soon as the main state is created... to keep a constant background image visible. I tried this in the main state:

init() {
    var bgSprite = this.add.sprite(
        this.world.centerX, 
        this.world.centerY, 
        'bg');

    bgSprite.anchor.set(0.5);
    bgSprite.width = this.world.width;
    bgSprite.height = this.world.height;
}

but I then end up with:

pixi.js:2067 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at Phaser.Sprite.PIXI.Sprite._renderCanvas (pixi.js:2067)
    at Phaser.World.PIXI.DisplayObjectContainer._renderCanvas (pixi.js:1451)
    at Phaser.Stage.PIXI.DisplayObjectContainer._renderCanvas (pixi.js:1451)
    at PIXI.CanvasRenderer.renderDisplayObject (pixi.js:6912)
    at PIXI.CanvasRenderer.render (pixi.js:6837)
    at Phaser.Game.updateRender (phaser-split.js:14047)
    at Phaser.Game.update (phaser-split.js:13969)
    at Phaser.RequestAnimationFrame.updateRAF (phaser-split.js:41733)
    at _onLoop (phaser-split.js:41716)

 

[raaaahman]

Ok, now with some lines of code I can understand the problem a little better:

Your background is a sprite, which by default lives in the world, which is reset when you change the state, as you can read in the doc: http://www.phaser.io/docs/2.6.2/Phaser.StateManager.html#start

This is the expected behavior, as you probably change background from one state to another more often than not. So the background will be destroyed and recreated each state, if there's no loading time between destruction and creation, it might not be visible.

Now the doc provides another useful information: the stage (different from the state!) is not reset between states, so everything that is contained in there will live until you destroy it manually... But I've not tested this kind of solutions...

 

For your new error, it would be useful to see how you are loading your 'bg' image, because its explicitly tells you that it's not the type expected (and maybe because it's not loading yet).

[jd5]

Hi,

Thanks for your reply - sorry it has taken me time to get back!

So I tried adding the sprite to the stage but the game crashes when doing so. This is the code I used:

 

        var bgSprite = this.game.add.sprite(
            this.world.centerX, 
            this.world.centerY, 
            'bg');

        bgSprite.anchor.set(0.5);
        bgSprite.width = this.world.width;
        bgSprite.height = this.world.height;

        this.stage.addChild(bgSprite);

And I get this:

phaser-split.js:13863 Uncaught Error: Phaser.Game - Cannot create Canvas or WebGL context, aborting.
    at Phaser.Game.setUpRenderer (phaser-split.js:13863)
    at new SimpleGame (main.ts:16)
    at window.onload (main.ts:66)

Am I doing something wrong?