Resolutions and scaling

[Cedric]

Hello everyone,

The magority of tutorials you can find on the internet regarding the making of mobile games all cover the actual gameplay.

But I can't find a good tutorial on the actual setup of the game like choosing the screen res and how to scale the game so it will work on almost all devices. I do not necessarily mean a step by step rundown, which would actually not be a bad idea.

Can you someone give me a guideline on how to understand, use and setup a game for full mobile release? 

Thank you so much in advance,

Very kind regards,

Cedric 

[Tom Atom]

Hi, "basic" resolution depends on whether your game should be PC only or PC/mobile. For PC I would use larg resolution without worries. For mobiles 1280x800 or 960x600 (80% of previous) are OK in my opinion.

Scaling is another problem. As there are different aspect ratios most of "simple" scaling methods is not enough. You have to use some clever logic when on some screens you usually see something more or less then on others. Some time ago I wrote tutorial on it here (posted on this forum many times): http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

 

[VitaZheltyakov]

Use code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

[Cedric]

@VitaZheltyakov if I would use the code you provided, can I put all my sprites in one big group and set the group's scale to the scale_ratio ? 

@Tom Atom thank you for reply tom  I will definantly check out your tutorial I will get back with updates on how the development is going

Also what do you think of this article ? http://gamedevelopment.tutsplus.com/articles/quick-tip-what-is-the-best-screen-resolution-for-your-game--gamedev-14723

[Tom Atom]

Quote

Also what do you think of this article ? http://gamedevelopment.tutsplus.com/articles/quick-tip-what-is-the-best-screen-resolution-for-your-game--gamedev-14723

thanks for link. Article is from 2014, which is not so old, but it is referencing Emanuele's article with screen size stats from 2009 ... which is pretty old.

In my answer I recommended 2 resolutions: 960x600 and 1280x800. While the first is 80% of second in both dimensions, it is only 64% in total areal (0,8 * 0,8). For game which can be resource intensive, I would use 960x600. If I am sure game will run smooth, then I would prefer 1280x800 as it is easy to add fullscreen mode and then player is not distracted with browser UI (of course only when browser supports full screen). Scaling too much makes game blury.

In our game Woodventure I was afraid of performance on small mobile screens, so we made two sets of graphics asstes - one for 1280x800 and second for 640x400. Game loaded one of the sets based on screen size. All positions in game were recalculated to work with both sets. It was additional work and I am not doing this again in current games... it was kind of premature optimization and as we all know: "premature optimization is root of all evil" :-)

[VitaZheltyakov]

4 hours ago, Cedric said:

@VitaZheltyakov if I would use the code you provided, can I put all my sprites in one big group and set the group's scale to the scale_ratio ?

Yes, you can. But all your sprites must have same scale

[Cedric]

@Tom Atom I am planning on using pixel art so the blurriness is not an issue. As far as screen res go what are my options? I'm only planning on releasing to mobile so no need to worry about browser UI I think.

@VitaZheltyakov ok thanks  

[mattstyles]

Your choices basically come down to 2.

Option 1: Fixed Viewport Games

e.g. Tetris

Either you have a fixed viewport, something like Tetris, whereby you would have to scale the viewport to fit the window. Unless the window aspect ratio matches your viewport aspect ratio you will always have letter-boxing or pillar-boxing, i.e.

window is 1200, 800, so aspect is 1.5

viewport is 600, 400, so aspect is 1.5

in this case you are golden, just scale up the viewport to fit the window, in this case you would scale by 1200 / 600. Always scale the same on both axes as stretching, squashing generally looks crap. If, however, you have a different case:

window is 1200, 800 so aspect is 1.5

viewport is 600, 600 so aspect is 1

As the aspect differs you know there is going to be some dead-space around your game viewport, in this case you can probably tell that the maximum you can scale your viewport is by 800 / 600 so your viewport becomes 800, 800 and you have some pillar-boxing going on. This is not a problem generally.

If you take this approach you probably just want to apply a scale to the master container, or stage. Then in your game logic code you simply forget anything about scale, the scaling on the master container handles that, everything else remains the same. Think this might be how the Phaser auto-scaling thing works.

Scaling can affect your graphics, so you might not want to scale to simply arbitrary amounts. For instance, if your game is a pixel-art affair then you can use nearest-neighbour scaling to maintain your pixel look but you'd need to clamp it to scaling using integers, scaling a pixel by 1.5, for example, is going to result in some abnormalities and ruin your pixel look.

You might also want to support only a set amount of views, but, bare in mind this is a poor choice for longevity. Screens sizes always change, manufacturers bring out new screen sizes all the time, with the proliferation of mobiles there are a myriad of screen sizes in common use and you'll never cater for all of them. Of course, you might decide that to only cater for a certain subset of all users is a good plan (it likely is, but shouldnt be for device size reasons), i.e. if you game requires a mouse to play then you can be reasonably sure that users are going to have a fairly large screen. Hardcoding to a certain view size might be the easiest way to go if you're in this bracket.

 

Option 2: Dynamic Viewport

e.g. Roguelikes, open-world style stuff

Any game that features a large game world, one that might very well exceed any reasonable viewport (say, a 2d world 1000x1000 tiles) and the viewport size for your game (you might call it your camera) becomes irrelevant, you simply show as much of the game world as you can.

In this case you probably don't want to scale anything, simply show more or less of the game world.

Given our example of a 2d top-down world, lets assume tiles are 100x100px in size, if your viewport ends up being 600x600 then you simply show a 6x6 grid of your world, if your viewport ends up being 650,600 then you'd show 7x6 as part of the 7th column will fit in view. 

As the user resizes their window, or uses a different device, you simply change your renderer to show only the relevant portion of the world. Many camera implementations will handle this for you.

 

Bonus Option: Web App Style Dynamic Views

Most websites now use media queries or other techniques to render the view differently depending on window size. You can take this approach with your game but it is generally far far harder to get it to work than your average website/web-app.

An example that I can think of off the top of my head, if you game experiences severe pillar-boxing you might be able to show a leaderboard or chat screen in the dead-space but remove it for skinnier screens. As you are showing less content for smaller screens a general rule of thumb would be to only show non-important info in these sections. Of course you might take the approach that your leaderboard is 300 pixels wide on skinny screens and 700 on larger screens, for example, whereby everybody sees the same content, just in different forms.

[Cedric]

On 4/12/2016 at 3:52 PM, VitaZheltyakov said:

Use code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

@VitaZheltyakov what should be my game's resolution ? the window.innerwidth ? 

[Cedric]

@Tom Atom how does your giving article compare to the code given by @VitaZheltyakov

[VitaZheltyakov]

27 minutes ago, Cedric said:

@VitaZheltyakov what should be my game's resolution ? the window.innerwidth ? 

You can use any screen resolution.

window.innerWidth - This screen width (native js)

You must determine the  canvas_height_max and canvas_width_max.

[Tom Atom]

Quote

@Tom Atom how does your giving article compare to the code given by @VitaZheltyakov

I think, that @VitaZheltyakov is scaling sprite (ball) with calculated scale. Approach taken in my tutorial leaves objects scales as it is and calculates scale for whole game. Also not sure, whether scale mode SHOW_ALL will prevent black letterboxes/pilarboxes.

[VitaZheltyakov]

2 hours ago, Tom Atom said:

I think, that @VitaZheltyakov is scaling sprite (ball) with calculated scale. Approach taken in my tutorial leaves objects scales as it is and calculates scale for whole game. Also not sure, whether scale mode SHOW_ALL will prevent black letterboxes/pilarboxes.

You can not test my code? This code allows you to display the same scale image in the whole game. Without letterboxes/pilarboxes. With any proportions and orientations

Exemple:

[Cedric]

hi all,

Can you give your feedback on this articale and how I can do the same with code instead of consturct 2 ? 

https://www.scirra.com/tutorials/1126/multiple-screen-sizing-for-all-mobile-devices

Very kind regards,

cedric.

[Cedric]

On 4/13/2016 at 11:59 PM, VitaZheltyakov said:

You can not test my code? This code allows you to display the same scale image in the whole game. Without letterboxes/pilarboxes. With any proportions and orientations

Exemple:

how did you get the info on the right ? (in green letters)

[VitaZheltyakov]

2 minutes ago, Cedric said:

how did you get the info on the right ? (in green letters)

Thit is my own debug info

[Cedric]

19 hours ago, VitaZheltyakov said:

Thit is my own debug info

looks really good  how did you code it ? is it with phaser or is it a plugin ?

[VitaZheltyakov]

 

7 hours ago, Cedric said:

looks really good  how did you code it ? is it with phaser or is it a plugin ?

It is Phaser.

[shohan4556]

On 4/12/2016 at 7:52 PM, VitaZheltyakov said:

Use code:

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

what will be the canvas_height_max and canvas_width_max size ? 

[VitaZheltyakov]

2 hours ago, shohan4556 said:

what will be the canvas_height_max and canvas_width_max size ? 

These parameters indicate the maximum size of the game window. I use 2048 (px)