Michał Lipa Posted October 22, 2016 Share Posted October 22, 2016 I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices? I found on google that the most popular resolution is (480, 320) var game = new Phaser.Game(480, 320, Phaser.CANVAS); I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides). How developers scale their games to fit all phones? Link to comment Share on other sites More sharing options...
squilibob Posted October 24, 2016 Share Posted October 24, 2016 There's no reliable way to ensure your phaser project will scale properly with any one method so you'll have to try one of the below and see what works best for you. You may even use a combination of the following options. Method 1: Use the meta tags in your html you can use: <meta name="viewport" content="user-scalable=no"> with other options to scale the entire page. You may need the meta tag <meta name="apple-mobile-web-app-capable" content="yes"> for new iOS versions as well if you do this. Method 2: Set the phaser game dimensions based on DOM width and height You could set a minimum resolution like you have already done and then if the device is bigger, use that resolution instead const Presets = { 'width': window.innerWidth < 480 ? 480 : window.innerWidth, 'height': window.innerHeight-32 < 320 ? 320 : window.innerHeight } var game = new Phaser.Game(Presets.width, Presets.height, Phaser.CANVAS); Method 3: Set the phaser game dimensions based on client OS var Presets = { 'width': 480, 'height': 320 } if (game.device.iOS == true) Presets = {'width': 320, 'height': 600} Method 4: Use the phaser scale manager to set the size of the game preload: function () { game.scale.scaleMode = Phaser.ScaleManager.RESIZE ; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.canvas.style.width = '100%'; game.canvas.style.height = '100%'; game.scale.refresh(); }, Michał Lipa 1 Link to comment Share on other sites More sharing options...
luisb Posted March 9, 2018 Share Posted March 9, 2018 doesnt work.... Link to comment Share on other sites More sharing options...
DoraemonEXA Posted March 12, 2018 Share Posted March 12, 2018 If your game is landscape orientation, may be you can try this code, generally i call it "fixed height" scale mode, and the target width & target height is the design resolution of your game (I use typescript) class SimpleGame { game: Phaser.Game; static readonly targetWidth = 2560; static readonly targetHeight = 1280; constructor() { this.game = new Phaser.Game(SimpleGame.targetWidth, SimpleGame.targetHeight, Phaser.AUTO, 'content', { preload: this.preload }); } preload() { this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setResizeCallback(function (scale: Phaser.ScaleManager, parentBounds: Phaser.Rectangle) { let h = scale.game.canvas.parentElement.offsetHeight; let scaleY = h / scale.game.height; scale.setUserScale(scaleY, scaleY, 0, 0); scale.setGameSize(SimpleGame.targetWidth, SimpleGame.targetHeight); }, null); } } Link to comment Share on other sites More sharing options...
Recommended Posts