Understanding scaling and resolution on different devices.

bowerandy · October 2012

Okay, so I've noticed a bit of confusion on the forum about how Gideros handles different device resolutions and image scaling. Also, I have to admit to having been a little flummoxed myself along these lines. Hence I have put together a sample Gideros project that tries to demonstrate what is going on as the different project parameters are changed and different devices are used as target. I think I can now see how I will configure my future apps for different devices when the time comes.

Unfortunately, the dimensions of the test backgrounds are currently for iOS devices only (since that is my primary focus right now) but I'll be happy to update these with scales for the more important Android devices. If you guys can post to this thread the top 4 Android device resolutions that I should include then I'll try to incorporate them.

In the demo as it stands, I have set it up for:

1) Pixel Perfect scaling. I can't imagine anybody wanting their assets scaled arbitrarily so I think most pros would choose this. Obviously, you can alter it and see the effects for yourself.

2) I've chosen a logical scaling of about iPhone 4/iPad dimensions for the base asset size. I imagine most devices now are coming out with this sort of screen dimension. This means that 768x1024, or 640x960 are proposed as the typical logical canvas size and this is the scale used for assets with no @x? suffix.

3) Higher scale assets (currently only iPad 3 under iOS) are given the @2x suffix

4) The original iPhone/IPod assets would have @half suffix.

5) I have chosen to centre the background to make things easier to understand. I think this is probably the way most people will want to work when allowing for different size screens.

6) In the project as it stands I have set the base resolution of the project as 640x960. This makes the normal iPhone fit like this:

On an iPad this gives a bleed zone around the edge. As you can see this brings the origin away from the top left. Here's the new iPad version, which shows high res assets are being used too:

This seems to me like the way I might choose to work since it gives me a reasonable canvas to keep key things on the screen for all devices, but then allows me to push non-essential graphics etc into the bleed zone if I wish.

7) If I try using 768x1024 then I find the iPhone devices DON'T behave as I expect. And maybe this has been the source of the confusion for me in the past. If anyone can provide the explanation for this, I'd be grateful. @atilim perhaps? Here's what I see for the iPhone 4 on this setting:

6) I haven't tried this with iPhone 5 settings as yet since I haven't yet installed the latest Gideros version that caters for this in the player. The iPhone 5 dimensions are however include in the template backgrounds.

I hope this proves helpful to others. It's certainly been useful for me.

best regards

ar2rsawseen · October 2012

@bowerandy so what would you expect for 7)? I think it works as pixel perfect should.

I mostly use letterbox scaling, because it tries to cover whole screen while maintaining the aspect ratio, and use absolute positions or larger backgrounds or patterns to fill whitespaces (basically its the question of design) and in my opinion letterbox is what everyone should use if something other specific is not required.

bowerandy · October 2012

@ar2rsawseen, I would expect it to choose the normal resolution background.

best regards

ar2rsawseen · October 2012

@bowerandy you see, the pixel perfect scaling is same as No scale, it does not "expand" your logical dimensions up to the screen (letterbox does). So application looks that you have set specific logical dimensions and it takes proper image to fit these logical dimensions and not the screen. Letterbox on the other hand takes the logical dimensions, increases internal scaling up to screen and takes proper @2 resolution image.

Really letterbox does what you expect, not pixel perfect.

nextgamevertex · October 2012

Come on @bowerandy ,
Hope that you will share a Gideros Project that name: "Universal Build Skeleton" :P

bowerandy · October 2012

@ar2rsawseen, but from what I can see in my demo program, letterbox is not acceptable since it scales the assets. I don't see why PP can't work correctly; it just needs to respect the scaling parameters and choose the correct @x suffix image and set the origin appropriately. That is what I'd expect it to do anyway. From what I can see this is a bug in the PP scaling.

What you want to be able to do is, as you say, supply a background asset that is big enough to fill all the screen on which it is to work. This is what the demo does. As you can see it scales horribly on the iPhone. This is with LetterBox 768x1024 but running on an iPhone:

Sorry about the large size but I wanted to show the image distortion.

best regards

ar2rsawseen · October 2012

@bowerandy from my tests Gideros does the super awesome job on scaling, did you enable antialising/texture filtering?
It's completely ok to use arbitrary scaling, even with small image as 80x80px gideros scales it awesomely to Ipad Retina resolution and it looks pretty well (really I was shocked).
From the performance perspective of course upsacling images might not be a good idea, but that is why you'll provide @2 and even @0.5 images (if you want) so Gideros would automatically take the closest resolution and use it to minimize the resources on image scaling. I

used to think similar as you, but using Gideros has proven that it's all can be quite easy and many of this thing can be done with Gideros automatically.

bowerandy · October 2012

@ar2rsawseen, I know nothing about this filtering option. Where is it set?

Despite that (which may well be good enough) I still think PP should choose the correct asset and then it would, IMO, work correctly.

best regards

ar2rsawseen · October 2012

Basically it's a second argument for textures and third for fonts, as in:

local textureWithFilter = Texture.new("myimage.png", true)
local textureWithoutFilter = Texture.new("myimage.png")
 
local fontWithFilter = TTFont.new("myimage.ttf", 20, true)
local fontWithoutFilter = TTFonr.new("myimage.ttf", 20)

ar2rsawseen · October 2012

Sorry if I'm being too persistent, but I just can't imagine my life without automatic scaling in letterbox and automatic image resolutions. After all other frameworks where you struggled so much to support all the devices and resolutions, it came so easy in Gideros, that taking back the harder path, for me seems like shooting yourself in the leg and then trying to run the marathon.

So if PP takes the proper background, there is still all those resolutions between @2 and @1 that would simply have smaller images than the screen, doesn't that bother you?

bowerandy · October 2012

@ar2rsawseen, hmm... I didn't know that. I will try it and report back.

I can't imagine why it wouldn't be enabled by default. Not knowing this has cause me, and I think @bernard, to be confused about how best to use the Gideros resolution features.

ar2rsawseen · October 2012

@bowerandy probably because it consumes more resources and if someone is using noscale all pixel perfect, there is no need for that feature.
and BTW this is the reason I've implemented the global method to enable texture/font filtering in GiderosEasy: application:enableFiltering(), application:disableFiltering() and application:isFilteringEnabled()

PS and now I completely understand your confusion

bowerandy · October 2012

Well, that certainly makes a LOT of difference. @bernard, you need to try this if you haven't already. I will probably use LetterBox in future.

But again, being persistent myself, I think there is a bug in the PP mode and I can imagine a fair few developers wanting to use it because of a desire to have artwork be rendered exactly as it was drawn.

best regards

PS, I'd add the default true parameter to those function calls in GiderosInit. I really think it could save a bad impression being given to new users. I suspect, @bernard may have been on the brink of forming such an opinion.

bowerandy · October 2012

ok, snap, same thought

vitalitymobile · October 2012

I really want a project template that can handles different device resolutions and image scaling. :x
So @bowerandy and @ar2rsawseen, please working together for that [-O<

ar2rsawseen · October 2012

Here is what I have used before (for both IOS and Android):

Logical dimensions 480x800
Automatic scaling: Letterbox.

Then create all the graphics for these dimensions and second twice as size that will be used as @2 images.

Use filtering for all textures and fonts.

Create backgrounds in 600x854 (and 1200x1708 for @2) resolutions to cover both Iphone5 and Ipad2 whitespaces and position them in the center of the screen (probably using anchorpoint 0.5 is easier)

Use absolute positioning (ignoring scaling) for such elements as controls (to place them in the corners, etc).

That's all there is to it

P.S.: you could also use other logical dimensions, something that you find more suitable and calculate maximal offsets for whitespaces yourself. Basically I'm not saying that 480x800 is the best dimension to use, it's just something I'm using.

nextgamevertex · October 2012

@ar2rsawseen Can you please share a simple project template to demo this?

I think it is very useful for newbie like me!

ar2rsawseen · October 2012

Here is an example code:

--set logical dimensions (always like these, no matter if portrait or lanscape)
application:setLogicalDimensions(480, 800)
--set orientation
application:setOrientation(Application.PORTRAIT)
--set scaling mode
application:setScaleMode("letterbox")
--get dimenstions
local width = application:getContentWidth()
local height = application:getContentHeight()
 
--use texture with filtering
local bgTexture = Texture.new("images/bg.jpg", true)
local bg = Bitmap.new(bgTexture)
--set position in center
bg:setAnchorPoint(0.5, 0.5)
bg:setPosition(width/2, height/2)
 
stage:addChild(bg)
 
--use absolute positioning to position image right in the corner
local dx = application:getLogicalTranslateX() / application:getLogicalScaleX()
local dy = application:getLogicalTranslateY() / application:getLogicalScaleY()
 
local logo = Bitmap.new(Texture.new("images/gideros.png", true))
logo:setPosition(-dx, dy + height-logo:getHeight())
stage:addChild(logo)

And I've attached example project

bowerandy · October 2012

So if PP takes the proper background, there is still all those resolutions between @2 and @1 that would simply have smaller images than the screen, doesn't that bother you?

No I don't think so, but then again I've never dipped into the Android world where there are more resolutions than days in the month. With the original two different aspect ratios for iOS I wouldn't see a problem using PP since you'd end up with a bleed along one edge, which would happen with LB anyway. Now with iPhone 5 it's trickier and that may well push me over to your way of working.

The problem in the iOS world is that, since the resolution of the Retina display is beyond the perception of the average eye (and certainly beyond that of my misty corneas) then one just has to sense whether the images are perfect or not. I suspect that many pro developers would be worried that Jobso was looking down on them from above and for that reason wouldn't want to tolerate any scaling at all just in case someone, somewhere might notice.

Anyway, thanks for pointing out that option. Previously, I had also thought that I'd have to give up on TT fonts because of the scaling issue. Now I see, they don't look half bad.

best regards

nextgamevertex · October 2012

Thanks to @ar2rsawseen !
I've just tested it, but i don't know why I change resolution to ipad retina, the image background still @1?

ar2rsawseen · October 2012

@nextgamevertex you need to restart the project for resolution changes to take effect (simply push play button in Gideros player again).

nextgamevertex · October 2012

@ar2rsawseen That did the trick, thanks!

bernard · October 2012

@ar2rsawseen

Thanks for the sample code. I see it works in all resolutions.

moopf · October 2012

OK, I'm a stickler for displaying imagery in the best way possible. I pushed @atilim on this way back when so we could have an option to change the scaling mode in code, which is now available with application:setScaleMode.

What this allows you to do is have better control over how you scale on different devices. So you can use a combination of pixel perfect and letterbox by using your own logic to decide what mode a screen resolution should use. The best way to do this is to work out what scaling the current screen would give if you kept it in letterbox and if it's within tolerances, then use pixel perfect instead, e.g. if a screen would scale to 2.1x then, as long as you've taken enough extra space into consideration in bleeds and layouts, it's safe to set pixel perfect as the scale mode instead, for the best display.

This is especially important on Android devices where you may as well pretty much think that you'll get any screen size thrown at the app. Doing this allows you to present the imagery as good as possible on screen sizes that are within your tolerances by using pixel perfect, and using letterboxing for other displays.

In my opinion letterboxing is there for a catch all and shouldn't be the default way you scale. But that's just my opinion

moopf · October 2012

I should also add that when you get into Android as well, there's a screen size used on 7" many very popular wide screen tablets which you have to take into account, 1024 x 600. Using pixel perfect scaling on this can't be done easily, unless you want to inhibit using it on iOS devices. What you need to do in this case is letterbox but ensure you also provide assets close to the right size, thereby still giving the best possible display (something around x1.88 if I remember rightly). Basically you're trying to limit over-scaling of assets as much as possible.

Providing more granular assets on Android is the best way of retaining a good display and that's partly why I want to be able to have the app download the best assets for the device it's installed on but can't currently do this due to Gideros always 'touching' the base image size and only allowing higher resolution assets to be loaded from the same directory (which wouldn't be the case with downloaded assets). You'd also need more control over scaling settings, forcing Gideros to use a certain asset extension if the files have been downloaded but we can't currently do this, so you have to bundle the files with the app.

Basically it's a lot more complex, if you want to ensure good display on a wide range of devices, than just picking a scaling mode and sticking with it.

ar2rsawseen · October 2012

@moopf well I'd call it a bit exaggerating, but that's probably why I am a developer and not a designer.

But based on what you said, that letterboxing is there for a catch all, that is why it actually should be a default. And pixelperfect or other scaling methods used in special cases.

One thing that came to mind (actually a question), is letterboxed exactly to double size displaying @2 resources the same as pixelperfect with @2 resources? Is there any overhead in letterbox, that won't be if pixel perfect was used?

moopf · October 2012

@moopf well I'd call it a bit exaggerating, but that's probably why I am a developer and not a designer.

Yes, being both has its advantages. It also means I tend to spend a lot of time getting the visuals exactly the way I want them (and audio as well) which takes time but gives a much more polished finished product.

One thing that came to mind (actually a question), is letterboxed exactly to double size displaying @2 resources the same as pixelperfect with @2 resources? Is there any overhead in letterbox, that won't be if pixel perfect was used?

Letterboxed at 2x would be exactly the same as pixelperfect. At least it should be, haven't actually tried. All pixel perfect is doing is locking the scaling to integers - I'm sure internally it's exactly the same code but with something like a floor added when calculating the scale. But in what circumstances would it actually be like that in practice? It wouldn't be on an iPad, for instance. If you were using the iPhone (320 x 480) ratio as the base resolution - it would be 2.133r on an iPad, leading to less than crisp visuals.

atilim · October 2012

Pixel perfect chooses the scaling mode from this set: [..., 1/4, 1/3, 1/2, 1, 2, 3, ...] and PP never crops your graphics.

Assume that the original scaling is ~0.9. If you choose PP, scaling is selected as 0.5 (to not to crop the graphics) and you obtain a result similar to #7.

moopf · October 2012

Hi @atilim, how does 1/4, 1/3 or 1/2 keep things pixel perfect? That doesn't make sense as that breaks the understanding of the phrase "pixel perfect", i.e. that you retain all the pixels and they're scaled up uniformly - that can't possibly happen unless you're scaling by an integer.

Mind you in these circumstances you'd be better using letterbox anyway, otherwise you could end up with very large amounts of unused space on the screen.

bowerandy · October 2012

Pixel perfect chooses the scaling mode from this set: [..., 1/4, 1/3, 1/2, 1, 2, 3, ...] and PP never crops your graphics.

Assume that the original scaling is ~0.9. If you choose PP, scaling is selected as 0.5 (to not to crop the graphics) and you obtain a result similar to #7.

@atilim, why wouldn't you choose 1 for image scaling in this case rather than 0.5. Is there any way to set the project Image Scales appropriately so it will choose the "correct" (to my mind) value?

best regards

atilim · October 2012

@moopf I think 1/4, 1/3 or 1/2 keeps thinks pixel perfect. (1/2 means downscaling the graphics by integer 2).
@bowerandy Because if I choose 1, then cropping occurs.

And I'm always open to suggestions about the behavior of PP.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Understanding scaling and resolution on different devices.

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Understanding scaling and resolution on different devices.

Comments