doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md

---
sidebar_position: 10
---

# Desktop Bottom Bar UI

## Overview
The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width.

![Desktop Bottom Bar](../img/05-main-scene/bottom-ui-desktop.png)

## Implementation
1. **Set Up Prefab Editor**:
   - **Locate Prefab**:
     - Search for `ui-bottom-bar-panel` prefab.
     - ![Locate Prefab](../img/05-main-scene/add-texture-bottom-bar-prefab.png)
   - **Find Assets**:
     - Navigate to `core/editor` directory.
     - ![Core Directory](../img/05-main-scene/add-texture-label-prefab.png)
   - **Clone Assets**:
     - Copy and paste to the game assets location.
     - ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png)

2. **Configure Prefabs**:
   - **Core Prefabs Structure**:
     - Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs`
     - ![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png)
   - **Rename Prefabs**:
     - Remove unnecessary prefixes:
       | Prefix to Remove | Original Name | Final Name |
       |------------------|---------------|------------|
       | `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
       | `template-` | `template-button-auto-selection` | `button-auto-selection` |
     - ![Rename Example](../img/05-main-scene/rename-prefab.png)
   - **Customize `button-auto-selection` Label**:
     - Use `template-label-auto-selection` to adjust appearance.
     - Add **Label Outline** and **Label Shadow** for better readability.
     - ![Label Options](../img/05-main-scene/option-for-label.png)
   - **Customize `ui-bottom-bar-panel` Label**:
     - Use `assets/game-assets/editor/bottom-ui/template-label-title`.
     - Include a localization component for multi-language support.
     - ![Localization Component](../img/05-main-scene/component-locale.png)
     - **FormatText Properties**:
       | Property | Description | Example |
       |----------|-------------|---------|
       | `default` | Initial formatting state | `false` |
       | `notify` | Formatting update callback | Updates when value changes |

3. **Set Up UI in Main Scene**:
   - Create a new node and configure in the main scene.
   - ![Main Scene Setup](../img/05-main-scene/set-positon-bottom-bar.png)

4. **Apply Textures**:
   - Ensure assets for bottom UI and button UI text are complete.
   - ![Texture Setup](../img/05-main-scene/prepare-ui-bottom-bar.png)

5. **Run Helper Tool**:
   - Configure the bottom bar UI using the helper tool.