koobas.hobune.stream
How to make GUI Adjust to different resolutions, making the GUI not move off the screen on lower resolutions
I'm new to unity and I've started making a main menu for my game but I've run into an issue. When I hit play and change the resolution the buttons don't move, they just stay put even if it goes off screen. I was wondering what would I change in my code to make it not move off of the screen.
The Code: C#
using UnityEngine; using System.Collections;
public class MainMenuHolder : MonoBehaviour {
public Texture2D background , LOGO; public GUISkin myskin; public string messageToDisplayOnClick = "Press Esc to go back!";
private string clicked = "";
private void OnGUI()
{
//background
if (background != null)
GUI.DrawTexture (new Rect(0,0,Screen.width , Screen.height),background);
if (clicked == "" || clicked == "Options")
{
//Logo
if (LOGO !=null)
GUI.DrawTexture (new Rect((Screen.width/2)-509,30,200,200), LOGO);
//original: GUI.DrawTexture (new Rect((Screen.width/2)-509,30,200,200), LOGO);
}
if (clicked == "")
{
GUI.skin = myskin;
//Buttons
// original is: if (GUI.Button (new Rect((Screen.width/2) - 100,Screen.height/2,200,30) , "Play Game"))
if (GUI.Button (new Rect((Screen.width/2) - 510,Screen.height/2,200,30) , "Play Game"))
{
//code on what to do after clicked play
}
if (GUI.Button (new Rect((Screen.width / 2) - 510,( Screen.height / 2 )+50, 200,30), "Options"))
{
//code on what to do when options are clicked
clicked = "Options";
}
if (GUI.Button (new Rect((Screen.width / 2) - 510, (Screen.height / 2) + 100,200,30), "Credits"))
{
//Code on what to do when Credits is clicked
clicked = "Credits";
}
if (GUI.Button (new Rect((Screen.width / 2) - 510, (Screen.height / 2) + 150, 200, 30), "Quit Game"))
{
Application.Quit();
}
}
else if (clicked == "Options")
{
GUI.Window (0, new Rect((Screen.width / 2) - 100, Screen.height / 2, 200, 50) , optionsFunc , "Options");
}
else
{
GUI.Box (new Rect (0,0,Screen.width,Screen.height) , messageToDisplayOnClick);
}
}
private void optionsFunc(int id)
{
GUILayout.Box ("Volume");
if (GUILayout.Button ("Back"))
{
clicked = "";
}
}
private void Update()
{
if (clicked == "Credits" && Input.GetKey (KeyCode.Escape))
{
clicked = "";
}
if (clicked == "Options" && Input.GetKey (KeyCode.Escape))
{
clicked = "";
}
if (clicked == "Play Game" && Input.GetKey (KeyCode.Escape))
{
clicked = "";
}
}
}
It's because you're using absolute values to position your buttons;
GUI.Button (new Rect((Screen.width / 2) - 510, (Screen.height / 2) + 150, 200, 30)
This says that you want to place the left edge 510 pixels left of the center of the screen, the top edge 150 pixels below the center of the screen, be 200 pixels tall, and 30 pixels wide.
You'll have to scale these values with a common scaler.
http://answers.unity3d.com/questions/307330/gui-scale-guis-according-to-resolution.html http://answers.unity3d.com/questions/156619/scaling-the-gui-with-different-screen-resolutions.html
If those don't get you pointed in the right direction, do some more Googling about aspect ratio calculations. Also keep in mind that the screen resolution wont really be changing all the time on a device, so you might as well cache these rects early on and not have to create them each time OnGUI is called (2+ times per frame).
maybe this will help
#pragma strict
var skinGui:GUISkin;
//the GUI scale ratio
private var guiRatioX:float;
private var guiRatioY:float;
//the screen width
private var sWidth:float;
private var sHeight:float;
//A vector3 that will be created using the scale ratio
private var GUIsF:Vector3;
var sizegui:int;
function Awake()
{
//get the screen's width
sWidth = Screen.width;
sHeight = Screen.height;
//calculate the rescale ratio
guiRatioX = sWidth/1920 * sizegui;
guiRatioY = sHeight/1080* sizegui;
//create a rescale Vector3 with the above ratio
GUIsF = new Vector3(guiRatioX,guiRatioY,1);
}
function OnGUI() {
GUI.skin = skinGui;
GUI.matrix = Matrix4x4.TRS(new Vector3(GUIsF.x,GUIsF.y,0),Quaternion.identity,GUIsF);
if(GUI.Button(Rect(1,4,50,51),"hello")){
}
}
Honestly you guys get so technical??
Any new comers?
Try this video it helped me and it will help you and it is way more easy: https://www.youtube.com/watch?v=_9mOh7_xX2o&feature=iv&src_vid=hzvQnYkS9O4&annotation_id=annotation_3467516253
:D CHEERS
have you try unity UI? I think this is easier than you code it like that.... try to read this manual UI Manual
you can make it auto resize and put an anchor at the corner so the button will moved to your desire
