Sign in to follow this  
Followers 0
umatheusg

Maximising game viewport?

5 posts in this topic

Hello there,

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

7c2830deb399452d96dcac5a2b361242.png

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

cjynIrG.gif

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

49227097fb47451da172d7f79ab6a068.png

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

FAe4DQK.gif

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! :D

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);

 

Tilde likes this

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.