update all docs bottom bar
dungdq
@ -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 |  |
|
||||
| 2. Copy Assets | Navigate to `core/editor` directory |  |
|
||||
| 2. Copy Assets | Navigate from `core/editor` directory |  |
|
||||
| 3. Place Assets | Copy / Paste to game assets location |  |
|
||||
|
||||
---
|
||||
@ -135,14 +135,14 @@ Rename the copied prefabs by removing unnecessary prefixes:
|
||||
|
||||
```jsx title="The folder structure is as follows:"
|
||||
assets\game-assets\prefabs
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### 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:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### UI Panel Mobile
|
||||
@ -220,7 +218,12 @@ Create the following node configuration in your main scene:
|
||||
| 2. Place Assets | Copy to game assets location |  |
|
||||
| 3. Locate Prefab | Search for `buy-feature` prefab |  |
|
||||
|
||||
#### 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:
|
||||
|  |
|
||||
|
||||
|
||||
#### 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`
|
||||
|  |  |
|
||||
**Follow Game Design For Mobile UI:**
|
||||
|
||||
| |  |
|
||||
|---------|-------|
|
||||
|
||||
##### 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.
|
||||
|
||||
|
||||
|
||||
|Ordinal number| Properties | Explaination | Example |
|
||||
|--------------|------------|--------------|---------|
|
||||
|1 | **Main Ui Normal Color** | pick color: #45AEFF |  |
|
||||
|2 | **Main Ui Highlight Color** | pick color: #A8CBFF |  |
|
||||
|3 | **Toggle State Off Color** | pick color: #45AEFF |  |
|
||||
|4 | **Toggle State On Color** | pick color: #A8CBFF |  |
|
||||
|5 | **Background Info Page Color** | pick color: #000000 | |
|
||||
|6 | **Background Menu Color** | pick color: #000000 |  |
|
||||
|7 | **Background Point Panel Color** | pick color: #000000 |  |
|
||||
|8 | **Background Bottom Bar Color** | pick color: #FFFFFF |  |
|
||||
|9 | **Button Quit Color** | pick color: #45AEFF |  |
|
||||
|10 | **Button Cancel Color** | pick color: #616160 |  |1
|
||||
|11 | **Label Balance Normal Color** | pick color: #7DFFDF |  |
|
||||
|12 | **Label Balance Spin Color** | pick color: #FFFFFF |  |
|
||||
|13 | **Button Plus Minus Auto Color** | pick color: #FFFFFF |  |
|
||||
|14 | **Label Start Auto Color** | pick color: #FFFFFF |  |
|
||||
|15 | **Label Outline Notification** | pick color: #FFFFFF |  |
|
||||
|16 | **Total Win Medium Win Color** | pick color: #FFFFFF |  |
|
||||
|0 |**paintColor** |Trigger to repaint UI components | |
|
||||
|1 | **Main Ui Normal Color** |Default color of UI elements |  |
|
||||
|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
|
||||
|3 | **Toggle State Off Color** | Color of toggle when off |  |
|
||||
|4 | **Toggle State On Color** | Color of toggle when on |  |
|
||||
|5 | **Background Info Page Color** | Info screen background | |
|
||||
|6 | **Background Menu Color** | Menu background color |  |
|
||||
|7 | **Background Point Panel Color** | Background panel for point/balance UI |  |
|
||||
|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
|
||||
|9 | **Button Quit Color** | Quit button color |  |
|
||||
|10 | **Button Cancel Color** | Cancel button color |  |1
|
||||
|11 | **Label Balance Normal Color** | Normal balance label color |  |
|
||||
|12 | **Label Balance Spin Color** | During-spin label color |  |
|
||||
|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay |  |
|
||||
|14 | **Label Start Auto Color** | Start autoplay label |  |
|
||||
|15 | **Label Outline Notification** | Outline color + width config |  |
|
||||
|16 | **Total Win Medium Win Color** | Color for medium win effects |  |
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 55 KiB |