diff --git a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md index aaebffe..c57f2ea 100644 --- a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md +++ b/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) + + --- \ No newline at end of file diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-button-auto.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-button-auto.png new file mode 100644 index 0000000..79dbb66 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-button-auto.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-label.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-label.png new file mode 100644 index 0000000..cce277e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/from-label.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/helper.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/helper.png new file mode 100644 index 0000000..d18299f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/helper.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-button-auto.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-button-auto.png new file mode 100644 index 0000000..a2477fc Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-button-auto.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-label.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-label.png new file mode 100644 index 0000000..a5827dc Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-label.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-ui-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-ui-bottom-bar.png new file mode 100644 index 0000000..f0c391f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/ui-bottom-bar/to-ui-bottom-bar.png differ