Sign in to follow this  
dewder

Scaling and Resolution of Window/Assets for Desktop and Mobile

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.