# Set up Player UI

To provide Player some UI elements to interact with and to be able to see information of selected unit, you can use the demo UI with 2 simple steps. Or you can also tailor your own UI and read the information from the Player in realtime as well as listening to various events from combat, production, building and other events.

## Main Controls

<details>

<summary>Add UI elements for Player</summary>

1.  Find **Player UI** prefab and drag & drop it into under the main player or anywhere in the scene. Placing it under player will automatically assign all the required dependencies from the player.

    This will add basic information structure to the screen with game console logs, selected entity information, production actions, garrison control and more.
2. If you did not add prefab under player, assign the missing reference like Player.
3. Test the Setup
   * Run the scene to verify that you can select units and then use UI to **build structures and produce units.**



Great! The UI should be working as expected now. You can of course implement your own and use these example scripts as guides.

</details>



## **Additional UI**

Optionally you can add more UI for displaying various information to the player. Here are some common uses and provided prefabs used for demonstration purposes.

<details>

<summary>Floating Text (Combat)</summary>

You can add a floating text for **combat damage** for the **Combat Modules** attached to Players. It can even be useful for debugging purposes of your project, to see **when** and **how much** **damage** is applied to units when they are in **combat**.

1. Find and drag the prefab **Visual Damage System** into your scene
2. Pick which rendering approach you'd like to use. The prefab contains 2 canvases and 2 texts. Each have their own pros and cons. Also overlapping texts behave differently with each approach.
   1. **Screen space** which uses a single canvas and adds multiple texts on it moving with the entities. This optimises canvas rendering but must calculate positions for each entity in screen space.
   2. And **World space** text where each text has its own canvas positioned in a world above the entity. This removes the calculation of text positions, but increases number of canvases.
3. You can configure the visuals as you like and even remove the game objects not in use. E.g. if you pick world screen you can remove the space screen objects.

</details>

<details>

<summary>Display Health Bar</summary>

To show health bars for your units with when they are injured, selected or highlighted, you can use the provided prefab.



1. Open **unit prefab** where you'd like to add Health Bar.
2. Find in inspector **Health Bar UI** prefab and drag it under **root object**.
   1. If prefab is not under root, manually set up the missing references on Health Bar component.
3. That's it. The **health bar** should now appear when unit is either **damaged**, **highlighted**. In case selection prefab is used it will also show up when entity is highlighted or selected.
4. You can customise this UI further to your liking, by moving, resizing, replacing images, colors, etc.



</details>

<details>

<summary>Display Build Progress Bar</summary>

To show building progress for units or entities under construction, you can use the provided prefab.

1. Open **unit prefab** where you'd like to add the **indicator for unit building**
2. Find the **Building Bar UI** prefab and drag it under **root object**.
   1. **Not under root object?** No worries, you just need to set up the **Entity** reference in `EntityBuildingProgress` component. It will by default look for this reference on the **parent** game object.
3. That's it. You should now see the construction progress indicator on the unit when **building process is taking place**.
4. You can customise this UI further to your liking, by moving, resizing, replacing images, colors, etc.

</details>

