Scaling the browser to fit the background image

[shvalb]

Hi,

 

I'm new to Phaser and I'm trying to handle a case where my background image is 2732x2048 (4:3 ratio)

 

and I'm trying to fit it into the browser window and keep the ratio while resizing.

 

I've read many tutorials\forums about this issue - but most of them where not up-to-date with current Phaser's API.

 

I would like it to fit Browser's window as well as mobile screen. for browser it also has to react to resize.

 

 

This is my current attempt:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create });function create() {  var w = window.innerWidth;  var h = window.innerHeight;  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;  game.scale.setGameSize(w,h);  game.scale.pageAlignHorizontally = true;  game.scale.pageAlignVeritcally = true;  game.scale.refresh();  game.add.image(0, 0, "lobby_bg_img");}

This doesn't fit the entire image into the browser's window.

 

If I change the size to 2732x2048 upon creating the 'game' object - then it fits fine.

 

But I would like to 'best' scale the image into the current browser's window size and not the opposite.

 

Thank you!

[drhayes]

I don't know what your requirements are, but what if that image were an actual-factual <img> tag in your HTML? Then the game wouldn't bother drawing it (performance improvement) and CSS could scale it effortlessly without having to muck around with scale or anything.

 

The scale manager setup you have now will resize your game's canvas as the screen/window size changes, but if the aspect ratio of the new size doesn't match then you will get black bars on the sides or top of your game canvas. One thing to think about.

 

Store the image somewhere, like in a var or on a state. Set its width and height to the width and height of your game instance (window.innerWidth, window.innerHeight). The scale manager has a method called "setResizeCallback" which you can use to resize the image back to window.innerWidth and window.innerHeight as it changes.

[shvalb]

The image as a ratio of 4:3, If I simply change its width\height and won't keep the ratio than it would be distorted.

 

I think padding is mandatory in browser so keep the image look sharp.

 

I just haven't figured out how to do that :-)

 

 

regarding <img> tag - The thing is that I have to dynamically place buttons and other objects on top of the image. so I'm not sure that CSS would help me in this case.

 

Thanks!

[drhayes]

Have you tried adding it to the game and then doing something like this?

var image = game.add.image(0, 0, "lobby_bg_img");image.width = game.width;image.height = game.height;

Unless I'm misunderstanding you, that will keep the image sized to the game canvas. As it scales, the image will scale too -- no need to update anything.