Consistent UI Element Sizing across devices / screen resolutions

[David Kalina]

I set up my in-game UI using 2D Toolkit UI.  These are 2D icons and text that are positioned using anchors relative to a tk2dCamera, all in the corners of my screen.

My intent is to use a single sprite sheet that is authored at retina pixel density.  I want to layout / size my UI elements once and have the appearance of the icons and text be the same physical size across all devices and platforms.  I'm only using 2DToolkit for UI in this particular project, and the UI is very simple, so I'm not interested in authoring resolution-specific variants for every piece of 2D art.  I want to use a single sprite sheet for all targets.

In other words, an icon that occupies 96x96 pixels on an iPhone 4 screen (or iPad Retina screen) would be drawn in 48x48 pixel space on an iPhone 3GS, or an iPad 2, or a PC. 

I'm still quite a bit confused about "native resolution" and "overrides" and so forth, so would greatly appreciate a straightforward explanation of how I can do what I'm trying to do.

Thanks!

[unikronsoftware]

Well, the good news is it is really really simple to do this

A brief description
1. You author your game at the native resolution.
2. You then tell tk2dCamera how to draw this game when running at a different resolution using overrides.

The default override to make the largest axis visible at the new resolution. Try it to see how it works for you.

[David Kalina]

OK, I played with native resolution + overrides yesterday and I don't think it's quite what I'm looking for, or I still don't have it setup properly.

Let's just say I'm talking about a simple menu button in the corner of the screen.  I author for native resolution of the iPhone 4 and set my overrides to Match All / Pixel Perfect Fit / Center.

Yes, the scaling is consistent for retina vs non-retina displays.  So my iPhone 5 and iPhone 3GS look the same (the button occupies the same amount of physical, real-world space). 

But the iPad and iPad Retina the button is larger by a factor of (whatever the screen size difference is).  A button that is laid out to look appropriately button-sized on the iPhone is now relatively gigantic on the iPad.  On a PC screen, it's enormous.

I want the buttons and text to occupy the same "meat space" across all platforms.  They should appear to be *the same size* in physical space.  Any tips?

Thanks much!
David

[unikronsoftware]

Second option with the overrides - you can have more than one of them, and you don't have to do automatic overrides - is to set it up manually exactly like you'd want it per resolution. Again, this works from the native resolution. Set it up for your native resolution first, and then set up an override for all the different resolutions you want to handle this. You can set up scale manually, so you can get it to the right size whichever way you like there.