How to avoid screen flicker when embedding responsive Phaser game in Bootstrap site

Phaser games can be responsive and will fit in the available space which makes it easy to embed in variety of devices with different sizes. When Phaser games are embeded in a Bootstrap site which is responsive, there can be some flickering on the web page when game is initially loaded. When Phaser games are loaded, it loads in the actual size it was created in and afterwards CANVAS is resized to fit in the available space.

The example below is a bootstrap template in which Phaser game is embeded in half of the screen and remaining half screen has some other content. Click the link to load the page to see how the game is being resized to fit in the available space.

To make the game load in a nice manner without visible resizing, we need to intially hide the div in which game is loaded. In Phaser boot method we can use a simple jquery fadein effect over a certain interval to give it an elegant loading effect. Click the link below to see how this works. This is the same example as above with minor changes.

So what have we done here. For example we have HTML structure as following

<div class="container">
    <div class="row">
        <div class="col-xs-6">
	    <div id="mygame"></div>
        </div>
       <div class="col-xs-6">
	    Other content
       </div>
   </div>
</div>

Game is loaded in “mygame” div.

Step 1 –

Hide “mygame” div

#mygame{
    display: none;
}

Step 2 –

Use jQuery fadeIn in the boot class (highlighted below)

TheGame.Boot = function (game) { };

TheGame.Boot.prototype =  {
    init: function () {
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		this.game.scale.pageAlignHorizontally = true;
        this.game.scale.pageAlignVertically = true;

    },
    preload: function () {
        this.load.image("background", "../Resources/images/repeatxy.png");
        this.load.image("loading", "../Resources/images/loadingback.png");
    },
    create: function () {
		$("#mygame").fadeIn(1000);
        this.state.start("Loading");
    }	
};

A couple of small changes has made the game load more elegantly now. If you have any other suggestion, let me know via comments.