Phaser.io 3: Get game size in scene

Question

It seems to be a simple question, but I just cannot resolve it:

I'm using Phaser.io 3 HTML5 game framework with ES6 classes, and I try to figure out the actual "Game Size" (or canvas / viewport size), so that I can center an object on screen:

class Scene1 extends Phaser.Scene {
    constructor(config) {
        super(config);
    }

    preload() {
        this.load.image('ship', 'assets/spaceship3.png');
    }

    create() {

        let ship = this.add.sprite(160,125, 'ship');
        // Here I need to figure out the screen width / height:
        // ---> How do I achieve that?
        ship.setPosition(width / 2, height / 2);
    }
}

I could not find a way to either read or calculate the actual viewport's / canvas' size. Any hints?

score 17 · Answer 1 · answered Sep 03 '18 at 12:51

17

In a scene, in the preload() and create() methods (not in the constructor) you can access the canvas element with this.sys.game.canvas. So to get the canvas size, you can do:

create() {
    let { width, height } = this.sys.game.canvas;
}

For my part I like to add the following code to ease the access to the canvas:

preload() {
    this.canvas = this.sys.game.canvas;
}

answered Sep 03 '18 at 12:51

yolenoyer

8,797
2
27
61

Thanks. Unfortunately this only works if the canvas engine is used - when webGL is used, this does not seem to be working? – Alex Schenkel Sep 03 '18 at 13:42
Sorry, I can't reproduce it, it's working for me in both cases – yolenoyer Sep 03 '18 at 15:47
1

The canvas width is not the same as the game width when working with a higher DPI pixel ratio – Kokodoko Mar 19 '19 at 15:16

James Skemp · Accepted Answer · 2020-04-06T19:49:21.700

13

You can use the default camera:

ship.setPosition(this.cameras.main.centerX, this.cameras.main.centerY);

From the Phaser 3 API Documentation on Camera:

Cameras, by default, are created the same size as your game, but their position and size can be set to anything.

edited Apr 06 '20 at 19:49

answered Sep 03 '18 at 18:56

James Skemp

8,018
9
64
107

Will an image placed on `this.cameras.main.centerX` and `Y` move with camera? What if I want it to be static and not to move with camera, instead being a background of the scene? – VELFR Jun 09 '19 at 12:57
@VELFR it depends upon your logic. If you put the above in your `update()` then the image position will be updated every frame, but if you put it in `create()` then it will take the current camera's values and not move the image. – James Skemp Jun 10 '19 at 13:12

score 2 · Answer 3 · answered Jun 27 '20 at 06:05

2

The following should work:

scene.sys.game.scale.gameSize

answered Jun 27 '20 at 06:05

Tyler Liu

19,552
11
100
84

score 2 · Answer 4 · answered Jan 16 '22 at 11:46

2

I use the following code in my preload to get both the width and height.

    this.gameWidth = this.sys.game.canvas.width
    this.gameHeight = this.sys.game.canvas.height

answered Jan 16 '22 at 11:46

Shutt

31
2

Phaser.io 3: Get game size in scene

4 Answers4