- Home /
Android: How do you position GUITexture and GUIText according to different screen sizes (JS)?
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 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.
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
}
}
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 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
Your answer
Follow this Question
Related Questions
how do i use touch.Position 1 Answer
Disable gui texture in a different way? 0 Answers
Making High Scores and scores via GUITexts 1 Answer
Pairing and GUITexture with a Timer? 1 Answer
How Do I Drag And drop GUITextures From Set Positions? 1 Answer