Sign in to follow this  
Titus

Game Scaling for a fixed frame size

Recommended Posts

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 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.