Sign in to follow this  
jake.caron

Scaling the game to fit inner window

Recommended Posts

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

Share this post


Link to post
Share on other sites

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!

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  

  • Recently Browsing   0 members

    No registered users viewing this page.