Game Scaling for a fixed frame size

[Titus]

Hi Guys, 

I've recently started using Phaser and I'm developing a game to be used in a web browser on PC and mobile. The game has to be displayed in a specific frame size (853 x 480). The game will also have a full screen button that would then scale the game to the user's device window. I have the assets for the game created at 1920 x 1080 and I would like to use them in the game by using Phaser's scaling methods. I have found lots of resources on how to scale the game world to the user's device for full screen but I cannot find a way to scale the game to a specific frame size.

Here is where I initialise a new Phaser game.

FireSim.game = new Phaser.Game(1920, 1080, Phaser.AUTO, 'game');

The plan is to create the game at 1920 x 1080 and add all the assets to the screen and then resize the game world to 853 x 480. To achieve this, I've tried:

this.scale.setGameSize(853, 480);

But this doesn't resize any of the assets within the game, only the game window. Do I need to add all the game assets to a group and then scale from there? Another way I could do this is to simply use two different sets of assets, those to be used in the fixed sized window and then when the user goes full screen it would pull the 1920 x 1080 assets and scale them accordingly. I feel like I might be missing something really obvious though, so any help would be appreciated.

 

Thanks 

[mattstyles]

Scaling for full screen IS just scaling for a fixed size, there's no difference.

Are you trying to scale a 1920x1080 background image? If so then scaling isn't going to be very helpful as the image will only continue to look decent when the aspect ratio matches i.e. 960x540 will be fine but 1200x1000 is going to really skew/stretch your image and it'll likely look terrible.

If you are using full-screen/viewport images then you might want to consider a more involved solution that cuts out part of your background image, such as how normal TV sizes render wide-screen content, they just snip the sides off, which obviously means that your images have to be carefully created so that important information isn't lost when they are cropped to the viewport/screen/frame size.

[Titus]

Thanks for the reply, mattstyles.

Quote

Scaling for full screen IS just scaling for a fixed size, there's no difference.

Apologies if this is really obvious, but how would I achieve the below type of scaling when I setGameSize(853, 480);

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

because when I change the game size, my 1920 x 1080 background image isn't scaled down to fit in the new game size.

Or maybe what I should be doing is adding the background image and all the other assets to a group and then resizing them specifically for the fixed game size. I'm new to game development and not really sure what is possible or best practice within the Phaser framework. 

Quote

If you are using full-screen/viewport images then you might want to consider a more involved solution that cuts out part of your background image, such as how normal TV sizes render wide-screen content, they just snip the sides off, which obviously means that your images have to be carefully created so that important information isn't lost when they are cropped to the viewport/screen/frame size.

When the user fullscreens the game, the plan is to resize it dynamically. I do plan on having some safe zone on the background to allow for differences in aspect ratio and resolutions.

[ptotheaul]

I have this exact same question.  I have a game that is 1140x710 but I want to scale it down to be 803x500.  I've tried:

this.scale.setGameSize(803, 500);

but this just scales down the container without scaling down any of the assets to the visuals of the game get cut off.  How to scale the whole game down proportionally?

[ptotheaul]

I've figured out my question.  To scale the game and the assets you use:

this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
this.scale.setUserScale(.7, .7, 0, 0);

.7 is a percentage of the original games size.  You would just need to calculate the percentage needed to get to 853 x 480.

[Titus]

@ptotheaul Thank you! That was exactly what I was looking for.