Device Scaling : Need help separating logical from physical

[Cryptonomicon]

Have spent all day reading about device scaling with phaser - the objective to being to eventually get things working with cocoon and am finding myself coming away more confused than when I started. 

 

there have been many many threads on this and to confuse things phaser has matured so i am not sure what is relevant anymore.

 

 

What I would like to do is think of my game world as a logical space - currently 960 x 640 but theoretically it could logically be 9,999 x 6,666 without making any difference. 

 

 

My game world should retain its aspect ratio and be centered in the viewport filling it as much as possible without being truncated on any device.  What the physical mapping is should not really matter.

 

I think that is what

 

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

this.scale.setScreenSize(true);

 

does - but I am getting confused with EXACT_FIT.

 

 

 

To add to my confusion assets are normally specified and loaded as physical dimensions - which in my absurd 9,999 x 6,666 world would have webgl screaming at me about texture sizes. 

 

Should I think of asset dimensions as physical or logical?  In other words if I had a single 960px x 480px bitmap and dropped it into my 9,999 x 6,666 world on a 960 x 480 device what would happen?  I presume it would shrink...

 

 

Can someone who has been through the pain of getting their brain around this pull out the key concepts I need to understand device scaling?

 

 

 

Or perhaps to put it another way if I was to write some functions

 

setAsLogicalDevice(width,height);

setBitmapLogicalDimensions(width,height);

 

what would they look like?

 

 

I should also mention that what is driving all this is the horror of having to handle the galaxy 1080 x 1920 pixels resolution which is bigger than my desktop

[lewster32]

When you set a Phaser canvas up, you pass your 'logical' size. Any scale modes will simply take this canvas and scale it up to fit the container - you're correct in your assumption that SHOW_ALL is the one you want; this will scale the canvas up as large as it will go without cropping or adjusting the aspect ratio.

 

All coordinates correspond to the logical size of the canvas, regardless of how scaled up it is - so you'll never end up in a situation where you're having to deal with different world sizes on different devices. If you create a 960x480 game and do not adjust the world bounds, the world will be 960x480 at any pixel density or resolution.

 

Assets will also take on this scaling, so a 32x32 image loaded and displayed on the screen will take up 32x32 logical (canvas) pixels.

 

An easy way to think of this is that Phaser renders everything flat to a canvas of a specified size, and then stretches that final canvas to the screen size. In the canvas renderer, this means you will get pixellation/blurring as it's scaled up. I'm not sure if the same is true of the webGL canvas; but I believe the world coordinates will work in the same way.

[Cryptonomicon]

That's a little clearer.

 

In other words in phaser all coordinates are logical -

 

 

This would mean  the commonly quoted usage for cocoon below

 

var width = navigator.isCocoonJS ? window.innerWidth : 960;
var height = navigator.isCocoonJS ? window.innerHeight : 640;
var dips = window.devicePixelRatio;

width = width * dips;

height = height * dips;
                   
this.game = new Phaser.Game(width, height, Phaser.AUTO);  

 

 

 

really should be modified to

 

 

var logical_width=960;

var logical_height=640;

 

var device_width= navigator.isCocoonJS ? window.innerWidth : logical_width;
var device_height= navigator.isCocoonJS ? window.innerHeight : logical_height;

var dips = window.devicePixelRatio;

device_width = width * dips;

device_height= height * dips;

                
this.game = new Phaser.Game(logical_width, logical_height, Phaser.AUTO);  //set the game up logically

 

//use the device coordinates to do device specific things such as choose asset sets - determine device types - alternative layouts //etc etc.

[lewster32]

The reason this becomes such an issue is that people often want native resolution on high definition devices, and load their assets to match. If you force your canvas to 960x480, then it will just be scaled up or down. In an ideal world you'd want the canvas to be natively drawn at a 1:1 pixel ratio with the device, but to then be able to use relative 'logical' coordinates for positioning in the world, and have assets scaled to those logical dimensions based on whether they're SD or 2x or whatever. It strikes me that achieving this is a bit of a holy grail in mobile development and there's a lot of confusion - not helped by there being annoyingly implemented things like device pixels vs device independent (css) pixels.

[Cryptonomicon]

I agree with that.  Conflicting objectives - cross platform and device specific at the same time.

 

Perhaps what it needs and what we are not going to get is an industry standard for game and ui worlds agreed to by developers everywhere where no matter what you are on x and y min and max are the same lets say 0 to 10000   (percent of a percent)  with a collection of standard aspect ratios 2:3  3:4  and open x, open y (scrolling)  as well as a mechanism for determining device type tablet, mobile, desktop  and physical pixel density.

 

But given that CSS has not managed it yet   ( em, ex, px, pt, pc, cm, mm and in )  it will take more than my confusion to fix it.