Making dynamic login screen

Questions & Answers
1

Hi,

I’m a complete newcomer to unity, but I’m not a bad programmer and I’ve done a fair bit of work with 3D modelling so you don’t need to be too gentle :slight_smile:

As an ‘intro’ project, I am making a little client for a javascript based webgame. I want to make a login screen, where it shows a background image and has 2 buttons on it, Login and Sign Up. When one of these is clicked, I want the buttons to disappear and a form to appear, either to sign up or to login.

I have the buttons and background set up, but could someone point me towards a way to switch the components nicely? At the moment I have the following code which makes the buttons vanish, but no way to create the new form. I get the feeling I should be making prepared sections that I can swap in and out, but not really any idea where to start.

public class GUITest : MonoBehaviour {
public Texture btnTexture;
private bool showButtons = true;
private bool showLogin = false;

// Use this for initialization
void Start () {

}

void OnGUI () {
	if (!btnTexture) {
		Debug.LogError("Please assign a texture on the inspector");
		return;
	}

	if (showButtons) {

		// Make the first button. 
		if (GUI.Button (new Rect ((Screen.width / 2) - (btnTexture.width / 2), (Screen.height / 2) - 100, btnTexture.width, btnTexture.height), btnTexture, GUIStyle.none)) {
			Debug.Log ("Clicked the login button");
			showButtons = false;
			showLogin = true;
		}
	
		// Make the second button.
		if (GUI.Button (new Rect ((Screen.width / 2) - (btnTexture.width / 2), (Screen.height / 2) - 40, btnTexture.width, btnTexture.height), btnTexture, GUIStyle.none)) {
			Debug.Log ("Clicked the sign up button");
			showButtons = false;
		}
	}
}

// Update is called once per frame
void Update () {
	if (showLogin) {
		ShowLoginForm ();
	}

}

This is to show the login form. Doesn’t work at the moment as apparently I can only call GUI elements from onGUI, but here it is to give an idea of what I’m aiming at.

void ShowLoginForm() {
	Debug.Log ("Creating form");
	int centreX = Screen.width/2;
	int centreY = Screen.height/2;
	GUI.Box(new Rect(centreX-150, centreY-100, 300, 400), "Login");
	Debug.Log ("Created box");
	GUI.Label (new Rect (centreX - 80, (centreY - 100 + 25), 160, 50), "Username");
}

Ideally I would be looking to add transition effects to the change from buttons to form but that can come later.

Thanks!

2

Try this OnGUI function, you just use your booleans to verify which form to show.
This can become problematic if u put a lot more “forms”.

void OnGUI () {
if (!btnTexture) {
	Debug.LogError("Please assign a texture on the inspector");
		return;
	}
 
	if (showButtons) {
		// Make the first button.
		if (GUI.Button (new Rect ((Screen.width / 2) - (btnTexture.width / 2), (Screen.height / 2) - 100, btnTexture.width, btnTexture.height), btnTexture, GUIStyle.none)) {
			Debug.Log ("Clicked the login button");
			showButtons = false;
			showLogin = true;
		}
	 
		// Make the second button.
		if (GUI.Button (new Rect ((Screen.width / 2) - (btnTexture.width / 2), (Screen.height / 2) - 40, btnTexture.width, btnTexture.height), btnTexture, GUIStyle.none)) {
			Debug.Log ("Clicked the sign up button");
			showButtons = false;
		}
	}else if(showLogin){
		Debug.Log ("Creating form");
		int centreX = Screen.width/2;
		int centreY = Screen.height/2;
		GUI.Box(new Rect(centreX-150, centreY-100, 300, 400), "Login");
		Debug.Log ("Created box");
		GUI.Label (new Rect (centreX - 80, (centreY - 100 + 25), 160, 50), "Username");
	}
}

Also, follow the advice of alucardj and remove the “Debug.Log()” :slight_smile: