How can I prevent UI elements from rendering in Play Mode?

I am currently building the menu system for my app.

For each menu I want, I created an empty GameObject, and each of those empty GameObjects are children of the same Canvas element. To make my menu layout, I create UI elements of the respective GameObject. Each of these GameObjects have Buttons that are supposed to hide the current menu, and display the next menu.

Right now, whenever a button is clicked, it de-activates the GameObject holding all UI elements for the current menu (including the clicked Button) using GameObject.SetActive(false), and it then activates the GameObject used to make the desired menu using GameObject.SetActive(true). This is the method demonstrated in Mobile Game Development with Unity by Jon Manning and Paris Buttfield-Addison.

When I test using Play Mode, my app starts at the Main Menu. However, when I click on the “Roll Dice” Button, it will display the new menu (which I am currently calling the Setup Menu) overtop of the Main Menu in the Game View. I have double-checked what actions take place when the “Roll Dice” button is clicked. I also checked the Adding Pause, MainMenu, and Game over Screens in Unity at, but it appears they are using the same method.

The menus display correctly in the Scene View when I navigate the menu system.

Add a CanvasGroup component to the objects you want to hide/show :slight_smile: Modify the Alpha value.

@jakehiance Try making the menu slide to the corners when the new menu comes. Then when the main menu needs to come just make it slide back to position where it was originally.