Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
2
Question by DaveA · Jan 20, 2011 at 01:13 AM · androidguiiphonefontstyle

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.

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

3 Replies

· Add your reply
  • Sort: 
avatar image
3

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 GuiTexts, GuiTextures 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 :)

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image DaveA · Jan 23, 2011 at 09:33 AM 0
Share

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.

avatar image
0

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.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image DaveA · Jan 21, 2011 at 05:44 AM 0
Share

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.

avatar image
0

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") { 

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

No one has followed this question yet.

Related Questions

GUIStyle for GUI.label doesn't work for android? 1 Answer

Why can I not change my font style in javascript? 0 Answers

how do i change the font size on a gui text box 3 Answers

Is there a way to measure the pixel with/height of a string with a given font? 2 Answers

Is there a way to get the size of text? 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges