Jump to content

Scaling the game to fit inner window


jake.caron
 Share

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

Link to comment
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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