Search Unity

  1. All Pro and Enterprise subscribers: find helpful & inspiring creative, tech, and business know-how in the new Unity Success Hub. Sign in to stay up to date.
    Dismiss Notice
  2. Dismiss Notice

Changing Text Size Relative To Screen?

Discussion in 'Immediate Mode GUI (IMGUI)' started by SomeGuy22, Sep 1, 2011.

  1. SomeGuy22

    SomeGuy22

    Joined:
    Jun 3, 2011
    Posts:
    660
    Hello,

    I've seen many people have problems when it comes to this, and I couldn't find any answers, so I'll ask it right now:

    Is it possible to change font size or GUI string size according to the screen?

    I'm not looking for anything simple, I already know how to use Screen.height and Screen.width to scale the box for the TextField, but how do I scale the text inside it?

    Some people were saying that you should use an option in the guiText, but I'm not using a guiText because guiText is not compatible with GUI.TextField.

    Someone else said that you should use GUI.matrix to do some calculations, but that messed up a few things and seriously lowered my frame rate.

    Unless I should not use screen.height after the GUI.matrix????

    And I also tried putting it in something other than OnGUI, like Update, but that didn't work.

    Here's the code so far: (this one works but it's messy and low framerate)

    Code (csharp):
    1.  
    2. GUI.matrix = Matrix4x4.TRS (Vector3.zero, Quaternion.identity,Vector3(Screen.width / 1000.0, Screen.height / 620.0, 1));//All one line
    3. ///@@@///==YOUR CODE HERE==///@@@///
    4.    
    5. GUI.SetNextControlName("CommandLine");
    6.    
    7. textField = GUI.TextField (Rect (pos.x * Screen.width, pos.y * Screen.height, chatboxWidth * Screen.width, chatboxHeight * Screen.height), textField, ChatBoxStyle);
    8.        
    9. if (go)
    10. GUI.FocusControl("CommandLine");
    11.  
    I will experiment to see what works, but until then any help would be appreciated!

    Thanks in advance!
     
  2. handsomePATT

    handsomePATT

    Joined:
    Nov 30, 2010
    Posts:
    574
  3. SomeGuy22

    SomeGuy22

    Joined:
    Jun 3, 2011
    Posts:
    660
    Thanks, but I don't really know how to use this, there's not much examples in the documentation.

    Could someone post an example please?

    EDIT: Um, actually this is for GUI text, which I'm not using and is not compatible with TextField.

    Is there something like this for TextField or GUIStyle?
     
    Last edited: Sep 1, 2011
  4. SomeGuy22

    SomeGuy22

    Joined:
    Jun 3, 2011
    Posts:
    660
    Never mind, it seems my own experimentations are faster then Unity forums again. :p

    For anyone who wants to know, here's what I learned:

    If you have a custom GUI style for any Control, you can edit a lot more then you could if you had a default, such as the FONT SIZE.

    $Screen shot 2011-09-01 at 3.39.35 PM.png

    Multiplying a float, like .04, by Screen.height can give you a dynamic font.

    Unity 3.5 really needs to have better support for GUI...
     
  5. Roxas0Zero

    Roxas0Zero

    Joined:
    Nov 23, 2011
    Posts:
    2
    hello, can you please explain your findings, i didn't really understand ..

    is this what you meant ?
    that you made a guistyle , then guistyle.font = screen.height * 0.04f ??

    please explain it more, i really need this :-|
     
  6. Roxas0Zero

    Roxas0Zero

    Joined:
    Nov 23, 2011
    Posts:
    2
    never mind my friend , i got it
    thank you it really helped aloot :razz:
     
  7. bibouze

    bibouze

    Joined:
    Oct 17, 2012
    Posts:
    2
    for using textField :

    function OnGUI(){

    GUI.skin.textField.fontSize = Screen.width/20;
    //your GUI text
    }
     
    Last edited: Jan 9, 2013
  8. dkozar

    dkozar

    Joined:
    Nov 30, 2009
    Posts:
    1,410
    Nice, but this could be a bit optimized:

    Code (csharp):
    1. var _oldWidth: float;
    2. var _oldHeight: float;
    3. var _fontSize: float = 16;
    4. var Ratio: float = 20; // public
    5.  
    6. function Update() {
    7.     if (_oldWidth != Screen.width || _oldHeight != Screen.height) {
    8.         _oldWidth = Screen.width;
    9.         _oldHeight = Screen.height;
    10.         _fontSize = Mathf.min(Screen.width, Screen.height) / Ratio;
    11.     }
    12. }
    13.  
    14. function OnGUI() {
    15.     GUI.skin.textField.fontSize = _fontSize;
    16.     // your GUI.TextField here
    17. }
    Additionally, you get text scaling with both the Screen.width and Screen.height change.
     
  9. knowpixels

    knowpixels

    Joined:
    Oct 6, 2013
    Posts:
    4
    I had some trouble finding text size relative examples using transform position properties between 0 and 1 in docs.
    Also I should mention I stay away from ONGUI as its expensive in terms of CPU. Instead I add GUIText and GUITextures to the scene and set transform position and scale properties to between 0 and 1 in the inspector, later those properties/members are manipulated at runtime by unity script. This method seems to work very well in terms of cost vs performance.

    This my start function for GUIText on the health bar in my android game for relative sizing and positioning of GUIText on render.
    Code (csharp):
    1.  
    2. function Start () {
    3.     GUIText.pixelOffset.x = Screen.width/2; // If your gui text transform positions are set to 0 this will be in the middle of the view
    4.     GUIText.pixelOffset.y = Screen.height/15; // Yeah you guessed it, it is near the bottom of the rendered view
    5.     GUIText.fontSize = 0.1; // Makes the font size behave by Viewport relative sized (0-1).
    6.     // GUI layer stack order is controlled by transform.position.z on GUI Text and GUI Textures in case you want to stack them together.
    7. }
    8.  
    Hopefully Unity devs will add a way to rotate GUITextures and GUITexts through the transform rotation property at some point.
    Anyway this hope that helps someone :)
     
    Last edited: Oct 9, 2013
  10. PsychoPsam

    PsychoPsam

    Joined:
    Aug 1, 2012
    Posts:
    34
    Here's one I wrote that changes mostly in realtime in the editor so you can place before running. Just toggle Maximize on Play to get the actual change if you aren't seeing it.
    1. Create a C# script called ScaleFont
    2. Paste in this code
    3. Drop the script on your GUIText
    4. Set your font size as a base and the ratio will scale from there.
    Code (csharp):
    1.  
    2. using UnityEngine;
    3. using System.Collections;
    4. [ExecuteInEditMode]
    5.    
    6.  
    7. public class ScaleFont : MonoBehaviour {
    8.  
    9.     public Vector2 offset;
    10.  
    11.     public float ratio = 10;
    12.  
    13.     // Use this for initialization
    14.     void Start () {
    15.    
    16.     }
    17.    
    18.     // Update is called once per frame
    19.     void Update () {
    20.    
    21.     }
    22.     void OnGUI(){
    23.  
    24.         float finalSize = (float)Screen.width/ratio;
    25.         guiText.fontSize = (int)finalSize;
    26.         guiText.pixelOffset = new Vector2( offset.x * Screen.width, offset.y * Screen.height);
    27.     }
    28.  
    29.  
    30. }
    31.  
     
    Last edited: Feb 13, 2014
  11. tonic

    tonic

    Joined:
    Oct 31, 2012
    Posts:
    405
    Hi, I'd like to mention my alternative for using built-in GUIText or Text Mesh:

    Dynamic Text in Asset Store.

    The Dynamic Text component is used for displaying pixel-perfect camera-facing text. The size and position are defined in world units. If compared to Unity's built-in text components, Dynamic Text is sharp like built-in GUIText, but part of the scene like TextMesh.

    Because the size is defined in world units and actual pixel size is determined dynamically, it means that you only need to set the size once for your camera view, and it'll always take approximately the same size in the view after that (relative to your view). For example, if you have an orthogonal camera with size 5.0, it corresponds to total window height of 10 units. Dynamic Text with Size 1.0 in this case means the text will take 10% of the window height vertically... so, if window height is 500 pixels, the text row would take 50 pixels, but if the window height would be 1500 pixels, then the text row would take 150 pixels vertically.

    Dynamic Text website has more info (e.g. interactive demo for Unity web player or a YouTube video of the demo).
     
  12. Chintao

    Chintao

    Joined:
    Jun 26, 2014
    Posts:
    54
    THANKS ALOT!!! Working like it should! =)
     
unityunity