diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index cb592a5..270ffc1 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -88,9 +88,108 @@ The setup is very straightforward by using the `Generate Panel` command in each ## Setup UI Panel -> To be Added: -> - Different UI Layout on Desktop and Mobile -> - Which helper/p4f menu can be used +### UI Panel Overview + +#### Available Layouts + +The UI system supports both desktop and mobile layouts design. + +#### 🖥️ Desktop Layout +- Full bottom bar with all controls visible +- Horizontal layout maximizing screen width + +![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png) + +#### 📱 Mobile Layout +The mobile interface adapts to both landscape and portrait orientations: + +| Orientation | Preview | +|------------|----------| +| Landscape | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) | +| Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) | + + +### :one: **Add Prefabs For Desktop** + +#### Step 1: Setup Prefab Files + +1. **Locate Required Prefabs** + - Find `ui-bottom-bar-panel` prefab + ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) + +2. **Copy UI Assets** + - Go to **core/editor** directory + - Copy the `bottom-ui` folder + ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) + +3. **Place Assets in Game Directory** + - Paste the copied `bottom-ui` folder + ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) + +#### Step 2: Configure Prefabs + +1. **Core Prefabs** + ![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png) + +2. **Copied Prefab** + +At here: + +| 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` | + +![Prefab Naming Example](./img/05-main-scene/rename-prefab.png) + + +#### Button Auto Selection Label +Use `template-label-auto-selection` to customize the `button-auto-selection`: +- Modify text color +- Add Label Outline component +- Add Label Shadow component +![Label Configuration Options](./img/05-main-scene/option-for-label.png) + +#### Ui Bottom Bar Panel Label +Use `template-label-title` to customize the `ui-bottom-bar-panel`: +:::tip +[Detailed configuration the same Button Auto Selection Label](#button-auto-selection-label) +::: +Bottom bar labels include a localization component for multi-language support: +![[Localization Component](./img/05-main-scene/component-locale.png) + +#### FormatText + +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: Apply Textures + +1. **Run the Helper Tool** + - Open the UI Desktop Helper + - Select texture assignment options + ![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png) + +2. **Verify Results** + + **Auto Selection Component** + ![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png) + + **Bottom Bar Component** + ![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png) + +:::tip Success Verification +✔️ Check all textures are correctly mapped +✔️ Verify button states display properly +✔️ Confirm UI layout matches design +::: + +--- ## Setup Background diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png new file mode 100644 index 0000000..f5de14a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png new file mode 100644 index 0000000..1c7a557 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png new file mode 100644 index 0000000..b452752 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png b/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png new file mode 100644 index 0000000..db52ab4 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/component-locale.png b/docs/02-setup-main-game/img/05-main-scene/component-locale.png new file mode 100644 index 0000000..744e92a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/component-locale.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png b/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png new file mode 100644 index 0000000..6f539aa Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png b/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png new file mode 100644 index 0000000..3eb067c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png b/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png new file mode 100644 index 0000000..62ce24c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png b/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png new file mode 100644 index 0000000..87008d7 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/option-for-label.png b/docs/02-setup-main-game/img/05-main-scene/option-for-label.png new file mode 100644 index 0000000..c16cccc Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/option-for-label.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png new file mode 100644 index 0000000..7435e18 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png b/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png new file mode 100644 index 0000000..1701f15 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png b/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png new file mode 100644 index 0000000..b1236ad Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png new file mode 100644 index 0000000..6700c27 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png b/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png new file mode 100644 index 0000000..f8e871c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png differ