format layout ui-bottom-bar

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

@@ -5,48 +5,62 @@ sidebar_position: 10
 
 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
 
-![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png)
+---
 
-## Implementation
+## Prepare Prefabs
 
-### Step 1: Set Up Prefab Editor    
+### Step 1: ui-bottom-bar-panel
 
-| Step | Action | image |
-|------|---------|--------------|
-| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](../img/05-main-scene/add-texture-bottom-bar-prefab.png) |
-| 2. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](../img/05-main-scene/add-texture-label-prefab.png) |
-| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png) |
+**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)
 
 ---
 
-### Step 2: Configure Prefabs  
+## Edit prefab 
 
-#### Core Prefabs Structure 
-Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
-![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
-
-#### 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` |     
-
-
-```jsx title="The folder structure is as follows:"
-    assets\game-assets\prefabs
-```
-
-
-![Prefab Naming Example](../img/05-main-scene/rename-prefab.png)
-
-#### Customize *`button-auto-selection`* Label  
+### 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.
@@ -59,10 +73,11 @@ Use the `template-label-auto-selection` to customize the appearance of the label
 
 ![Label Configuration Options](../img/05-main-scene/option-for-label.png)
 
-#### Customize *`ui-bottom-bar-panel`* Label
+### 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 Labels](#customize-button-auto-selection-label)     
+🔗[Follow the same configuration as button-auto-selection](#edit-prefab)     
 Bottom bar labels include a localization component for multi-language support 
 :::
 
@@ -77,29 +92,33 @@ The `FormatText` property controls text formatting behavior for label components
 
 ---
 
-### Step 3: Set Up UI In Main Scenes
+## Setup Main Scene
 
-Create new node and configuration in your main scene:                    
-![main scenes](../img/05-main-scene/set-positon-bottom-bar.png)    
+**Create new node** and **configuration** in your main scene:     
 
-#### Platform Node Spawner Settings
+![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)
 
-### Step 4: Apply Textures 
+**Position Y** : normally is -415
+
+---
+
+## Apply Textures 
+
+**Checklist assets** completed for bottom UI and button UI text   
 
-#### Texture Button Bar    
-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.
+**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)
+
+
 ---