jd5

Black screen while changing states

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.