Jump to content

Responsive Fullscreen


Recommended Posts

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

Link to comment
Share on other sites

There is an example of Phaser for fullscreen mode:


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%;
    overflow: hidden;    

    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;
                // Set the callback for size changes

                        // 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 
                        game.scale.setUserScale(scaleFactor, scaleFactor);

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

       // 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. 



Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...