Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Scaling the game to fit inner window

jake.caron

By jake.caron,
in Phaser 3

 Share

Recommended Posts

jake.caron Newbie

jake.caron

Posted
Posted

Hi All,
Just trying to scale the game so it works across multiple resolutions. I know that I can check the inner window's dimensions and adjust the height and width accordingly, but I would like to scale everything instead. In Phaser 2 I was able to use the following:

  

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.pageAlignHorizontally = true;
this.game.scale.pageAlignVertically = true;
this.game.scale.updateLayout(true);
this.game.scale.refresh();

Is there an equivalent in Phaser 3?

 

Thank!
Jake

Link to comment
Share on other sites
jamespierce Newbie

jamespierce

Posted
Posted

I have had lots of problems with the scaling in my Phaser 3 games at the beginning. Like you, I was used to the luxury of the Phaser 2 Scale Manager :D However, meanwhile I have figured out a way that worked perfectly so far in all of my games and on all platforms / browsers.

My resizeApp() function also takes into account the DPI values of different mobile devices. I noticed that even if I keep the ratio correct, different DPI values can STILL mess up my scaling. Since I've taken this into account it's working perfectly on all mobile devices that I've tested.

What my resizeApp() function also does it centers the canvas on the screen and it always keeps the correct aspect ratio. And if the device screen has a different ratio than what you need for your game, it scales it to the maximum possible size while still keeping the proper ratio - thus adding a black bar on the top and bottom (like the movies that have to adhere their ratio but your TV has a different one). This prevents it from distorting the canvas by filling the entire screen with a wrong aspect ratio.

When you copy-paste my code below, you need to adjust this line for your own game:
let game_ratio = (9 * 32) / (15 * 32);
with
let game_ratio = width / height;

The width and height values must be the same that you provide in the config object when you create your Phaser game, such as: new Phaser.Game(config); 

let scenes		= [];
	
scenes.push(BootScene);
scenes.push(PreloadScene);
scenes.push(PlayScene);

const config		= {
	type: Phaser.AUTO,
	width: 9  * 32, // 288
	height: 15 * 32, // 480
	parent: 'phaser-app',
	scene: scenes
};

let game = new Phaser.Game(config);

Besides that, you can just copy-paste the code below and it should work.

Anyways, here is the resizeApp() function: 

<script>
function resizeApp()
{
	// Width-height-ratio of game resolution
	let game_ratio = (9 * 32) / (15 * 32);
	
	// Make div full height of browser and keep the ratio of game resolution
	let div = document.getElementById('phaser-app');
	div.style.width = (window.innerHeight * game_ratio) + 'px';
	div.style.height = window.innerHeight + 'px';
	
	// Check if device DPI messes up the width-height-ratio
	let canvas = document.getElementsByTagName('canvas')[0];
	
	let dpi_w = (parseInt(div.style.width) / canvas.width);
	let dpi_h = (parseInt(div.style.height) / canvas.height);		
	
	let height = window.innerHeight * (dpi_w / dpi_h);
	let width = height * 0.6;
	
	canvas.style.width = width + 'px';
	canvas.style.height = height + 'px';
}

// Add to resize event
window.addEventListener('resize', resizeApp);

// Set correct size when page loads the first time
resizeApp();
</script>

 

Here is the HTML and CSS that you need to make it work: 

// HTML
<body>
    <div id="phaser-app"></div>
</body>

// CSS
<style>
body {
	margin: 0;
	overflow: hidden;
	background-color: black;
		}
		
	#phaser-app {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
		
	canvas {
		width: 100%;
		height: 100%;
	}
</style>

 

Hope it helps!

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...