# 📦 KairoEngine.UI.v0.2.6

The **UI** package contains the ``UiSystem`` component and the ``UiSystemModule``. The module loads the Ui System in place which manages canvases with UI data. The system now which canvases are enabled and has a global toggle for all the game UI.

Also this package contains a set of new interface elements to be used in the design of a game. These elements are the **UiAnimator**, **FadeTransition**, **FloatingText**, **MessageBox**, **ProgressBar**, **Tooltip**, **ActivityMessages**, **ContextMenu**, **ModalWindow** and **LoadingScreen**. All these elements come with a unique style and can be tweeked or changed in to different aesthetics.

Finally the package also contains a set of standard unity UI prefabs dressed in the same style as the rest of the UI elements. These elements are the **Window**, **Panel**, **Button**, **ToggleButtom**, **Checkbox**, **RadioButton**, **DropdownListButton**, **TextField**, **TextArea** and **Slider**.

### 🛑Required packages

- ``KairoEngine.Core``
- `Unity.TextMeshPro`
- `LeanTween`

### 📄Namespaces

- `KairoEngine.UI`

### 📙Modules

- **UI module** – Loads the UISystem that manages interface elements

### 🔷Components

- `UIAnimator` – A generic component that animates a piece of the interface

### ✔Getting Started

##### Add the Ui Module

Find or create the ``GameConfig`` file, click add new module and select the **UI Module** in the module type field. 

Once the ``GameConfig`` is loaded on the game start, the base UI system will be instantiated in your game. This will create or find a *UI* GameObject inside the *GameManager* GameObject and add a ``UiSystem`` component to it. The rest of the game UI can be put as a child of *GameManager/UI*.

##### Interface elements

More information on the interface elements included in the UI package can be found on each elements documentation:

- [InteractionHandler](docs/InteractionHandler.md) – :heavy_check_mark:A set of scripts with interfaces and components for dealing with user interactions.

- [UiMenu](docs/UiMenu.md) – :heavy_check_mark: A set of components to create menus with lists of buttons, images and tooltips. Also includes a component and helpers for dealing with interactions. 

- [UiAnimator](docs/UiAnimator.md) – :heavy_check_mark: A generic component that animates a peice of the interface.

- [FadeTransition]() – :heavy_check_mark: A subsystem that fades the screen to a color and back again. It can trigger and listen to events.

- [FloatingText]() – :heavy_check_mark: A subsystem that listens for events, manages and instantiates animated text in the world.

- [MessageBox]() – :x: A prefab containing a window with a title, message and buttons that require imidiate action.

- [ProgressBar]() – :grey_question: A prefab containing a bar representing the total and completed percentage of a task.

- [Tooltip](Docs/Tooltips.md)  – :heavy_check_mark: A subsystem that show tooltips when hovering the mouse over a certain object.

- [ActivityMessages](docs/ActivityMessages.md) – :hammer: A subsystem that receives messages and then shows them to the player. These messages can be sticky, can fade with time, can be changed by events and can fire functions when clicked.

- [ContextMenu]() – :x: A prefab that draws a context menu with sevaral buttons, separators and submenus.

- [ModalWindow]() – :x: A prefab containing a window that is shown on top of other UI.

- [LoadingScreen]() – :x: A subsystem that shows a loading screen. It can trigger and listen to events.

- Tabs – :x:

- Encyclopedia – :x:

- Credits – :x:

##### Register Ui Elements in the UiSystem

Once you start creating interface elements for your game, you will want to register them with the ``UiSystem`` so that they can be shown and hidden correctly.

### 📚 Explanation

The UI package adds new functionality for designing game user interfaces and tools for managing those interfaces in runtime. 

### Changelog

#### v0.2.6
- Added Selected Button component
- Added Default Encyclopedia article and category
- Added Encylopedia system

#### v0.2.5
- Added Transition GameAction with fade-in and fade-out

#### v0.2.4
- Added Rolling Credits restart event

#### v0.2.3
- Added Rolling Credits Controller

#### v0.2.2
- Fixed again ActivityMessageUI missing image error

##### v0.2.1
- Fixed ActivityMessageUI missing image error

##### v0.2.0

- Upgraded GameModule system

### Tutorials

### Reference

### 🧰Functions

### 🎈Back Log