Jump to content

Screen scaling problems


owen
 Share

Recommended Posts

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

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

Link to comment
Share on other sites

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

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

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...