Resize Game?

What am I doing wrong here with my resizing calculations? The window resizes wrong when I resize the browser window using the console window as well as minimize / maximize.

class Game extends Phaser.Game {

	constructor ( config ) {

		super ( config );
		const model = new Model( );

		this.globals = {

			model, bgMusic : null, 

		};

		this.scene.add ( 'Boot', BootScene );
		this.scene.add ( 'Preloader', PreloaderScene );
		this.scene.add ( 'Title', TitleScene );
		this.scene.add ( 'Options', OptionsScene );
		this.scene.add ( 'Credits', CreditsScene );
		this.scene.add ( 'Game', GameScene );

		this.scene.start ( 'Boot' );

	}

}

this.__resizeGame = function ( ) {

	this.__canvas = document.querySelector ( 'canvas' );

	this.__windowRatio = ( __GAME_WIDTH / __GAME_HEIGHT );
	this.__gameRatio = ( this.__game.config.width / this.__game.config.height );

	this.__GAME_WIDTH = ( window.innerWidth ); // ( Takes up the inner window's width )
	this.__GAME_HEIGHT = ( window.innerHeight ); // ( Takes up the inner window's height )
	this.__GAME_PIXELRATIO = ( window.devicePixelRatio ); // ( Get's Device's Pixel Ratio )

	console.error ( this.__GAME_WIDTH );
	console.error ( this.__GAME_HEIGHT );
	console.error ( this.__GAME_PIXELRATIO );

	if ( this.__windowRatio < this.__gameRatio ) {

		this.__canvas.style.width = this.__GAME_WIDTH + "px";
		this.__canvas.style.height = ( this.__GAME_WIDTH / this.__GAME_PIXELRATIO ) + "px";

	}

	else

	{

		this.__canvas.style.width = ( this.__GAME_HEIGHT * this.__GAME_PIXELRATIO ) + "px";
		this.__canvas.style.height = this.__GAME_HEIGHT + "px";

	}

}

	this.__game = new Game ( );

window.onload = function ( ) {

	this.__resizeGame ( );

	window.addEventListener ( "resize", this.__resizeGame, false );

	this.stats = new Stats ( );
	document.body.appendChild ( this.stats.dom );

	window.focus ( );

}

Any help is greatly appreciated!

Getting tired of being ignored…

Someone can help?

Take a look at topic #1555.

I apologize, this does not help… :frowning:

Hi @Thundros,
At first glance, it seems that you should calculate __GAME_WIDTH and __GAME_HEIGHT before using them in your resize function.
Sometimes window.innerHeight and window.innerWidth doesn’t give the expected results, In those cases you could use this.__canvas.clientHeight and this.__canvas.clientWidth .
Good luck!!

@jjcapellan : how would I detect this & set it appropriately?

Why not just use the Scale Manager? This looks like ScaleModes.FIT.

1 Like

@samme : will this work on all devices for all content including text?

Just tried it. It won’t resize anything. I need some sort of function that can do this.

It’s definitely resizing things in the example. Read the docs for help with it.

If you don’t want to use the Scale Manager, you can find code snippets here on the forum that do something similar.

Questions like this one (“it’s not working, fix my code”) may get ignored because they’re huge time sinks. You could spend 5 minutes making a runnable example. And you’ve asked dozens of questions here but never once said thank you.

My apologies @samme. Thank you once again for the help. I really do appreciate it.