Content outside your maxWidth/maxHeight

[tackle]

I'm trying to figure out the way to have content that scales with the device aspect ratio.

 

A portrait mode game could be sized at 640 x 960. An iPhone5 however has a resolution of 640x1134 (you wont see ALL of that due to browser GUI etc but still).

 

How would you set up your game to be based around 640x960 for example but still have graphics that can go outside this area? Would this only be possible with HTML/CSS? It would be a viable solution since usually you're just aiming to make a background take up more space for it to look good and avoid black bars on the sides of the game.

 

I'm trying out an approch where I do this:

var game = new Phaser.Game(640, 1134, Phaser.AUTO, 'game');//[...] and then in the game:this.game.stage.scale.maxWidth = 640;this.game.stage.scale.maxHeight = 1134;

What's funny is that on iPhone4s (iOS 5) Google Chrome I get no black bars, it's all maximized. But on a Nexus 7 (also Google Chrome) it's displaying the full height of 1134px so I get huge black bars on the left and right side.

 

How do you come around this issue?

 

[rich]

You have a fixed game size (it's up to you what that size is) and then scale the canvas to make up the difference. There's an example of this in the dev branch in resources/Project Templates/Full Scale Mobile Game. Have a quick look at the html/css/phaser combo I use there and apply as you need.

[tackle]

You have a fixed game size (it's up to you what that size is) and then scale the canvas to make up the difference. There's an example of this in the dev branch in resources/Project Templates/Full Scale Mobile Game. Have a quick look at the html/css/phaser combo I use there and apply as you need.

 

Not sure I follow.. Sorry I've been confusing myself a lot about this, since there's so many variables in action (pixeldensity not helping either )

 

I'm actually using the template you mentioned, thanks for that one!

 

I think what I'm trying to figure out is if there's a good way to have a variable aspect ratio basically.

Let's say my fixed game size is 640x960 (iPhone 4 resolution) and that's what I'm aiming for layout-wise in my game.

On an iPhone5 I have a lot of extra height and want to fill this extra height with more of the background for example. But in both size scenarios I want it to display the full width of 640px.

 

If I make my new Phaser.Game(640, 960) I will get black borders on top/bottom on the iPhone 5 since that screen is larger.

Reversed, new Phaser.Game(640, 1134) will on the iPhone 4 show black borders on the left/right sides.

 

So I was thinking if it was a common approach to design for let's say 640x960, keep everything in Phaser set to 640x960 and then use html/css to fill up the last 174 pixels for the iPhone 5 user.

And here I'm simply talking a cosmetic extra 174 pixels.

[rich]

The most common approach is to design to a fixed size and then just scale it, and if there are 'blank' areas to the sides then so be it. Some games do what you describe, but not many, the extra ballache involved is quite substantial imho, and you end up just rendering effectively 'wasted' space. Even so, I know some devs want this so I added the ability to set a width/heigh (or both) to 100% in 1.1.4, but it's up to you how you position the elements around the game to take advantage of that variable space.