Maximising game viewport?

[umatheusg]

Hello there,

I've been trying to achieve what games like this do (making the game viewport fit the browser page):

With Phaser but no success, my game looks like that:

 

Using innerWidth/Height. I tried other variables but no one worked. I'm using RESIZE scaleMode. It not only doesn't fit the window (bottom) but also has a margin I can't seem to get rid of. Is there any way around this? Thanks.

[Tilde]

Currently working on this myself. The margin is because HTML bodies have a natural margin you have to get rid of:

 

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: black;
}
#container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

Beyond that, RESIZE doesn't actually resize for me. EXACT_FIT does, but that also stretches the elements, which we don't want.

[umatheusg]

Hello, Tilde, thanks for the response!

I added this to my game's css and it did nothing at first. I realized that what was not letting me get rid of the margin was Visual Studio, when I started the project using F5 (I'm using TypeScript). If I run it directly via default.htm or index.html (I'm not really sure if I should be using default.htm, which is what the TS project template from VS comes with, so I made an index.html with the same content), this is what I get:

Great. Exactly what I wanted. Until I resize the window.

What bugs me is that the game will resize horizontally, but no vertically. I have to refresh the page for the game to "refresh". I have nothing in my update() to refresh it though, so maybe I'm missing something? Another problem is that, outside VS, Phaser.AUTO won't show the sprites, only CANVAS. I'm still trying to understand what's wrong but if it persists, I'll just use CANVAS instead.

This is my game code:

class SimpleGame
{
    constructor()
    {
        this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, "content",
            {
                preload: this.preload,
                create: this.create,
                update: this.update
            });
    }

    game: Phaser.Game;
    logo: Phaser.Sprite;
    barracks: Barracks;
    camera: Phaser.Camera;
    zoom: number;
    
    preload()
    {
        this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
        this.game.stage.smoothed = false;
        this.game.scale.refresh();

        this.game.load.image("barracks", "data/sprites/barracks.png");
        
    }

    create()
    {
        this.game.stage.backgroundColor = '#6495ed';
        
        this.logo = this.game.add.sprite( 8,  8, "barracks");
        this.logo = this.game.add.sprite(32,  8, "barracks");
        this.logo = this.game.add.sprite(32, 32, "barracks");

        this.zoom = 3;
        this.game.world.scale.setTo(this.zoom);
    }

    update()
    {
        if (this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).justDown) {
            this.zoom++;
            this.game.world.scale.setTo(this.zoom);
            this.game.scale.refresh();
        }

        if (this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).justDown) {
            this.zoom--;
            this.game.world.scale.setTo(this.zoom);
            this.game.scale.refresh();
        }
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

Thanks in advance!

EDIT: NO_SCALE did the job. Phew! Finally! 

EDIT2: I also had to add this to my update():

this.game.scale.setGameSize(window.innerWidth, window.innerHeight);

 

[samme]

http://s.codepen.io/samme/debug/WpMPaN/LDkmdVyBBgoA

[Tilde]

So this is weird, but my current solution doesn't even use scaling options, because I want my game to put certain elements relative to the edges of the screen. So I ended up with this in the update loop:

if (game.width != window.innerWidth || game.height != window.innerHeight) {
  this.resizeScreen();
}

And that looks like this:

resizeScreen: function() {
    game.scale.setGameSize(window.innerWidth, window.innerHeight);
    game.world.setBounds(-game.width / 2, -game.height / 2, game.width, game.height);
    game.camera.focusOnXY(0, 0);
    game.scale.refresh();

    console.log('Screen resized: ' + game.width + 'x' + game.height);
    /*
    this.test = game.add.sprite(0, 0, this.solidRectBmd);
    this.test.anchor.setTo(0.5);
    this.test.width = 100;
    this.test.height = 100;
    this.test.tint = 0;
    */
  },

Just as valid hopefully?