Multiple screen resolutions

Monkey Forums/Monkey Beginners/Multiple screen resolutions

muruba(Posted 2015) [#1]
Hi there,

I am wondering if my approach would make any sense:

1. Create 3x assets in 512, 1024 and 2048 textures

2. Depending on current screen resolution use:
<= 800 px wide -> 512 px textures
<= 1280 px wide -> 1024 px textures
any other resolution loads 2048px textures

Thank you!


Soap(Posted 2015) [#2]
This is possible to do - we do it. We do "full" size and "half" size depending on resolution.


nullterm(Posted 2015) [#3]
Yeap, pretty standard approach.

On iOS, UI assets like images are built as if you are designing for the 320x480 iPhone. But for current Retina, you provide a .png that is @2x as it has double the DPI (or width/height). Then now we have @3x for iPhone 6plus.

So say you had a png for a button. You'd need to supply three versions.

button.png - 60x60 for iPhone <4
button@... - 120x120 for iPhone 4 through 6
button@... - 180x180 for iPhone 6 plus


MikeHart(Posted 2015) [#4]
Do you have to load the @?x version manually or just the regular version and ios loads them automatically?


nullterm(Posted 2015) [#5]
It's automatic.

It's kind of a big kludge, you build your UI assuming a 320x480 (now 320x568 with widescreen). Then "Retina" devices treat every logical pixel (or point) as 2x2 pixels (or 3x3).

So depending on your device, your button is logically 60x60 "points", but the UIImage loader picks the best fit for your resolution (falling back on the 1x and then upscale, if no 2x is found).

Then you have iPhone 6 plus, which is all kinds of crazy. Your app works at 3x (so each logical point is 3 pixels). But the frame buffer don't even match the actual physical display resolution! iOS actually down samples the rendered frame to the actual physical resolution.

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Why? Because a downsampled 3x on a iPhone 6plus button is the same size (inches/millimeters) as a 2x button on an iPhone 6, etc. I'm not verifying the math cause just the idea alone hurts my head.

Why? DPI (or PPI rather)...
iPhone is 163 PPI
Retina is 326 PPI (2x)
6plus is 401 PPI (2.46x) ...

... Which doesn't match the Retina PPI, nor is it exactly 3x, but that was the screen hardware they could get/make. Asking the OS and app developers to create image assets at 2.46x resolution was too insane. So they made the OS draw at a higher 3x (yay for developers/photoshop artists) and then downsample.

Heh wacky eh?

Part of the reason iOS 7/8 is pushing towards more vector graphics for icons, buttons, etc. Easier to build vector art that will scale to any resolution, than create a bitmap that either scales properly, or ask your artist to create 3/4 different versions of each image.


muruba(Posted 2015) [#6]
Thanks guys, do you normally package all of them together for every platform or somehow filter out unused data? Say if I target Win/nix targets I probably can safely remove x512 textures?


MikeHart(Posted 2015) [#7]
Thanks nullterm for the explanation.


nullterm(Posted 2015) [#8]
muruba, I don't know if there's a way to filter data specifically by platform.

I think Monkey just grabs everything from .data (with appropriate file extensions).

You could have separate stub .monkey files that just import data files in their specific .data folder, but then you have to maintain 2/3/4/5 different .data directories, which is a BIG pain in the but without an automated pipeline.

MyGameWin.monkey & MyGameWin.data folder + data files
MyGameMac.monkey & MyGameMac.data folder + data files
MyGameIOS.monkey & MyGameIOS.data folder + data files
MyGameAndroid.monkey & MyGameAndroid.data folder + data files
(not recommended, huge pain in the butt)


muruba(Posted 2015) [#9]
Thanks nullterm, that makes sense.


ElectricBoogaloo(Posted 2015) [#10]
I'd avoid using the @2x and @3x filenames. iOS, and I think MacOS too, will load those, INSTEAD of the expected assets, which might break your code if you're expecting your code to load a different asset.
Instead, i use file.png, file-hd.png and file-hd2.png for my three sizes, so that >I< get to pick which loads, and gets used.


nullterm(Posted 2015) [#11]
Yeah, definitely don't use the @2x @3x. I can easily see that messing around with what asset you want vs what actually gets loaded.


Soap(Posted 2015) [#12]
What we do is have a half and full folder with each version of asset in either with same filenames inside. We also use texture atlases. Both are included when distributing.