Black flashes between game states

[Xellpher]

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?

 

[Balamurugan]

I have The Same Problem Using Crosswalk Web View. AnyOne have a solution for this.