3.8 KiB
sidebar_position
| sidebar_position |
|---|
| 10 |
Bottom Bar UI (Desktop)
Overview
- Full bottom bar with all controls visible
- Horizontal layout maximizing screen width
Step 1: Set Up Prefab Editor
| Step | Action | image |
|---|---|---|
| 1. Locate Prefab | Search for ui-bottom-bar-panel prefab |
 |
| 2. Find Assets | Navigate to core/editor directory |
 |
| 3. Clone Assets | Copy / Paste to game assets location |  |
Step 2: Configure Prefabs
Core Prefabs Structure
Navigate to the location where the prefabs: assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\
Rename Prefabs
Rename the copied prefabs by removing unnecessary prefixes:
| Prefix to Remove | Original Prefab Name | Final Name |
|---|---|---|
template-new- |
template-new-ui-bottom-bar-panel |
ui-bottom-bar-panel |
template- |
template-button-auto-selection |
button-auto-selection |
assets\game-assets\prefabs
Customize button-auto-selection Label
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. |
| -------------------- | ------------------------------------------------- |
Customize ui-bottom-bar-panel Label
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 Labels
Bottom bar labels include a localization component for multi-language support
:::
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 |
Step 3: Set Up UI In Main Scenes
Create new node and configuration in your main scene:
Platform Node Spawner Settings
| Setting | Value | Description |
|---|---|---|
| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform |
| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform |
| Target Prefab | ui-bottom-bar-panel |
References prefab |
Step 4: Apply Textures
Texture Button Bar
Checklist assets completed for bottom UI and button UI text
:::info
🔗 Click here to follow the setup pack assets: Here
:::
Run the Helper Tool
To configure the bottom bar UI helper. :::info 🔗 Click here to follow run helper :::