jake.caron Posted September 26, 2018 Share Posted September 26, 2018 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 More sharing options...
Budda Posted September 27, 2018 Share Posted September 27, 2018 A new Scale Manager is Coming to v3 in a future (soon) release I believe I read somewhere. blackhawx and jake.caron 2 Link to comment Share on other sites More sharing options...
samme Posted September 27, 2018 Share Posted September 27, 2018 jake.caron 1 Link to comment Share on other sites More sharing options...
jamespierce Posted September 27, 2018 Share Posted September 27, 2018 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 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! jake.caron 1 Link to comment Share on other sites More sharing options...
jake.caron Posted September 27, 2018 Author Share Posted September 27, 2018 Great plugin Samme and thank you for the code James. I ended up going with James' approach and it works very well! jamespierce 1 Link to comment Share on other sites More sharing options...
Recommended Posts