Screen scaling problems

[owen]

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

[Taleforge]

The Link isnt working for me. What Phaser version are you using - I dont see a mistake in your scaling-snippet.

[owen]

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.

 

Thanks

Owen

[Taleforge]

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.

[owen]

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

[Taleforge]

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.

[owen]

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.

[owen]

It worked, thank you!