owen Posted November 14, 2014 Share Posted November 14, 2014 Hi all. Easy newbie question. I am trying to scale my game so it does this: - on mobile screens it fills the screen (max HD resolution) - on desktops it fills to a max of 640 x 790 I am doing this in my start() function: // scale to fit screen (or try to...) game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.minWidth = 640; game.scale.minHeight = 790; game.scale.maxWidth = 1080; game.scale.maxHeight = 1920; game.scale.refresh();What appears to be happening is the game is scaling (yay!) but the canvas is not, the canvas remains fixed in size so it's chopping off the rightmost and lowermost parts of the game when the game becomes bigger than the canvas. How can I get it to scale the canvas itself which contains the game too? Example of it going wrong is here: http://www.owensouthwood.com/rainbow/ I am sure this is simple but I'm stuck for ideas. Thanks!Owen Link to comment Share on other sites More sharing options...
Taleforge Posted November 14, 2014 Share Posted November 14, 2014 The Link isnt working for me. What Phaser version are you using - I dont see a mistake in your scaling-snippet. Link to comment Share on other sites More sharing options...
owen Posted November 14, 2014 Author Share Posted November 14, 2014 The Link isnt working for me. What Phaser version are you using - I dont see a mistake in your scaling-snippet. Sorry, typo in the link. Have edited and corrected. Try: http://www.owensouthwood.com/rainbow/ Phaser v2.0.1 Let's say my canvas is called "#gamediv" would I have to add something like this:$("#gamediv").width = game.world.width;$("#gamediv").height = game.world.height;I sense that I need to do *something* to the actual surrounding div that contains the canvas. ThanksOwen Link to comment Share on other sites More sharing options...
Taleforge Posted November 14, 2014 Share Posted November 14, 2014 Try the following: change your css to the following#gamediv { margin-top: auto; margin-left: auto; margin-right: auto;}#gamediv canvas { margin: 0px auto; border: 2px solid rgb(255, 255, 255);}important thing is: remove the fixed width and hight of your gamediv! Is it that what you are looking for? UPDATE:to limit the desktop resolution:game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;if (game.device.desktop) { game.scale.maxWidth = 640; game.scale.maxHeight = 790; }else { game.scale.maxWidth = 1080; game.scale.maxHeight = 1920;}I guess you will get trouble with that border on mobile - because it will result in scrolling bars when the canvas will fill the screen. Link to comment Share on other sites More sharing options...
owen Posted November 14, 2014 Author Share Posted November 14, 2014 Try the following: change your css to the following#gamediv { margin-top: auto; margin-left: auto; margin-right: auto;}#gamediv canvas { margin: 0px auto; border: 2px solid rgb(255, 255, 255);}important thing is: remove the fixed width and hight of your gamediv! Is it that what you are looking for? Thanks, I'll try it. But surely the very first line of code (declaration of the Phaser.Game object) forces a fixed size, regardless what the CSS says?var game = new Phaser.Game(640, 790, Phaser.AUTO, 'gamediv', { preload: preload, create: create, update: update }); Hmm. I'll continue playing and try what you said. Thanks!Owen Link to comment Share on other sites More sharing options...
Taleforge Posted November 14, 2014 Share Posted November 14, 2014 That line is ok!But in your css you had a fixed size on the div with the id "gamediv"! So you have a container with a fixed size of 640 * 790 pixels and inside that container there is a canvas-element created by phaser that scales itself from minimum 640 * 790 pixels to maximum.1920 * 1080 pixels.So the container is always limiting the size of the canvas element. Link to comment Share on other sites More sharing options...
owen Posted November 14, 2014 Author Share Posted November 14, 2014 That line is ok!But in your css you had a fixed size on the div with the id "gamediv"! So you have a container with a fixed size of 640 * 790 pixels and inside that container there is a canvas-element created by phaser that scales itself from minimum 640 * 790 pixels to maximum.1920 * 1080 pixels.So the container is always limiting the size of the canvas element. Ah right of course yes I see what you mean. Duh. Thanks, I'll try it and post again. Link to comment Share on other sites More sharing options...
owen Posted November 17, 2014 Author Share Posted November 17, 2014 It worked, thank you! Link to comment Share on other sites More sharing options...
Recommended Posts