Merge pull request 'fix wrong image' (#19) from feature/add-setup-ui-panel-main-game into develop

Reviewed-on: #19

docs/01-setup-the-project/03-setup-custom-engine.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 Set **Javascript Engine Path** to a **custom Cocos Engine**.
 
-Thank to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game.
+Thanks to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game.
 
 For the detail of the Custom Engine, take a look at this [**Custom Cocos Engine documentation**](../custom-cocos-engine/custom-cocos-engine.md)
 

docs/01-setup-the-project/04-create-game-folder-structure.md

@@ -28,7 +28,7 @@ Rename those scenes:
 
 ![Template Scene](./img/template-scenes.png)
 
-Inside `assets/game-assets/scripts/`, create a folder called `custome-scaler` then add a script `custom-scale-data.js`.
+Inside `assets/game-assets/scripts/`, create a folder called `custom-scaler` then add a script `custom-scale-data.js`.
 
 ![Custom Scale](./img/custom-scale.png)
 

docs/02-setup-main-game/05-main-scene.md

@@ -81,13 +81,23 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
 - Landing Panel: 
 
-    ![Landing Panel](./img/05-main-scene/landing-panel.png)
+    ![Landing Panel](./img/05-main-scene/landing-panel.png)     
+
+To define Landing Panel, create the following script:
+
+:::warning
+    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
+    SlottySetting.prototype._registerInjection = function () {
+        DIContainer.Register('landingGenerator', require('landing-generator'));
+    };
+    ```
+:::
 
 - Present Win Cell Panel:
 
     ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png)
 
-- Present Win Cell Panel:
+- Present Win Border Panel:
 
     ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png)
 
@@ -97,18 +107,301 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
     If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
 
-    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)
+    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)    
+    **check toggle General Panel** 
+    ![Tension Size Custom](./img/05-main-scene/note-bug-tension.png)    
+    To define Tension Panel, create the following script:
+    :::warning
+    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
+    SlottySetting.prototype._registerInjection = function () {
+        DIContainer.Register('tensionGenerator', require('tension-generator'));
+    };
+    ```
+    :::  
+
 
 ## Setup UI Panel
 
-> To be Added:
-> - Different UI Layout on Desktop and Mobile
-> - Which helper/p4f menu can be used
+### UI Panel Overview
+
+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) |
+
+
+### UI Panel 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) |
+
+---
+
+#### Step 2: Configure Prefabs  
+
+##### Core Prefabs Structure 
+Navigate to the location where the 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  
+
+**Follow Design:**
+Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.
+
+| Component            | Description                                       |
+| -------------------- | ------------------------------------------------- |
+| **Label Outline**    | Add an outline to make the text stand out.        |
+| **Label Shadow**     | Add a shadow for better contrast and readability. |
+| -------------------- | ------------------------------------------------- |
+
+![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`:  
+:::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**  
+:::
+
+![component-locale](./img/05-main-scene/component-locale.png)  
+
+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: 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)    
+
+##### Platform Node Spawner Settings
+
+| Setting | Value | Description |
+|---------|-------|-------------|
+| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform |
+| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform |
+| Target Prefab | `ui-bottom-bar-panel` | References prefab |
+
+#### 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):         
+ ![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)
+
+---
+
+### 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 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 |
+|------------------|----------------------|
+| `template-`      |![Prefab Naming Example](./img/05-main-scene/result-rename-mobile.png)   |   
+
+#### Step 3: Setup Ui In Main Scenes
+
+Create new node and configuration in your main scene:                        
+![main scenes](./img/05-main-scene/set-positon-mobile-ui.png)   
+
+##### Platform Node Spawner Settings
+
+| Setting | Value | Description |
+|---------|-------|-------------|
+| Mobile Toggle | ✓ Enabled | Show prefabs for mobile platform |
+| Desktop Toggle | ☐ Disabled | Hide prefabs for desktop platform |
+| Target Prefab | `mobile-ui` | References prefab |
+
+#### 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):         
+ ![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)  | 
+  
+
+#### Step 4: Setup Color For Menu Mobile UI 
+
+**Follow Design:**   
+
+| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png)  |
+|---------|-------|
+
+##### Overview
+The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
+  
+![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png)    
+
+|Ordinal number| Properties | Explaination | Example |
+|--------------|------------|--------------|---------|
+|0             |**paintColor**  |Trigger to repaint UI components   | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)|
+|1             | **Main Ui Normal Color**          |Default color of UI elements | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
+|2             | **Main Ui Highlight Color**       | Highlight color for selected UI elements  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|3             | **Toggle State Off Color**        | Color of toggle when off  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
+|4             | **Toggle State On Color**         | Color of toggle when on  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
+|5             | **Background Info Page Color**    | Info screen background  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)|
+|6             | **Background Menu Color**         | Menu background color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) |
+|7             | **Background Point Panel Color**  | Background panel for point/balance UI  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
+|8             | **Background Bottom Bar Color**   | Background bottom bar (show only mobile portrait)  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
+|9             | **Button Quit Color**             | Quit button color  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
+|10            | **Button Cancel Color**           | Cancel button color  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
+|11            | **Label Balance Normal Color**    | Normal balance label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
+|12            | **Label Balance Spin Color**      | During-spin label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
+|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) |
+
+---
 
 ## Setup Background
 
-> To Be Added: 
-> - show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg.
+Background overview:
+
+| | Desktop | Mobile |
+|:-:|--------------|---------|
+|**Background Landscape**<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)|
+|**Background Portrait**<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)|
+
+**Background landscape** use for Desktop and Mobile landscape.
+
+**Background portrait** only use for Mobile portrait.
+
+### 1. Prepare the assets
+| | Assets | Description |
+|:-:|--------------|---------|
+|**Static**<br/>|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game|
+|**Animation**<br/>|![Background Prepare Portrait](./img/05-main-scene/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|
+
+### 2. Background Landscape
+    
+    - **background-container:** must have **orientation-ui-controller** to display on Landscape with the options below.
+    - **background-main-game:** we use sprite frame from prepared assets.
+    
+    Both must add component **Widget** with the options below to resize with parent node.
+
+    ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png)
+
+### 3. Background Portrait
+    
+    - **moible-background-container:**
+        - Add **mobile-portrait-background-ui-controller** to display only on Mobile.
+        - Add **background-mobile-portrait-fullscreen-scaler** to resize with screen resolution.
+        - Add **orientation-ui-controller** to display on Portrait with the options below.
+
+    - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node.
+
+    ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)
+
+### 4. Background Animation
+
+If the game have design animation for background, we will do this step.
+
+1. Add **animation-provider**: This component contains all **animation** of the game.
+
+2. Using hepler to generate animation.
+
+    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png)
+
+3. We have the result as below, and continue setup for **spine-animation**.
+    - **Is Loop**: is ✅ because this animation will play through the game.
+    - **Static Sprite Frame**: It will be displayed when the animation has not finished loading.
+
+    ![Background Setup Animation](./img/05-main-scene/bg-setup-animation.png)
+
+4. Add animation background with component below:
+
+    **Animation background landscape**
+    
+    - Add **animation-play-on-anable** with animation name in **Animation Provider**.
+    - Add **background-scaler** resize with screen resolution.
+
+    ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png)
+
+    **Animation background portrait**
+    
+    - **mobile-background-anim-portrait:**
+        - Add **mobile-portrait-background-ui-controller** to display only on **Mobile**.
+        - Add **orientation-ui-controller** to display on Portrait with the options below.
+    - **anim-background-main-game:**
+        - **animation-play-on-anable** with animation name in **Animation Provider**.
+        - **portrait-anim-background-scaler** resize with screen resolution.
+
+        ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png)
 
 ## Setup Popup Panel