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

sidebar_position

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.

Implementation

1. Set Up Prefab Editor:

   • Locate Prefab:
     • Search for ui-bottom-bar-panel prefab.
     • 
   • Find Assets:
     • Navigate to core/editor directory.
     • 
   • Clone Assets:
     • Copy and paste to the game assets location.
     • 

2. Configure Prefabs:

   • Core Prefabs Structure:
     • Path: assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs
     • 
   • 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

     • 
   • Customize button-auto-selection Label:
     • Use template-label-auto-selection to adjust appearance.
     • Add Label Outline and Label Shadow for better readability.
     • 
   • Customize ui-bottom-bar-panel Label:
     • Use assets/game-assets/editor/bottom-ui/template-label-title.
     • Include a localization component for multi-language support.
     • 
     • 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.
   • 

4. Apply Textures:

   • Ensure assets for bottom UI and button UI text are complete.
   • 

5. Run Helper Tool:

   • Configure the bottom bar UI using the helper tool.