Rattler Posted December 11, 2017 Share Posted December 11, 2017 I am fairly new to Phaser and have found these forums an excellent resource. I am building a game the was originally only for desktop, however now I am trying to get this working on tablets as well. The game is landscape only and is pretty much complete. It is made to run on a canvas of width 1200 x 740. I have added the below to the preload which works fine if the game loads on a resolution larger than the config width and is scaled smaller. (browser resized) However when loading on a device/browser with the screen under 1200 wide, sections of the sprites are chopped off, resizing the browser works the same but sections are still cut off. const docElement = document.documentElement const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.maxHeight = height; this.game.scale.maxWidth = width; Any help would be greatly appreciated. Link to comment Share on other sites More sharing options...
Rattler Posted December 11, 2017 Author Share Posted December 11, 2017 I have just realised what the problem is. When creating the game it was being created using the following code class Game extends Phaser.Game { constructor () { const docElement = document.documentElement const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight super(width, height, Phaser.CANVAS, 'content', null) } } Changing this so that the game is created at a fixed size and letting the scaling scale to the users browser width as in previous post now works. super(config.gameWidth, config.gameHeight, Phaser.CANVAS, 'content', null) Link to comment Share on other sites More sharing options...
Recommended Posts