diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 79488bb..4d7cd18 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -141,22 +141,26 @@ The mobile interface adapts to both landscape and portrait orientations: | Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) | -### UI Panel Desktop +### UI Sideband +> To Be Added: +> - Prepare the asset +> - Run helper / p4f menu or setup manually +### UI Bottom Bar Desktop #### Step 1: Setup Prefab Editor | 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. Copy Assets | Navigate from `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) | -| 3. Place Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-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) | --- #### Step 2: Configure Prefabs ##### Core Prefabs Structure -Navigate to the location where the prefabs: +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 @@ -188,7 +192,7 @@ 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 -Use `template-label-title` to customize the `ui-bottom-bar-panel`: +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)* **Bottom bar labels include a localization component for multi-language support** @@ -204,7 +208,7 @@ The `FormatText` property controls text formatting behavior for label components | `notify` | Formatting update callback | Updates when value changes | --- -#### Step 3: Setup Ui In Main Scenes +#### Step 3: Setup UI In Main Scenes Create new node and configuration in your main scene: ![main scenes](./img/05-main-scene/set-positon-bottom-bar.png) @@ -220,44 +224,48 @@ Create new node and configuration in your main scene: #### Step 4: Apply Textures ##### Texture Button Bar -✅ Checklist assets completed for bottom UI and button UI text -🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure): +Checklist assets completed for bottom UI and button UI text +:::info +🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure) +::: ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) ##### Run the Helper Tool -- Open the UI Desktop Helper -- Select texture assignment options -![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png) -##### Verify Results - -*Auto Selection prefab* -![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png) - -*Bottom Bar prefab* -![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png) - -*In game* -![Auto Selection Result](./img/05-main-scene/btn-auto-selection.png) -![Bottom Bar Result](./img/05-main-scene/result-buttom-bar-in-game.png) +To configure the bottom bar UI helper. +:::info +🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor) +::: --- ### UI Panel Mobile #### Step 1: Setup Prefab -| Step | Action | image | -|------|---------|--------------| -| 1. Locate Prefab | Search for `mobile-ui` prefab | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png) | -| 2. Place Assets | Copy to game assets location | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png) | -| 3. Locate Prefab | Search for `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) | + +| Step | Action | Description | Image Reference | +| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- | +| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png) | +| 2 | Clone Assets | Copy the required assets | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png) | +| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - | +| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) | +| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - | + + +:::tip File Structure +Maintain this directory structure for proper prefab references: +``` +assets/ +└── game-assets/ + └── prefabs/ + └── mobile/ + ├── Exp: mobile-ui.prefab + └── Exp: buy-feature.prefab +``` +::: #### Step 2: Rename Prefabs -```jsx title="The folder structure is as follows:" - assets\game-assets\prefabs\mobile -``` - Rename the copied prefabs by removing unnecessary prefixes: | Prefix to Remove | Final Name | |------------------|----------------------| @@ -278,20 +286,22 @@ Create new node and configuration in your main scene: #### Step 4: Apply Textures -##### Texture Mobile Ui -✅ Checklist assets completed for Mobile UI -🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure): +##### Texture Mobile UI + +Checklist assets completed for Mobile UI + +:::info +🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure) +::: ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png) ##### Run the Helper Tool -- Open the UI Mobile Helper -- Select texture assignment options -![Helper Tool](./img/05-main-scene/run-ui-mobile-helper.png) -##### Results - -*main ui button added textures* -| ![Auto Selection Result](./img/05-main-scene/result-mobile-button.png) | +To configure the mobile UI helper. +:::info +🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) +::: + #### Step 4: Setup Color For Menu Mobile UI @@ -324,7 +334,7 @@ The `helper-paint-color-ui-mobile.js` component is a customizable color painter |13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) | |14 | **Label Start Auto Color** | Start autoplay label | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | |15 | **Label Outline Notification** | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) | -|16 | **Total Win Medium Win Color** | Color for medium win effects | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | +|16 | **Total Win Medium Win Color** | Color for label medium win | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | --- @@ -405,6 +415,56 @@ If the game have design animation for background, we will do this step. ## Setup Popup Panel -> To Be Added: -> - Prepare the asset -> - Run helper / p4f menu or setup manually \ No newline at end of file +### Overview + +A popup is a temporary UI element that provides additional information or options to the user. + +|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](./img/05-main-scene/popup-credit-game.png)| +|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------| + + +### Popup in the Game +The popup panel is already integrated into the main scenes `template-main-game`. + +![Popup In Game](./img/05-main-scene/popup-panel-in-game.png) + + +| **Node Type** | **Location Description** | **Screenshot** | +| -------------------- | ----------------------------- | ------------------------------------------------------------------------| +| **Definition Node** | Before configuring the popup prefab | ![Popup Definition](./img/05-main-scene/popup-before.png) | +| **Positioning Node** | After adjusting the prefab's position in scene | ![Popup Position](./img/05-main-scene/popup-after.png) | + +#### Detail configuring: + +##### Multiple Popup Panel: + +![Popup Position](./img/05-main-scene/popup-multi-panel.png) + +To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core: +:::info + **Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab* +::: + +##### Manual Popup Panel: + +- This popup is self-configured using shared textures and layout structure. +- The color theme and style may vary depending on the game design. + +⚠️ Note: +The **Exit Game** Popup only appears in **Desktop**. + +![Exit Game Popup In Game](./img/05-main-scene/popup-exit-in-game.png) + +##### Texture Path & Asset Info: +✅ Exit popup textures have been successfully packed. +🔗 Refer to the full asset structure guide: [Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure) + +**Texture Path:**: +`assets\game-assets\textures\desktop\preloads\main-game\exit` + +**Preview Result**: +![Popup overview exit](./img/05-main-scene/popup-exit-game.png) + + + + diff --git a/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png new file mode 100644 index 0000000..6954e6d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png index d6b0f6b..174821e 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-after.png b/docs/02-setup-main-game/img/05-main-scene/popup-after.png new file mode 100644 index 0000000..d1994c9 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-after.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-before.png b/docs/02-setup-main-game/img/05-main-scene/popup-before.png new file mode 100644 index 0000000..265d46a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-before.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-credit-game.png b/docs/02-setup-main-game/img/05-main-scene/popup-credit-game.png new file mode 100644 index 0000000..ea7154a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-credit-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-disconnet.png b/docs/02-setup-main-game/img/05-main-scene/popup-disconnet.png new file mode 100644 index 0000000..ab336f1 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-disconnet.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-exit-game.png b/docs/02-setup-main-game/img/05-main-scene/popup-exit-game.png new file mode 100644 index 0000000..acc1fc5 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-exit-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-exit-in-game.png b/docs/02-setup-main-game/img/05-main-scene/popup-exit-in-game.png new file mode 100644 index 0000000..058b186 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-exit-in-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-multi-panel.png b/docs/02-setup-main-game/img/05-main-scene/popup-multi-panel.png new file mode 100644 index 0000000..b57725e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-multi-panel.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-multi.png b/docs/02-setup-main-game/img/05-main-scene/popup-multi.png new file mode 100644 index 0000000..a0a9e15 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-multi.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/popup-panel-in-game.png b/docs/02-setup-main-game/img/05-main-scene/popup-panel-in-game.png new file mode 100644 index 0000000..ba86765 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/popup-panel-in-game.png differ diff --git a/docs/06-submodule/02-hyper-editor-package.md b/docs/06-submodule/02-hyper-editor-package.md index 9661d92..99f7d59 100644 --- a/docs/06-submodule/02-hyper-editor-package.md +++ b/docs/06-submodule/02-hyper-editor-package.md @@ -8,4 +8,45 @@ sidebar_position: 2 It adds some helper commands to Cocos Editor UI which can be used to speed up the process. -![Editor Package](./img/editor-package.png) \ No newline at end of file +![Editor Package](./img/editor-package.png) + +## UI Bottom Bar Desktop Helper + +### Run the Helper Tool +- Open the UI Desktop Helper + +![Helper Tool](./img/run-ui-desktop-helper.png) + +#### Verify Results: all new asset already loaded to these prefab + +*button-auto-selection prefab* + +![Auto Selection Result](./img/result-btn-auto-selection.png) + +*In game* + +![Auto Selection Result](./img/btn-auto-selection.png) + +*ui-bottom-bar-panel prefab* + +![Bottom Bar Result](./img/result-buttom-bar.png) + +*In game* + +![Bottom Bar Result](./img/result-buttom-bar-in-game.png) + +--- + +## Mobile UI Helper + +### Run the Helper Tool +- Open the UI Mobile Helper + +![Helper Tool](./img/run-ui-mobile-helper.png) + +#### Results + +*main ui button added textures* + +| ![Auto Selection Result](./img/result-mobile-button.png) | + diff --git a/docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png b/docs/06-submodule/img/btn-auto-selection.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png rename to docs/06-submodule/img/btn-auto-selection.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png b/docs/06-submodule/img/result-btn-auto-selection.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png rename to docs/06-submodule/img/result-btn-auto-selection.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png b/docs/06-submodule/img/result-buttom-bar-in-game.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png rename to docs/06-submodule/img/result-buttom-bar-in-game.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png b/docs/06-submodule/img/result-buttom-bar.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png rename to docs/06-submodule/img/result-buttom-bar.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png b/docs/06-submodule/img/result-mobile-button.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png rename to docs/06-submodule/img/result-mobile-button.png diff --git a/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png b/docs/06-submodule/img/run-ui-desktop-helper.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png rename to docs/06-submodule/img/run-ui-desktop-helper.png diff --git a/docs/06-submodule/img/run-ui-mobile-helper.png b/docs/06-submodule/img/run-ui-mobile-helper.png new file mode 100644 index 0000000..74238f8 Binary files /dev/null and b/docs/06-submodule/img/run-ui-mobile-helper.png differ