Fundamentals

There are three prefabs for menus. An empty menu, called 'Menu', a main menu, called 'Main Menu', and a pause menu, called 'Pause Menu'. Menus by default come with a background, but it can be disabled if needed. Because it is a part of the prefab, you can't delete it unless you do so on the prefab itself or disconnect the menu GameObject from the prefab by right clicking and selecting 'Unpack Prefab'. Once you have dragged a menu prefab into your scene, make sure you also have an EventSystem GameObject. Then you can start adding UI elements to the menu.

To create a window, drag the 'Window' prefab into your menu. You'll notice it has a 'Window Content' GameObject underneath it, which is where all of the UI elements go. The window graphic is on the window content GameObject. To change whether the window is open when clicking the play button, change the 'Start Active' variable on the QUI_Window script.

Generally you will use the OnClick event of a button to call the SetActive function of a window or tab group. An example of this can be seen below, where a button closes a window. You can also call the SetActive function in a script as well.

Creating a tab group is very similar to a window, as the two function very similarly. A tab group is comprised of multiple tab windows, as shown below. They are all within the 'Tab Group Content' GameObject.

Each tab window has tab that will change the tab group's current window to the one the tab belongs to. In order to have this functionality, you have to call the SetWindow function on click for each tab, as shown below.

The tabs will start at the top middle of the tab group, which probably is not desirable. You can change the alignment of the tab group on the QUI_TabGroup component. It will be aligned this way on hitting the play button. Another important point about tab groups is that the background graphic is on the 'Tab Group Content' object. Additionally, all UI elements should be placed under 'Tab Window Content'.

With the QUI_SceneTransition component, it is easy to run scene transitions and to load new scenes. To load a new scene, just call the LoadScene function, and give the scene name. It functions differently based on what type of loading you choose. There is instant loading, which immediately loads the given scene. Loading UI turns on the given GameObject over the current scene while loading in the background. Loading Scene will immediately load the loading scene, and starting loading the given scene in the background. Both Loading UI and Loading Scene will update a QUI_Bar progress bar. Loading instantly will not play the scene animation, but loading UI and loading scene will. Loading UI doesn't require a UI element. Leaving it blank will still run the transition effect and then load the scene in the background.

Advanced

By default, there are only animations for windows, tab groups, tab windows, tabs, and scene transitions. The first three are simple activate/deactivate GameObject animations. The tab animations change the sprite of the tab, meaning that this animation will have to be modified to fit a different sprite if needed. There is one scene transition animation, which will fade the screen to black when exiting a scene, and fade in from black when entering a scene.

Creating a new animation is simple. Just put it in an animation preset, such as the one below, with parameters if needed.

In the above example, there are two animations, name 'Active', and 'Inactive'. When the 'Active' animation is played, the boolean animator parameter called 'Active' is set to true. When the 'Inactive' animation is played, the boolean animator parameter called 'Active' is set to false.

Scene transition animations are a bit more complicated. At the end of the exit animation, the LoadScene function needs to be called on the QUI_SceneTransition component, as shown below.

The QUI_ElementAudio component makes it easy to play audio clips from a given audio preset. In the example below, a button has the component and an AudioSource to play the 'On Click' audio clip, as specified by the audio preset.

The button's OnClick event calls the Play function with a clip name of 'On Click' on the QUI_ElementAudio component. The AudioClip in the audio preset under 'On Click' will play at a volume of 1.

While there is usually no need to use scripts, as OnClick events or other UnityEvents are typically used to call the API, it is easy to do so. Everything needed to do so can be found in the scripting documentation. Anything that shouldn't be messed with is usually either not in the documentation, or is a private variable.