Android: How do you position GUITexture and GUIText according to different screen sizes (JS)?

Question

Hello Everyone!

I am about to finish to first android game, and one of my remaining tasks is to position every GUITexture and GUIText according to the screen size (Portrait 2:3 in my case). I have several of these elements positioned in varies different spots around the screen such as in the top-left corner I have a timer, on the bottom-left and bottom-right corner I have two arrows.

Everything looked good when I was testing out the game through the Unity Remote app, however when I built it and installed it in my Tablet I noticed several of the GUITextures and GUIText had shrunken and moved, but my sprites remained in their original size.

I did some research and I do know that in order to position something at the centre of the screen, it is necessary get the Screen.Height and Screen.Width then divide each by 2. I played around with this theory hoping to solve my problem, but I am having difficulties on understanding it. As for the maintaining scale, I have tried the transform.localScale = Vector3.zero, but unfortunately it is not working for me.

So my question is this, would anyone be kindly enough to explain me how do you position GUITexture and GUIText according to different screen sizes, and how do you maintain their original scale?

Thanks in advance!

Answer 1

Best Answer

Answer by zharik86 · Jun 04, 2014 at 07:03 AM

For different resolutions of the android (or other screens), it is necessary to scale your GUITextures and GUIText. I will write a small explaining script (I write on Java as this language figures in your tags; there can be small mismatch as I for me the main am CSharp):

  //define here the original resolution 
  var origW: float = 320;
  var origH: float = 640;
 
  function Start() {
   var scaleX: float = Screen.width / origW; //your scale x
   var scaleY: float = Screen.height / origH; //your scale y
   //Find all GUIText object on your scene
   var texts: GUIText[] =  FindObjectsOfType(GUIText) as GUIText[]; 
   for(var myText: GUIText in texts) { //find your element of text
    var pixOff: Vector2 = myText.pixelOffset; //your pixel offset on screen
    var origSizeText: int = myText.fontSize;
    myText.pixelOffset = new Vector2(pixOff.x*scaleX, pixOff.y*scaleY); //new position
    myText.fontSize = origSizeText * scaleX; //new size font
   }
   //Find all GUITexture on your scene
   var textures: GUITexture[] =  FindObjectsOfType(GUITexture) as GUITexture[];
   for(var myTexture: GUITexture in textures) { //find your element of texture
    var pixIns: Rect = myTexture.pixelInset; //your dimention of texture
    //Change size pixIns for our screen
    pixIns.x = pixIns.x * scaleX;
    pixIns.y = pixIns.y * scaley;
    pixIns.width = pixIns.width * scaleX;
    pixIns.height = pixIns.height * scaleY;
    //Sets new rectangle for our texture
    myTexture.pixelInset = pixIns;
   }
  }

That's all. Attach this script to any object, for example, main camera. I hope it to you will help.

Add comment · Show 3 · Share

Ful · Jun 04, 2014 at 09:38 AM 0

Share

Thank you!!! This was exactly what I was looking for!

vimago · Sep 03, 2014 at 11:56 AM 0

Share

I think this looks nice but I still have a problem:

"error CS0266: Cannot implicitly convert type float' to int'. An explicit conversion exists (are you missing a cast?)"

This is because myText.fontSize is an int while scaleX is a float

 myText.fontSize = origSizeText * scaleX; //new size font

how did you solve that? I did the cast:

 myText.fontSize = origSizeText * (int)scaleX; //new size font

but if I debug myText.fontSize, it is always 0.

-------------------------- EDIT ---------------------------------- SOLVED!!!!

Ok, my first problem was that I had myText.pixelOffset =(0,0), so I've changed manually the Pixel Offset of all my GUITexts to (1,1). That's why I always got myText.fontSize = 0.

Then, I added a float variable "`floatFontSize`" to get the result of "`origSizeText * scaleX`".

And then I set myText.fontSize = (int)$$anonymous$$athf.RoundToInt(floatFontSize);

So I get the closest value of te right fontSize.

Here is my code (is in C#)

     //define here the original resolution 
     private float origW = 640f;
     private float origH = 320f;
 
 void Start(){    
     float scaleX = Screen.width / origW; //your scale x
     float scaleY = Screen.height / origH; //your scale y
     
     //Find all GUIText object on your scene
     GUIText[] texts =  FindObjectsOfType(typeof(GUIText)) as GUIText[]; 
     
     foreach(GUIText myText in texts) { //find your element of text
     
          Vector2 pixOff = myText.pixelOffset; //your pixel offset on screen
          int origSizeText = myText.fontSize;
          myText.pixelOffset = new Vector2(pixOff.x*scaleX, pixOff.y*scaleY); //new position
          float floatFontSize = origSizeText * scaleX; //new size font in a float
          myText.fontSize = (int)$$anonymous$$athf.RoundToInt(floatFontSize); // Closest value of fontSize
     
     }
 }

Meena_Fari · Feb 19, 2019 at 01:48 PM 0

Share

sorry, it may be very late,, but I am bit confused about original resolution,, which original resolution have to give in script public and if we have to put original resolution then how it differs on different devices

Answer 2

Answer by meat5000 · Jun 04, 2014 at 08:35 AM

Use transform and scale 0 -> 1

Works at any res.

Z component of transform controls depth; ie what appears on top or behind

x=0.5, y=0.5 is centre

Add comment · Share

Android: How do you position GUITexture and GUIText according to different screen sizes (JS)?

2 Replies

Your answer

Follow this Question

Related Questions