Jump to content

Black flashes between game states


Recommended Posts

Hi,

I've encountered a strage problem while building a little, mostly static mobile game using Intels XDK, Cordova and Phaser (2.4.6). It's targeted at Android and uses the Crosswalk web runtime.

I basically followed Matt McFarlands menu tutorial, and created States to do stuff like booting up, loading all assets, showing a splash screen, showing a menu, the levels etc. I'm using one Phaser.Graphics object per State to draw on (my game only needs a few geometric items). Additionaly I'm using the SaveCPU plugin to avoid unnecessary render cycles. Unfortunately removing it doesn't seem to remove the flashing problem.

The stage.background is set to white, in the HTML part backgroud colors are also set to white. When moving from one State to the next I nevertheless get strange black flashes after entering the new State. Sometimes they cover the whole viewable area, sometimes they seem to be a black rectangle originating at the canvas center and covering only the lower right quadrant. I only get those flashes on mobile devices, they don't happen in a browser on a PC. I also observed that they seem to appear only after I add the Graphics object to a State, States whithout Graphics objects don't flash. Unfortunately I wasn't able to find out when exactly a flash occurs, but  it seems to be either in or before/after init(), preload() or create().

The typical structure of my States looks like that:

MyState = function () {}

MyState.prototype = {
    init: function () {
        game.stage.backgroundColor = "#FFFFFF";
        this.graphics = game.make.graphics(0, 0);
        // do some more stuff, initialise variables etc.
    },
	
    preload: function () {
	this.graphics.alpha = 0;
	this.graphics.width = game.global.canvasWidth;
	this.graphics.height = game.global.canvasHeight;
        // do some more stuff
    },
	
    create: function() {
        // do some more stuff
        game.add.existing(this.graphics);

        // do some more stuff, set up input handlers etc.
      
        // graphics fade in 
        game.add.tween(this.graphics).to({alpha: 1}, 1000, Phaser.Easing.Quadratic.Out, true);
        // rendering was set to 60 FPS in the previous state (probably unnecessarily), 
        // as long as there are active tweens forceRender() of the SaveCPU plugin is called in update() 
        game.global.saveCpu.renderOnFPS = 0;
    },

    update: function () {
        if (game.global.saveCpu.renderOnFPS === 0 && game.tweens.getAll().length > 0)
	    game.global.saveCpu.forceRender();
    },

    render: function () {
	this.graphics.clear();
        // draw stuff like menu buttons game pices etc using graphics drawing methods
    },
    
    // [ ... more methods for state specific stuff ... ]

    moveToNextState: function (stateName) {
        // fade out the graphics and move on to the next state
        game.global.saveCpu.renderOnFPS = 60;
        var theEndTween = game.add.tween(this.graphics).to({alpha: 0}, 1000, Phaser.Easing.Quadratic.Out, true);
        theEndTween.onComplete.add(function () { game.state.start(stateName, true, false); }, this);
    }
}
	

 

So I wonder if anybody has an idea about what causes the flashes and how I may avoid them?

 

Link to post
Share on other sites
  • 2 years later...

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.

×
×
  • Create New...