Simple Scaling and Fullscreen

You need to scale your game properly for when the actual viewport size does not fit the one you intended when making the game. That is especially important when developing for handheld devices.

Stretch

One way to scale the game is by making it fill the whole screen. Useful for when the devices aspect ratio is only a little different than that of your game. In the boot states enableFitScreen function, change the resizeGame to this:

var resizeGame = this._fitScreen = function() {

    game.scale.setMaximum();
    game.scale.setScreenSize(true);

};

This method only works well when the aspect ratios aren’t too different, because the game will be quite literally squeezed into the available resolution like this:

Center

To avoid abnormalities, you might use this:

var resizeGame = this._fitScreen = function() {
    game.scale.pageAlignVertically = true;
    game.scale.pageAlignHorizontally = true;
    game.scale.setShowAll();
    game.scale.refresh();
};

This keeps the original aspect ratio and centers the game on screen in this case vertically:

 Mobile

When developing games for both desktop and mobile devices, you can change the scaling rules depending on the type of device like this:

var resizeGame = this._fitScreen = function() {
    if (game.device.desktop) {
        //code for desktop devices
    } else {
        //code for mobile devices
    }
};

You can change scaling according to device specifics – whether it’s an android or iPad etc.(check documentation).

You can also make rules to scale the game differently, according to the aspect ratio of the device, and keeping it stretched if the image is not too deformed, for example (in landscape mode):

var resizeGame = this._fitScreen = function() {
    //calculates aspect ratio of the game
    var gameAspRatio = mt.data.map.viewportWidth / mt.data.map.viewportHeight;
    //calculates aspect ratio of the device
    var deviceAspRatio = window.innerWidth / window.innerHeight;
    var ratioDiv = gameAspRatio / deviceAspRatio;

    //if the screen is too narrow (larger than), there will be black borders on top and bottom of the screen
    //if too wide (smaller than) - borders on the sides
    if (ratioDiv > 1.2 || ratioDiv < 0.8) {
        game.scale.pageAlignVertically = true;
        game.scale.pageAlignHorizontally = true;
        game.scale.setShowAll();
        game.scale.refresh();
    }
    //else game is stretched
    else {
        game.scale.setMaximum();
        game.scale.setScreenSize(true);
    }
};

You can change the coefficients 0.8 and 1.2 freely – whatever best suits your game. The values here are only for this example.

Fullscreen

Entering fullscreen is also done by using the scale manager. In your game state state add this:

"use strict";
window.Scaling.state.menu = {
    create: function() {
        mt.create("Group");

        //maintain aspect ratio
        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

        //stretch to screen
        //this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;

        //keep original size
        //this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.NO_SCALE;

        this.game.input.onDown.add(this.goFullscreen, this);
    },

    update: function() {

    },

    goFullscreen: function() {
        if (this.game.scale.isFullScreen) {
            this.game.scale.stopFullScreen();
        } else {
            //resets alignment and enters fullscreen
            //not needed if alignment isn't changed to true beforehand
            this.game.scale.setMaximum();
            this.game.scale.setScreenSize(true);
            this.game.scale.pageAlignVertically = false;
            this.game.scale.pageAlignHorizontally = false;
            this.game.scale.startFullScreen(false); //true=antialiasing ON, false=antialiasing off
        }
    }
};

We need to reset the alignment and turn it off only if it has been set to true before going fullscreen, because it messes with the positioning when in fullscreen mode (as is the case with this sample). Feel free to comment those lines and see for yourself.

Finally, we wrap the resizing in boot state within an if statement, so that the game doesn’t try to scale itself when in fullscreen mode:

var resizeGame = this._fitScreen = function() {
    //scales the game accordingly only if game is not running in fullscreen
    if (!game.scale.isFullScreen) {
        //calculates aspect ratio of the game
        var gameAspRatio = mt.data.map.viewportWidth / mt.data.map.viewportHeight;
        //calculates aspect ratio of the device
        var deviceAspRatio = window.innerWidth / window.innerHeight;
        var ratioDiv = gameAspRatio / deviceAspRatio;
        //if the screen is too narrow (larger than), there will be black borders on top and bottom of the screen
        //if too wide (smaller than) - borders on the sides
        if (ratioDiv > 1.2 || ratioDiv < 0.8) {
            game.scale.pageAlignVertically = true;
            game.scale.pageAlignHorizontally = true;
            game.scale.setShowAll();
            game.scale.refresh();
        }
        //else game is stretched
        else {
            game.scale.setMaximum();
            game.scale.setScreenSize(true);
        }
    }
};

Click to go fullscreen.

Check the documentation on scale manager here.

Full sample available here (uncomment different parts of the function for different results).