Tu Bui b9bba2fe46 format layout ui-bottom-bar

2025-05-21 14:09:22 +07:00

3.6 KiB

Raw Blame History

sidebar_position

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

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

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\

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

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\

To assets\game-assets\prefabs\

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

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.
--------------------	-------------------------------------------------

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
Bottom bar labels include a localization component for multi-language support :::