# Game UI

## Canvas

Canvas is the element/ game object responsible for showing all the different UI elements such as panels, button, images,sliders etc.

### Different panels under Canvas in this game
For this game a canvasa prefab was made containing the different ui elements given below:-

* **IntroUI** -Intro of the game
* **MainMenuUI** - Shows Main Menu of game
* **PlayerUI** - Shows different stats of player, inventory, etc
* **PauseMenu** - Pause Menu of the game
* **SettingsMenu** - Settings menu of the game
* **UpgradeShopUI** - UI of upgrade shop in the game
* **OutroUI** - Game over and Highscore screen
* **BackgroundStory** - Shows background story of the game
* **ToolTip** - Shows the tooltip of item when we hover over it.

## Event System

The canvas is responsible for showing the different UI elements on the screen, but how does the engine know which function to call on a button press, all these things are handeled by **Unity's Event System**.

The tooltip UI element also utilizes the event system by using its OnPointerEnter and OnPointerExit functions for showing and hiding tooltip when cursor enters over an inventory item.

## Tweaking the Canvas

### How to add UI elements ?

To add UI Elements to the canvas right click on **Canvas** and under **UI** select the UI element you want to add from the dropdown menu.

**Various UI elements that can be added**

### How to change properties of an element ?

To move an change the properties of an element, click on it in scene view (press **F** to focus) and change its properties in inspector like changing image, moving pivot point, anchoring, etc.


### To add functions to buttons..

Buttons are not that useful if they don't do anything, so in order to make them useful, we attach functions to them.In order to do that-
- Add an OnClick event by pressing the **+** sign under button component.
- Then drag the object having the script that contains the function you want to execute, onto the empty slot.
- Then from the drop down menu on left side find the appropriate script and the associated funtion you want to execute and select it.

**Note-** Only the functions declared public inside the script will be visible in the dropdown menu.

## Some useful links
-[How to make UI in UNITY - EASY TUTORIAL](https://www.youtube.com/watch?v=_RIsfVOqTaE)
-[Menus in Unity](https://www.youtube.com/playlist?list=PLPV2KyIb3jR4JsOygkHOd2q0CFoslwZOZ)