diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 4889154..4c7b1ac 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -246,18 +246,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 | |------------------|----------------------| @@ -278,7 +290,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) @@ -405,6 +417,54 @@ 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 + +The popup panel is already integrated into main scenes. It is separated into two parts for modular use: + +|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)| +|---------------------------------------------------------------|---------------------------------------------------------------------| + + +### Popup in the Game +The popup panel is already integrated into the main scenes. + +![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 the core prefab: +:::info + **Prefab** : *hyper-multiple-popup.prefab* + **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) + +**Exit Popup Texture Path**: +:::info +**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/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-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..3ee1563 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..0784c2e 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