Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Scaling and Resolution of Window/Assets for Desktop and Mobile


dewder
 Share

Recommended Posts

I've been looking for information on how to control scaling and resolution of the window, asset, gui, etc. but can't seem to find exactly what I'm looking for amongst the comments/tutorials. 

If a game were to be released for both standalone desktop (nw.js) and ios/android then it would probably have to support a fair few resolutions and aspect ratios:

1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV
1280x800 8:5 8.5% 14'' Notebook
320x568 9:16 6.4% 4'' iPhone 5
1440x900 8:5 5.7% 19'' monitor
1280x1024 5:4 5.5% 19'' monitor
320x480 2:3 5.2% 3.5'' iPhone
1600x900 16:9 4.6% 20'' monitor
768x1024 3:4 4.5% 9.7'' iPad
1024x768 4:3 3.9% 15'' monitor

 

That was 2014, I'm sure it's just as diverse in 2016. With that in mind, how the hell do you scale things accounting for those variations?

Is there a way to have a resolution option (on desktop), like most desktop games? And if so how would one account for that when sizing UI/Assets/World?

So far, working with: (would of used code tags but I don't think they're working, it's just all on one line. Or is it just me?)

var SCREEN_WIDTH = window.innerWidth * window.devicePixelRatio;
var SCREEN_HEIGHT = window.innerHeight * window.devicePixelRatio;

var SCREEN_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;

var SCALE_RATIO;

if (SCREEN_RATIO > 1) {
    SCALE_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
} else {
    SCALE_RATIO = SCREEN_WIDTH / SCREEN_WIDTH;
}

var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, null, {preload: preload, create: create, update: update});

function preload() { 
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
}

...

grid.tileSize    = 30 * SCALE_RATIO;

 

Seems to be missing something, as positioning doesn't seem to line up. Is there something else that I should be doing other than sizing/positioning everything based aspect ratio like the grid.tileSize above?

The post is based on a camera/world where everything is visible and there's no panning, like looking down at a board game, so nothing would be off screen and everything has to fit.

Thanks for any help and/or tips.

Kind regards,
A Phaser nub.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...