- Home /
Adjust GUI according to letterboxed Camera position?
Im currently working on a game which I have forced the camera to be in the 9:15 aspect ratio, for certain reasons. (It letterboxes the sides of the screen)
But all my GUI elements are placed relatively according to Screen.width and Screen.height
So what happens is, even though I've forced the actual gameplay into 9:15 (by adjusting camera distance, scale, etc to make sure the game fits) The GUI elements still work according to the screen position.
Is there any way to make the gui elements reposition themselves according to the REDUCED WIDTH AND HEIGHT.. which is actually not even reduced width, its just the camera forcing itself to be smaller... So maybe, there could be a way to have the GUI adjust according to the cameras position?
I hope you get what I'm saying and what I require. Please let me know if you would like to see specific scripts, or require screenshots of my problem
Answer by sang · Sep 19, 2013 at 06:31 PM
I think you could store the top left of the camera screen based on Resolution. So the width would be Screen.Height*9f/15f and the first X would be (Screen.Width - (Screen.Height*9f/15f))/2. And then use that as an anchor for your GUI Rects. also use Screen.Height as your unit. Assume you are talking about portrait resolution.
Yeah I'm talking about portrait.
I kind of get what you're saying, could you just elaborate a bit?
What does Screen.height * 9/15 denote? Like on the screen, what would that mean?
Well, usually you may use something like this for GUI:
Rect exampleRect = new Rect(Screen.width*0.2f, Screen.height*0.1f, Screen.width*0.5f, Screem.height*0.1f);
Now you should use it like this float reducedWidth = Screen.Height*9f/15f; float firstX = (Screen.Width - (Screen.Height*9f/15f))/2;
Rect exampleRect = new Rect(firstX + reducedWidth *0.2f, Screen.height*0.1f, reducedWidth*0.5f, Screem.height*0.1f);
the Screen.height * 9/15 is equal to your clipped width :D
Thanks a lot! Here is my GUI code. Please have a look and let me know how it would work for this since I'm still slightly confused with the calculations :/
group1 = new Rect (Screen.width * 0.1f, Screen.height * 0.01f, Screen.width * 0.8f, Screen.height * 0.05f);
box1 = new Rect (0, 0, Screen.width * 0.4f, Screen.height * 0.04f);
star_img = new Rect(Screen.width * 0.1f- Screen.height * 0.02f +Screen.width * 0.3f * barDisplay, Screen.height * 0.01f -Screen.height * 0.01f ,Screen.height * 0.05f,Screen.height * 0.05f);
group2 = new Rect(0, 0, Screen.width * 0.3f * barDisplay,Screen.height * 0.04f);
box2 = new Rect(0, 0, Screen.width * 0.4f, Screen.height * 0.04f);
In this code, Box 1 and Group 1 are the base images, Box2, group2, and star_img move according to some inputs by the user (its basically a health bar)
Your answer