Phaser: Make background screen-width instead of content-width

Question

I am making a game using the Phaser Framework for Android. I need to make the canvas fill the entire screen width and then flood it with background color, then put content

Answer 1

You need Phaser 2.2+ for this, but if you want the canvas to fill the entire screen space available you would do:

var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'parent');

...

game.scale.scaleMode = Phaser.ScaleManager.RESIZE;

Also you should not use pageAlign if you're using 100% dimensions. You also don't need to call refresh or setScreenSize.

When working in the RESIZE scale mode you can add a function to your States called 'resize'. It will be called whenever the screen dimensions change (orientation event perhaps) and be passed 2 parameters: width and height. Use those to adjust your game content layout.

You may want to get the Phaser Scale Manager book, it covers all this in lots more detail (caveat: I wrote it, but it has a "pay what you want" price, including completely free)

Answer 2

i use this code in my game and it work very nice without changing in position of any elements

var targetWidth = 720; // the width of the game we want
var targetHeight = 480; // the height of the game we want

// additional ratios

//Small – 360x240
//Normal – 480x320
//Large – 720x480
//XLarge – 960x640
//XXLarge – 1440x960

var deviceRatio = (window.innerWidth/window.innerHeight); //device aspect ratio

var newRatio = (targetHeight/targetWidth)*deviceRatio; //new ratio to fit the screen

var newWidth = targetWidth*newRatio;
var newHeight = targetHeight;

var gameWidth = newWidth;
var gameHeight = newHeight;
var gameRendrer = Phaser.AUTO;

and this code for Boot state

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        game.scale.forceLandscape = true;
        game.scale.setScreenSize(true);

this for landscape mode if you want to make it for portrait change width and height like

var targetWidth = 480; // the width of the game we want
var targetHeight = 720; // the height of the game we want

also force it to portrait

this code work well in my games