Scaling your Game on any Device

So basically I’ve just asked a very stupid question on discord but that eventually helped me find a bug in my scaling method. I’m going to summarize it here because it might help others also!

  1. My problem was: I created a bare bones Phaser 3 project which only creates a small tilemap, nothing else. However, the tilemap was being stretched in weird ways.

  2. Why was it a dumb question? Well turns out my CSS was scaling the whole canvas in weird ways. So while I kept debugging my PlayScene in Phaser it actually had nothing to do with that.

  3. My scaling method: Alright so here is now my updated scaling method, which also considers the device’s DPI. You can easily scale your games on desktop with simple width / height 100%. But mobile devices have different DPI values and then your game still stretches in ugly ways, even if it scales properly on Desktop.

So here it is. Add it to your game and let me know if you find ways to improve it!

If you also need the CSS code you can copy it from my Dev Blog.

function resizeApp ()
	// Width-height-ratio of game resolution
    // Replace 360 with your game width, and replace 640 with your game height
	let game_ratio		= 360 / 640;
	// Make div full height of browser and keep the ratio of game resolution
	let div			= document.getElementById('phaser-app');		= (window.innerHeight * game_ratio) + 'px';	= window.innerHeight + 'px';
	// Check if device DPI messes up the width-height-ratio
	let canvas			= document.getElementsByTagName('canvas')[0];
	let dpi_w	= parseInt( / canvas.width;
	let dpi_h	= parseInt( / canvas.height;		
	let height	= window.innerHeight * (dpi_w / dpi_h);
	let width	= height * game_ratio;
	// Scale canvas	= width + 'px';	= height + 'px';

window.addEventListener('resize', resizeApp);

Nice! I’ve linked to this from the community FAQ


Cool, thanks! I’ve also just posted this code snippet on my Dev Blog here: How to Scale your HTML5 Games on any Device