diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 311becf..873975f 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -114,7 +114,7 @@ The mobile interface adapts to both landscape and portrait orientations: | 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 to `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-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) | --- @@ -135,14 +135,14 @@ Rename the copied prefabs by removing unnecessary prefixes: ```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 +#### Customize *`button-auto-selection`* Label +**Follow Game Design:** Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab. | Component | Description | @@ -207,8 +207,6 @@ Create the following node configuration in your main scene: ![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 @@ -220,7 +218,12 @@ Create the following node configuration in your main scene: | 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 +#### 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 | |------------------|----------------------| @@ -257,30 +260,37 @@ Create the following node configuration in your main scene: | ![Auto Selection Result](./img/05-main-scene/result-mobile-button.png) | -#### Step 4: Setup Color For Menu Mobile UI +#### Step 4: Setup Color For Menu Mobile UI -*Gerenal picker color* using `helper-paint-color-ui-mobile` -| ![Auto Selection Result](./img/05-main-scene/result-mobile-ui.png) | ![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png) | +**Follow Game Design For Mobile UI:** + +| ![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 | |--------------|------------|--------------|---------| -|1 | **Main Ui Normal Color** | pick color: #45AEFF | ![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** | pick color: #A8CBFF | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png) | -|3 | **Toggle State Off Color** | pick color: #45AEFF | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) | -|4 | **Toggle State On Color** | pick color: #A8CBFF | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) | -|5 | **Background Info Page Color** | pick color: #000000 | ![Auto Selection Result](./img/05-main-scene/background-menu.png)| -|6 | **Background Menu Color** | pick color: #000000 | ![Auto Selection Result](./img/05-main-scene/background-menu.png) | -|7 | **Background Point Panel Color** | pick color: #000000 | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) | -|8 | **Background Bottom Bar Color** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) | -|9 | **Button Quit Color** | pick color: #45AEFF | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) | -|10 | **Button Cancel Color** | pick color: #616160 | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1 -|11 | **Label Balance Normal Color** | pick color: #7DFFDF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) | -|12 | **Label Balance Spin Color** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) | -|13 | **Button Plus Minus Auto Color** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) | -|14 | **Label Start Auto Color** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | -|15 | **Label Outline Notification** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) | -|16 | **Total Win Medium Win Color** | pick color: #FFFFFF | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | +|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) | --- diff --git a/docs/02-setup-main-game/img/05-main-scene/background-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/background-bottom-bar.png deleted file mode 100644 index 28db2ae..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-bottom-bar.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-menu.png b/docs/02-setup-main-game/img/05-main-scene/background-menu.png deleted file mode 100644 index 6d1794c..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-menu.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-point-menu.png b/docs/02-setup-main-game/img/05-main-scene/background-point-menu.png deleted file mode 100644 index 94b65c9..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-point-menu.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png index a4d1551..fb4eeea 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background info.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-info.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background info.png rename to docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-info.png diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png new file mode 100644 index 0000000..7dc4132 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png index 4b69dc6..a678e45 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png index f43731d..9446d9a 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png index ff8bdfb..dd3f267 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png index a2696f1..d689841 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png index 991b10e..f663e92 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png index e4b99ce..af9efaa 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png index cc402f2..a52c19d 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png index 1b7beeb..4dd272b 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png index b54fc3d..8e389af 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png index 35d215c..7b4857e 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png new file mode 100644 index 0000000..493c51f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png index 01e88e7..b7065eb 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png index 8543d34..949dbe0 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png index 76a8149..1da365c 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png index 4efa453..6e72689 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-button.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-button.png deleted file mode 100644 index 26b84d8..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-button.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/label-color-balance.png b/docs/02-setup-main-game/img/05-main-scene/label-color-balance.png deleted file mode 100644 index 3d56b54..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/label-color-balance.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-mobile-ui.png b/docs/02-setup-main-game/img/05-main-scene/result-mobile-ui.png deleted file mode 100644 index 871f310..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/result-mobile-ui.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png b/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png index 0748a58..0532d1f 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png and b/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png differ