How to make canvas responsive using Phaser 3?

Question

Previously I was working on Phaser 2 but now I need to switch to Phaser 3.

I tried to make the canvas responsive with ScaleManager but it is not working.

I think some of the methods changed but I didn't find any help to rescale the stage full screen.

var bSize = {
  bWidth: window.innerWidth ||
    root.clientWidth ||
    body.clientWidth,
  bHeight: window.innerHeight ||
    root.clientHeight ||
    body.clientHeight,
};

var game;

var canvas = document.getElementById("canvas");

function create() {

    // Scaling options
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    // Have the game centered horizontally
    game.scale.pageAlignHorizontally = true;

    // And vertically
    game.scale.pageAlignVertically = true;

    // Screen size will be set automatically
    game.scale.setScreenSize(true);
}

window.onload = function() {

    // Create game canvas and run some blocks
    game = new Phaser.Game(
        bSize.bWidth, //is the width of your canvas i guess
        bSize.bHeight, //is the height of your canvas i guess
        Phaser.AUTO, 
        'frame', { create: create });

    canvas.style.position = "fixed";
    canvas.style.left = 0;
    canvas.style.top = 0;  
}

Possible duplicate of [How to scale a Phaser 3 game and their assets to it works in smartphones and tablets?](https://stackoverflow.com/questions/50742927/how-to-scale-a-phaser-3-game-and-their-assets-to-it-works-in-smartphones-and-tab) — James Skemp, Oct 16 '18 at 13:18

score 38 · Answer 1 · 2019-03-16T08:23:38.493

38

Since v3.16.0, use the Scale Manager. For short:

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'phaser-example',
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 800,
        height: 600
    },
    //... other settings
    scene: GameScene
};

var game = new Phaser.Game(config);

Here is the full code and here are some useful examples using the Scale Manager.

edited Mar 16 '19 at 08:23

answered Feb 24 '19 at 18:27

2

`Uncaught TypeError: Cannot read property 'FIT' of undefined` - what am I doing wrong? – Jess Aug 31 '19 at 00:07
@Jess seems it should be renamed to `Phaser.Scale.ScaleModes.FIT` or just harcoded as `3` [source code](https://github.com/photonstorm/phaser/blob/master/src/scale/const/SCALE_MODE_CONST.js#L69) – Vlad May 04 '20 at 06:18
@Vlad are you sure? I see the current version of Phase 3.23 being used in this [example](https://labs.phaser.io/100.html?src=src\scalemanager\fit.js) and it is using `Phaser.Scale.FIT`. – Jess May 04 '20 at 14:19
@Jess I'm using Kotlin and don't know how to use typescript `enum` external definition with it. So i simply hardcoded with magic number – Vlad May 04 '20 at 14:44

score 8 · Answer 2 · edited Nov 19 '18 at 12:01

There isn't a scale manager for Phaser 3 yet but it's in development. For now I suggest following this tutorial. It basically centres the canvas with some CSS, then calls a resize function that handles maintaining the game ratio when the resize event is emitted by the window.

Here is the code used in the tutorial linked above: The css:

canvas {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The resize function:

function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;

    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else {
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}

Then:

window.onload = function() {
    //Game config here
    var config = {...};
    var game = new Phaser.Game(config);
    resize();
    window.addEventListener("resize", resize, false);
}

This worked for me. I had to remove var from game and declared config outside the onload to get it to work properly. The new code is `window.onload = function () { //Game config here game = new Phaser.Game(config); resize(); window.addEventListener("resize", resize, false); }`. Works perfect now :) — Daniel Black, Mar 26 '20 at 18:06

score 0 · Answer 3 · answered Dec 02 '18 at 12:56

0

Try adding max-width to canvas css and then max-height based on aspect ratio. E.g:

canvas {
 display: block;
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 100%;
 max-height: 50vw;
}

answered Dec 02 '18 at 12:56

theBigBadBacon

129
1
5

score -1 · Answer 4 · answered Nov 29 '19 at 16:36

-1

Scale manager will handle assets(Images,Sprites,..,...) positions and size sometime?

answered Nov 29 '19 at 16:36

Sebastián Mahuzier

62
10

2

it will be better if you describe more. – Er. Amit Joshi Nov 29 '19 at 17:10

How to make canvas responsive using Phaser 3?

4 Answers4