What is the "correct" way to switch UI panels - 4.6?

Questions & Answers
1

What is the correct way to switch between UI panels in the new UI system? For example: I have a menu, it has 4 sub-menus–the default one (play, options quit), the play menu (character/save selection), the options menu (graphics, etc.), and confirm quit menu. Now, what is the correct way to switch between these sub-menus? Should I just disable and enable the objects or do something else?

4

My preferred way is to assign a CanvasGroup component to anything I want to show/hide. I leave it in its position, and just set the alpha and can toggle whether it accepts user input. All the properties of a CanvasGroup are automatically applied to all of its children (unless the child is a CanvasGroup that is set to ignore its parent).

  • I don’t have to worry about screen size when moving something off-screen to hide it.
  • I will always have access to its properties since the GameObject is never deactivated.
  • I can use the Alpha property of the CanvasGroup to fade the element in and out.
  • I can easily make that UI element and all of its descendants temporarily not receive input while still being visible.
2

Multiple options exist. Each has its own benefits and drawbacks. As far as I can tell there is no definitive ‘correct’ way to accomplish this. If your menu is performance constrained then bench marking on your current device is required.

  • Enable and disable (this will cause OnEnable and OnDisable to run)
  • Instantiate and destroy (not recommended, will kill you on the GC)
  • Moving in the hierarchy so its rendered behind the current panel (causes an increase in draw calls)
  • Moving the inactive windows off screen, or disabling or modifying renderers (Good for animated effects)
3

Good Question.
I am interested in BoredMormons 1st approach

I am not a C# person but it might look something like:

and then I think it could look like :
void onSomeTrigger() {
enable(panelOne);
)

void onEnable() {
if(panelOne.Renderer.disabled) {
panelOne.Renederer.enable;
}

}

(remember to instantiate the new UI in code)

EDIT: Thanks BoredMormon that would be great

here is another simple way:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;

public class mouseUp2 : MonoBehaviour {



	public GameObject Panel2Disappear;
	public GameObject Panel2Appear;
	


	void OnMouseUp () {
		Debug.Log("MouseHit");
		Panel2Disappear.SetActive(false);
		Panel2Appear.SetActive(true);
	}

}

Although I Love sub zeros idea of Animating the change… that would be brilliant!

best

~be

5

Canvas kills your performance if you have alot GUI controls. But ok for smaller GUI’s

6

Keep in mind that hiding the panel changing the alpha of the canvasgroup is not deactivating the controls; you will discover that if you use the mouse while the panel is hidden, if you have controls on it, they will be reacting to mouse clicks for example.

So far the best way that I found to swap panels is to use both the alpha to make them hiddne, and at the same time, set to false the interactable to false, so even if you click on the screen you won’t affect the controls.

I did not have luck with setActive(), but using this approach it works just fine

7

There is an asset called Woo Panels. It does exactly what you are tring to achieve.
Check it out! Here is the forum thread.

8

I just use SceneManager and build new UI’s in Different Scenes that are Loaded via a ClickHandler Script.

Is there an easier way?