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!
