diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index d229785..9b8f820 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -125,7 +125,11 @@ 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 @@ -230,18 +234,30 @@ Create new node and configuration in your main scene: ### 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 | |------------------|----------------------| @@ -262,7 +278,7 @@ Create new node and configuration in your main scene: #### Step 4: Apply Textures -##### Texture Mobile Ui +##### Texture Mobile UI ✅ Checklist assets completed for Mobile UI 🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure): ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png) @@ -385,6 +401,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 overlays the main content to provide 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/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