Question by Grimrender · Apr 13, 2014 at 11:03 PM · android text mobile scaling

How should I go about proper GUIText scaling for mobile devices?

Hi all!

I have been developing a game for android, and I've been using my Nexus 5 to test with. On that high-resolution screen, it looks great, but when I load it onto my friend's Droid Bionic (much smaller screen resolution) all of the GUIText elements scale terribly. The texture elements scale fine, as I based all of my texture sizes (like buttons, although the text on buttons also scales badly) on Screen.width and Screen.height. For some buttons, I can just make an image with the appropriate text, but that doesn't help me with my score counter.

Is there any equivalent option for GUIText? I guess I'll put a bit of code in as an example. This is what I'm using to define four buttons once my game is over.

 #pragma strict
 
 var customStyle : GUIStyle;
 
 function OnGUI () {
     GUI.BeginGroup (Rect ((Screen.width/8), (Screen.height/2) - (Screen.height * 0.15), (Screen.width * 3/4), (Screen.height * 0.5)));
     //GUI.Box (Rect (0, 0, (Screen.width * 3/4), (Screen.height)), "");
     if (GUI.Button (Rect (20, 20, (Screen.width * 3/8 - 40), (Screen.height * 0.25 - 40)), "Try Again", customStyle))
     {
         Application.LoadLevel (Application.loadedLevel);
         Time.timeScale = 1.0;
         Debug.Log (Time.timeScale);
     }
     GUI.Button (Rect ((Screen.width * 3/8 + 20), 20, (Screen.width * 3/8 - 40), (Screen.height * 0.25 - 40)), "Share", customStyle);
     GUI.Button (Rect (20, (Screen.height * 0.25), (Screen.width * 3/8 - 40), (Screen.height * 0.25 - 40)), "Upgrade", customStyle);
     if (GUI.Button (Rect ((Screen.width * 3/8 + 20), (Screen.height * 0.25), (Screen.width * 3/8 - 40), (Screen.height * 0.25 - 40)), "Exit",customStyle))
     {
         Application.Quit();
     }
     GUI.EndGroup ();
 }

The GUIText elements aren't scripted, they're just GUIText elements and I've adjusted their size using font size. I considered scaling the transform on the empty but sadly that doesn't work like it does on GUITextures.

Thanks for any help you can give!

Add comment · Show 5

Scribe · Apr 14, 2014 at 12:30 AM 0

Whats wrong with the text, is it blurry or is it far too large? If its the second of those then my recent answer here might help:

http://answers.unity3d.com/questions/678598/how-to-set-up-same-sized-text-on-all-screens.html

Grimrender · Apr 14, 2014 at 04:04 AM 0

Hi Scribe, thank you very much for answering - yes, it is too large, however I'm having some difficulties with your script, although it seems to me like it should work just fine. To use it I'll be replacing all of my GUIText elements with empty objects with scripts attached to them, which isn't as easy but I can manage it. However, in my test object I am encountering some really weird bugs. If I attempt to change the font or fiddle with the GUI style (as per the following method), most of my animations break and behave really strangely, especially the ones involving animating an alpha value for a sprite (the animation just goes away, and the sprites retain an alpha value of 100%).

The method I tried is like this, where I attempt to change font and other features (like aligning text to center) by adjusting those values in Unity under the section created by "testGUIStyle":

     private var resolutionIndex : int = 0;
     private var screenRes : Resolution;
     private var resChanged : boolean = true;
     private var displayDPI : float;
     private var mmToInch : float = 25.4;
     private var fontSize : float;
      
     var textHeight : float = 10; //the desired text height in mm
     var testGUIStyle : GUIStyle;
      
     (clipped)
      
     function OnGUI(){
         GUI.skin.label.fontSize = ActualToPixel();
         GUI.Label(Rect(0, 0, Screen.width, Screen.height), "AaBbCcDdEeFfGgHhIiJj");
      
         GUI.skin.label.fontSize = 20;
         GUI.Label(Rect(0, Screen.height-50, 200, 50), textHeight.ToString(), testGUIStyle);
     }

While the script does work really well to dictate on-screen font height (tested on my device it works fine, anyway), and I can mess with the rectangle locations to place the text where I want to on-screen, I still need control over which font I'm using, and ideally all of the rest of the control that the GUIText objects provide (or at least font, color, alignment, spacing, and anchor).

I really wish this were easier. It seems really silly that on an engine that advertises it's ability to create mobile games that it is so difficult to control the on-screen size of a text element.

Scribe · Apr 14, 2014 at 03:17 PM 1

It is probably best to keep using GUIText elements as opposed to the OnGUI method especially on mobile devices as it is much more efficient.

Really the code I linked is just an example of how to calculate the correct sized font, you don't necessarily have to use it to alter the GUIStyle, why not have is alter the GUIText element?

So having said that, heres a slightly edited version of the code that alters the GUIText font size, not the GUIStyle font size.

 @script RequireComponent(GUIText)
 
 private var resolutionIndex : int = 0;
 private var screenRes : Resolution;
 private var displayDPI : float;
 private var mmToInch : float = 25.4;
 private var fontSize : float;
 private var desiredHeight : float;
  
 function ResolutionUpdate(){
     Screen.SetResolution(screenRes.width, screenRes.height, true);
     if(Screen.dpi == 0){
         Debug.Log("Could not find the dpi of this display.");
         displayDPI = 300;
     }else{
         displayDPI = Screen.dpi;
     }
     guiText.fontSize = ActualToPixel(desiredHeight);
 }
  
 function ActualToPixel(tHeight : float){
     return (displayDPI*tHeight)/mmToInch;
 }
  
 function Start(){
     desiredHeight = desiredHeight == 0 ? 13 : guiText.fontSize;
     screenRes = Screen.currentResolution;
     ResolutionUpdate();
 }

Just attach this to each of your GUITexts and it should do the rest for you, it will take the fontSize defined on the GUIText as a height in mm's that you want rather than a pixel height, so you may have to change all of the sizes.

Scribe