Scale to any screen size - the best solution?

[megmut]

Hey guys, I've put a lot of time and energy into trying to find the best / correct methodology for scaling my games ready to port to Android, IOS and Windows. However everywhere I turn, there seems to be conflict, inaccurate posts, half implemented code and dodgy at best results. 

I was wondering if anybody here knows of a decent article, code library or learning resource where I may tackle this problem once and for all. Just to clarify, I'm using Cordova at the moment, and I'm very happy with the results thus-far, so it's not that I'm looking to switch, though I will if there is a library that makes a perfect solution.

I'm more looking for a clean, effective and efficient way to get my games / apps to scale to different screen sizes, aspect ratios and pixel density. From what I've read, this is somewhat of a cumbersome undertaking, but I'd appreciate any input! 

Thanks

[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);

 

[megmut]

@VitaZheltyakov I tried using your code, however you have not declared what canvas_height_max is, so I'm presuming it's the maximum x and y of the game canvas.

However, even when trying this code, it still does not scale correctly. 

[VitaZheltyakov]

1 hour ago, megmut said:

@VitaZheltyakov I tried using your code, however you have not declared what canvas_height_max is, so I'm presuming it's the maximum x and y of the game canvas.

However, even when trying this code, it still does not scale correctly. 

What's wrong? (screenshot)

[PRSoluções]

Check how im doing it now:

https://gist.github.com/prsolucoes/f0d048062b80689de1aa3e8fa8bcc07b

Change variable USE_DEVICE_PIXEL_RATIO to true to change the effect using or not device pixel ratio.

Thanks.

[Tom Atom]

Hi, if you want to scale your game to any resolution, you have to solve two connected problems:

• different aspect ratios
• letterboxing (pilarboxing)

Let's say you have game in 1280 x 800 (ratio = 1.6) and you want to run it on iPad (1024 x 768 ... ratio = 1.333). Then you have either distort your image to fill entire screen or cut part of your screen or you will have black bars in top and bottom of your screen. For 1280 x 800 you would need iPad to have 1024 x 640 to preserve aspect and fill whole screen without cutting part of game or adding letterboxes. None, of engine built in scale methods will help you - it is up to you to create some logic, that can differ from game to game. For example strategy game with map displayed may mean, that different part of map will be seen on different screen aspects. But if you have some game or screen, where most of the action takes place on one screen (for example almost every menu screen, even in strategy game) you have to create something.

 Solution I use is still working for me. I am creating some "save" area where game takes place and some additional areas which may be displayed or not (depending on aspect). These additional areas have some limit. If aspect is too wild then stretching of game comes into place to avoid letterboxing at all costs. Some time ago I wrote detailed article about it here: http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html