[Tutorial] Making a Main Menu with Unity's new UI

Main Menu screen
​

I've been experimenting with the UI released in 4.6 and so far I'm loving the new UI. In this tutorial, I demonstrate how to make a simple main menu like the one above that can be easily implemented in a new or existing Unity project. The project is simple and demonstrates the use of a Canvas and setting up some buttons to change menu screens. We'll use C# scripting to make our menu interactive.

Options screen
​

I think this tutorial will be very helpful for beginners or people who haven't yet used the new UI.
I would appreciate any feedback, corrections or suggestions, thank you!

The written tutorial is posted here.

 

Thanks!!

 

Does this still work in Unity 5?

 

Yes, you can still use the same approach in Unity 5 and things will look even better. If you're working in Unity 5, you may want to play with the Skybox and Lighting options. You can find them in the Lighting window.

 

Thanks for making this available for our users. We always appreciate the hard work done by the community.

I have not read this tutorial in detail, but I did see one thing that could be addressed:

Code (csharp):

1.  // Update is called once per frame
2. void Update () {
3.    //Enable buttons for main menu only
4.    if(currentScreen == UIScreen.MainMenu)
5.       {
6.          NewGameButton.SetActive(true);
7.          OptionsButton.SetActive(true);
8.          ReturnToMenuBtn.SetActive(false);
9.       }
10.       else if(currentScreen == UIScreen.Options)
11.       {
12.          NewGameButton.SetActive(false);
13.          OptionsButton.SetActive(false);
14.          ReturnToMenuBtn.SetActive(true);
15.       }
16.    }

With a retained UI, there should be no reason to set UI Elements every frame. This will simply eat up resources repetitively redoing everything that has already been done.

What would be best would be to make this event driven, so every time you change your state from UIScreen.MainMenu to UIScreen.Options, change these settings. This way, you won't need to set the state of these buttons every frame. TBH, you probably don't even need your enum. Simply have a function that changes these states:

Code (csharp):

1. void EnableMainMenu() {
2.    //Enable buttons for main menu only
3.       NewGameButton.SetActive(true);
4.       OptionsButton.SetActive(true);
5.       ReturnToMenuBtn.SetActive(false);
6. }
7.  
8. void EnableOptionsMenu() {
9.       NewGameButton.SetActive(false);
10.       OptionsButton.SetActive(false);
11.       ReturnToMenuBtn.SetActive(true);
12. }

I have not read your entire tutorial, so these sample functions may have to be adjusted to fit your project, but I assume could be called whenever you would have changed your enum.

This is the strength of a Retained UI - the settings are "retained" until changed. OnGUI is an "immediate mode" UI and the UI is tested every frame and redrawn every frame. This leads to a UI that can easily be handled in code, but takes up a lot of resources as Unity checks this code over and over again. With the Retained UI, these simply persist in the scene until changed.

 

Adam, I completely agree. I like like the idea of the Retained UI, I'll have to make a note in the tutorial. The feedback is appreciated.