- Home /
positioning gui!
hello! i have some gui in my game that i would like to be placed in the bottom-center of the screen, and in-game at my monitor's resolution (1600x900), it looks fine -
but at 640x480 it looks like this -
at other resolutions it's position is obviously wrong, but i chose 640x480 for some reason.
the code i'm using to draw both the text and the textbox -
GUI.DrawTexture(Rect(Screen.width/2.65,Screen.height / 2,446,202), tex);
GUI.contentColor = Color.black;
GUI.skin = s;
GUI.Label(Rect(Screen.width/2.5,Screen.height / 1.85,446,202),"text!");
if anyone could help out, that would be tremendously grateful, as i'm doing this for a jam!
thanks
I'm suprised you got it positioned correctly in your first picture, as your starting y-position for the image is Screen.Height/2
. That means half the screen. The second image looks what I would expect to get with code like that.
Because you want it in the bottom, you'll need something along the lines of (Screen.Height-Imageheight) for your position y-value
Answer by Benproductions1 · Sep 16, 2013 at 04:11 AM
Hello,
When making relative UI, you need t make every argument relative. Right now you only have the position relative, but your size is constant.
Make your size relative as well and that will fix your problem.
Also, a nice tip with positioning is to use re-readablel positions. /1.85
is just a random constant, however if you wrote /37*20
, which means splitting the sreen into 37 rows and going down 20. That will also make positioning other elements easier as well as making the code more readable.
Another good tip, is that currently you are doing integer division. That means you will have rounding issues and in some cases quite bad inaccuracies. I suggest (for ease), you make a temporaty float
type variable to represent width and height, so that your calculations will me more accurate.
Hope this helps,
Benproductions1
nice. Whenever I see a gui question, I get easily tempted to answer just "NGUI" but then I remember ahh, that's not right I have to answer what the OP is asking...
Personally if it's just GUI.Textures, I like to set all the pixel inset to 0 in the inspector, then set the scale to proportion my image.
Then...ins$$anonymous$$d, I use the "SCENE VIEW" , Not the inspector view, and drag the colored arrows, because if I don't, the same thing happens to me, what happened to you.
Somehow sliding the X and Y in the inspector moves the image, but doesn't seem to fit all screen sizes after.
Only by moving the Scene View arrows i can get what I want. I don't know if I have a bug or something, I wish it were as easy for GUI.Button etc.
i forgot to post my entire code, sorry:
scale.x = Screen.width/originalWidth; // calculate hor scale scale.y = Screen.height/originalHeight; // calculate vert scale scale.z = 1; var sv$$anonymous$$at = GUI.matrix; // save current matrix // substitute matrix - only scale is altered from standard GUI.matrix = $$anonymous$$atrix4x4.TRS(Vector3.zero, Quaternion.identity, scale); // draw your GUI controls here:
//GUI.Box(Rect(10,10,200,50), "Box"); //GUI.Button(Rect(400,180,230,50), "Button"); GUI.DrawTexture(Rect(Screen.width/2.65,Screen.height / 2,446,202), tex); GUI.contentColor = Color.black; GUI.skin = s; GUI.Label(Rect(Screen.width/2.5,Screen.height / 37*20,446,202),"text!");
//... // restore matrix before returning GUI.matrix = sv$$anonymous$$at; // restore matrix
i got this script off of another site, did i already set up a variable somewhere in here that would work? i'm not too good with code, sorry.
Please format your code. If you don't know how, watch the tutorial video on the right
Answer by Ekta-Mehta-D · Sep 16, 2013 at 06:00 AM
I was facing same issue. But i have solved by using this code. You can try below code:
private var w = 0.3; // proportional width (0..1)
private var h = 0.2; // proportional height (0..1)
private var rect: Rect;
static var WIDTH : float = 1024;
static var HEIGHT : float= 768;
static var stack : List.<Matrix4x4> = new List.<Matrix4x4>();
function OnGUI()
{
stack.Add (GUI.matrix);
var m : Matrix4x4= new Matrix4x4 ();
var w : float = Screen.width;
var h : float = Screen.height;
var aspect = w / h;
var scale = 1f;
var offset = Vector3.zero;
if(aspect < (WIDTH/HEIGHT)) { //screen is taller
scale = (Screen.width/WIDTH);
offset.y += (Screen.height-(HEIGHT*scale))*0.5f;
} else { // screen is wider
scale = (Screen.height/HEIGHT);
offset.x += (Screen.width-(WIDTH*scale))*0.5f;
}
m.SetTRS(offset,Quaternion.identity,Vector3.one*scale);
GUI.matrix *= m;
GUILayout.BeginArea (Rect (WIDTH * 0.15,HEIGHT * 0.5 - 700,1400,1000)); //do not use Screen.width and Screen.height..
GUILayout.EndArea();
GUI.matrix = stack[stack.Count - 1];
stack.RemoveAt (stack.Count - 1);
}
hi! the only problem is that apparently list does not denote a valid filetype ('not found'), is there another script i should be looking for?
import System.Collections;
you should look up how to use collections in Unity. There's a very good Wiki article on it
Your answer
Follow this Question
Related Questions
Finding the limits of transform coordinates 1 Answer
Reduce Draw call for Multiple GUI Textures with same Texture 1 Answer
How to use transform.position? 2 Answers
HealthBar for 5 Objects 3 Answers
Moving a transform behaves odd 0 Answers