This guide is intended for people who have little to no experience with UGUI and want to have a popup or toggled window in their Unity3D project. We’ll cover how to setup that window, create the buttons for toggling it, and hook everything up without writing any code. There is also a sample project at the end you’ll be able to download and use as an example for building your own popup dialog.
Project Setup
First we need a new scene with a new canvas.
Under the canvas, create a new gameobject.
Name it “Popup Window”
Set the transform values to this
Create a Panel under the Popup Window.
Name it “Toggled Panel”
Inspector Values
The button
Create a button
Name it “Show Button”
Make it square by setting the Width and Height to 30.
Under the button, create a text object and replace the text with a “+”
It should start to look a bit like this.
It’s time to add events.
Select the “Show Button”
Under the Button component, add an OnClick event by clicking the “+”
Drag the toggled panel into the event.
Using the dropdown to the right, select GameObject->SetActive
Check the box (this means set the toggled panel to active).
Click the “+” again to add another handler.
This time, drag the “Show Button” gameobject onto it (make sure to drag from the scene view).
Select GameObject->SetActive, and leave the checkbox unchecked.
The Minimize Button
So far, we can open up the panel with our button. If you disable the panel and hit play, you’ll see the panel appears and the button is disabled.
Now let’s add a way to minimize / hide the panel and re-show the expand button.
Select the Show button
Duplicate it
Move the Duplicate to be a child of Toggled Panel
Rename it “Hide Button”
Change the Text child’s “text” value to be “-“
The Hide Events
Our Hide button has some events already hooked up to it because it’s a duplicate of the show button.
Let’s modify those events to do what the hide button should do..
Select the “Hide Button”
For the first event, uncheck the box. This will make “Toggled Panel” inactive when we click the Hide button.
For the second event, drag the “Show Button” into the gameobject area.
Now, the Hide button will turn on the show button, and turn the popup off (which the hide button is a child of).
That’s it, everything should work now.
Press play and try out your toggled window.
Try adding some extra stuff to the popup window..
Consider finding new images to use in place of the Text objects, there are 100’s you can find with a quick google search like this:
Project Download
You can download the full example project here: https://unity3dcollegedownloads.blob.core.windows.net/vrgames/UI%20Popup%20Menu.zip