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!
-
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.
-
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.
-
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');
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 * game_ratio;
// Scale canvas
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
window.addEventListener('resize', resizeApp);