Responsive Fullscreen

[FahrulID]

I want to ask,, I want to make a game that it would fit to Phone Screen at any Screen Resolution with 800x600(or etc) canvas 

is it possible ?

how can i do that ?

[marchhill]

Try something like this:

var WIDTH = window.screen.availWidth * window.devicePixelRatio;
var HEIGHT = window.screen.availHeight * window.devicePixelRatio;

var game = new Phaser.Game(WIDTH, HEIGHT, Phaser.AUTO, 'game');

It will modify the canvas size depending on the screen size

[FahrulID]

ty very much

 

[FahrulID]

ty very much

but seems still not fit the screen

[marchhill]

What does it look like? Can you post a screenshot?

[onlycape]

There is an example of Phaser for fullscreen mode:

http://www.phaser.io/examples/v2/display/fullscreen

You can try the different values for "fullScreenScaleMode". Some browsers don't have fullscreen api  and remember that to activate this mode you need a user gesture (like press a button).

If what you want is to cover the available space of the browser and mantain the proportions of the game, this is one of the solutions:

1) You need a parent element of the canvas game with this style:

/* In your css file*/

body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    overflow: hidden;    
}

#div_game{
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

2) You have to apply some type of scale to your game. If the aspect ratio of your game is not equal to space available, then part of the game will be hidden. In my game Flappy Tours, designed to play in portrait mode, I used a scale based on the available height:

// gameWidth and gameHeight are fixed
var game = new Phaser.Game(gameWidth,gameHeight,Phaser.CANVAS,'div_game');

// I use the parent element (box) to get the space available
var box= document.getElementById('div_game');

// game.height * scaleFactor = height available
var scaleFactor= box.clientHeight/game.height;

var myState={
       create: function(){
                game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
                game.scale.setUserScale(scaleFactor,scaleFactor);
                
                // Set the callback for size changes
                game.scale.setResizeCallback(function(scale,parentrectangle){

                        // On resize event I calc the new scaleFactor
                        scaleFactor = box.clientHeight / game.height;

                        //Applying the same scale to the height and width the proportion is 
                        //maintained 
                        game.scale.setUserScale(scaleFactor, scaleFactor);

                        //This can happen with orientation changes                
                        if (windowWidth > game.width*scaleFactor) {
                            game.scale.pageAlignHorizontally = true;
                        }
                },this);
       }

       // More code here ...
}

If the game was designed to play in landscape mode then you would have to calculate the scale according to the width available. If your game is for portrait, choose an aspect that is equal to the device with the widest aspect. The question is: What space of the game can you sacrifice without affecting the gameplay?.

And for the user interface you can use the dom and css for scale it.