---
sidebar_position: 10
---
# Bottom Bar UI (Desktop)

The bottom bar UI on desktop provides a functional interface for gameplay control

### Overview
- Full bottom bar with all controls visible
- Horizontal layout maximizing screen width

---

## Prepare Prefabs

### Step 1: ui-bottom-bar-panel

**Copy** `template-new-ui-bottom-bar-panel` 
from `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\template-ui-bottom-bar-panel`

![Add Symbol Texture](../img/05-main-scene/add-texture-bottom-bar-prefab.png)

**Past & rename** `assets\game-assets\prefabs\ui-bottom-bar-panel.prefab`
:::warning
Must rename to **ui-bottom-bar-panel**
:::  

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/to-ui-bottom-bar.png)


### Step 2: template-label

**Copy 2 prefab** `template-label-auto-selection` & `template-label-title` 

**From** `assets\core-assets\hyper-core\packages\ui\desktop-ui\editor\`

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/from-label.png)

**To** `assets\game-assets\editor\bottom-ui\`

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/to-label.png)

### Step 3: template-label-auto-selection

**To and rename** `template-label-auto-selection` & `template-label-title` 

From `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/from-button-auto.png)

**To** `assets\game-assets\prefabs\`

:::warning
Must rename to **button-auto-selection**
:::  

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/to-button-auto.png)

---

## Edit prefab 

### Step 1: button-auto-selection

**Follow Design:**
Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.

| Component            | Description                                       |
| -------------------- | ------------------------------------------------- |
| **Label Outline**    | Add an outline to make the text stand out.        |
| **Label Shadow**     | Add a shadow for better contrast and readability. |
| -------------------- | ------------------------------------------------- |

![Label Configuration Options](../img/05-main-scene/option-for-label.png)

### Step 2: template-label-title

Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:  
:::info
🔗[Follow the same configuration as button-auto-selection](#edit-prefab)     
Bottom bar labels include a localization component for multi-language support 
:::

![component-locale](../img/05-main-scene/component-locale.png)  

The `FormatText` property controls text formatting behavior for label components:

| Property | Description | Example |
|----------|-------------|---------|
| `default` | Initial formatting state | `false` |
| `notify` | Formatting update callback | Updates when value changes |

---

## Setup Main Scene

**Create new node** and **configuration** in your main scene:     

![main scenes](../img/05-main-scene/set-positon-bottom-bar.png)   

🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)

**Position Y** : normally is -415

---

## Apply Textures 

**Checklist assets** completed for bottom UI and button UI text   

:::info
🔗 Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
:::      
 ![main scenes](../img/05-main-scene/prepare-ui-bottom-bar.png)    

**Run the Helper Tool** to configure the bottom bar UI helper.
:::info
🔗Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::

![Add Symbol Texture](../img/05-main-scene/ui-bottom-bar/helper.png)


---