Search the Community

I am new to Phaser development and I am currently having trouble figuring out the correct code needed to have a game resize to the full viewport of a browser on window resize without stretching any of the graphics. I am working on a vertical scroller with a tilemap (1024x4608) for the base background/map. On window resize (or orientation change) I would like to be able to adjust the game dimensions to fill up the entire viewport while keeping the same ratio to allow the tilemap not to be distorted. From my tests, it seems that I would want to keep the width the same and adjust the height then let the game scaling do its thing to allow the game to take up the full browser viewport without stretching the tilemap. I just have not been able to figure out the correct ScaleManager settings to make that happen. I tried the following which does scale the game but does not adjust the width/height to take up the whole viewport: Game instantiation: var gameHeight = window.innerHeight * 1024 / window.innerWidth;var game = new Phaser.Game(1024, gameHeight, Phaser.CANVAS, 'test-game');In the window resize function: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.setScreenSize();game.scale.refresh();And this attempt takes up the whole viewport but does not scale correctly so it stretches the tilemap: In the window resize function: game.scale.setMaximum();game.scale.refresh();Any help would be greatly appreciated.