- Home /
GUI Styles for iPhone/Android - font/button sizing?
I'm trying to get my GUI (text lables, buttons) to be legible on different devices. On old iTouch, no problem, less pixels means bigger stuff. For the hi-res newer devices, everything is so tiny.
What's the best way to detect this state of affairs, preferably at runtime so I don't have to have multiple scenes, just one 'mobile' scene? That is, change the GUI (style? font size?) depending on the screen resolution and platform.
Answer by Herman-Tulleken · Jan 21, 2011 at 10:25 PM
There are, I guess, several solutions to the problem depending on how you implemented your GUI. It is a nasty problem, and the solution is not pretty.
Here is what we did: (we only use resolution based on Screen.width
and Screen.height
, but it should be easy to incorporate device checks using AppTechStudios's method to take the real size into account as well).
Since there are no dynamic font scaling on mobile devices, you need to import a few different size fonts for each one you want to use. (We import three sizes of each font). For this reason, it is a good idea to limit the number of fonts you use, otherwise it becomes a real nightmare to maintain.
All our styles are in a single class. When this class Starts, we check what font is used for each style (for instance, button_label_font_1
), based on the resolution, we then change this to botton_label_font_2
, or botton_label_font_3
, or keep it the same.
If you use relative layouts everywhere, that is fine. If you use absolute layouts, then you have to recompute sizes. We store Screen.width / 800
in a globally accessible variable, and scale all our GUI sizes by it. 800
is the size we designed for; our base size. You can also store and use Screen.height / 600
(where 600
is the base height), and use that scale for heights, but this changes the aspect ratios of rectangles (buttons) which may be a problem (it is for us).
If you don't skin the GUI with components with borders, then that's fine. Otherwise you might need to change those as well (thick borders look awful on low resolution devices).
In addition to standard GUI components for menus, we also use a combination of GuiText
s, GuiTexture
s and rendered planes for the in-game GUI (the standard GUI is a real performance hog on mobile devices). These need to be positioned using calculations based on the scale variable(s) as explained above.
If your GUI is even moderately complicated, be prepared for a lot of annoying tweaking, and test various sizes regularly to avoid surprise.
Good luck :)
Thanks. This is the type of thing I was getting into, I was hoping there was a simpler solution. I do hope the next rev of Unity (which promises better mobile GUI support) addresses this.
Answer by tertle · Jan 20, 2011 at 02:52 AM
I don't program for mobile devices, but couldn't you just scale your buttons up relative to the resolution of the screen the device is on using Screen.currentResolution?
ie. if you had 4 evenly sized buttons each would be 4 / Screen.currentResolution.Width (or height depending where your buttons are)
Personally I always use images for buttons rather than game rendered text so scaling is easy. But if you needed to scale up text, just a quick lookup table based off currentResolution is probably easiest method.
I get the button size changing, but the font on the button is still small. Also, I'll have to factor in platform, because small buttons on PC/$$anonymous$$ac aren't so hard to use as small buttons on iPhone/Android, as mobile has much smaller dot-pitch.
Answer by AppTechStudios · Jan 20, 2011 at 03:24 AM
I am not sure about changing the font and stuff, but I know you can access what device is being used. For example, the iPad:
if(iPhoneSettings.model == "iPad") {