update structure doc

This commit is contained in:
dungdq 2025-05-08 15:22:30 +07:00
parent 1e9369f082
commit 0c7ba2d7e4
10 changed files with 63 additions and 28 deletions

View File

@ -224,26 +224,18 @@ Create new node and configuration in your main scene:
#### Step 4: Apply Textures #### Step 4: Apply Textures
##### Texture Button Bar ##### Texture Button Bar
✅ Checklist assets completed for bottom UI and button UI text 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): :::info
🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)
:::
![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)
##### Run the Helper Tool ##### 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: all new asset already loaded to these prefab To configure the bottom bar UI helper.
:::info
*button-auto-selection prefab* 🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor)
![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png) :::
*ui-bottom-bar-panel 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)
--- ---
@ -294,20 +286,22 @@ Create new node and configuration in your main scene:
#### Step 4: Apply Textures #### 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): Checklist assets completed for Mobile UI
:::info
🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)
:::
![main scenes](./img/05-main-scene/add-texture-mobile-ui.png) ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png)
##### Run the Helper Tool ##### 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 To configure the mobile UI helper.
:::info
*main ui button added textures* 🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
| ![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
@ -340,7 +334,7 @@ The `helper-paint-color-ui-mobile.js` component is a customizable color painter
|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) | |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) | |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) | |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) | |16 | **Total Win Medium Win Color** | Color for label medium win | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
--- ---

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -8,4 +8,45 @@ sidebar_position: 2
It adds some helper commands to Cocos Editor UI which can be used to speed up the process. It adds some helper commands to Cocos Editor UI which can be used to speed up the process.
![Editor Package](./img/editor-package.png) ![Editor Package](./img/editor-package.png)
## UI Bottom Bar Desktop Helper
### Run the Helper Tool
- Open the UI Desktop Helper
![Helper Tool](./img/run-ui-desktop-helper.png)
#### Verify Results: all new asset already loaded to these prefab
*button-auto-selection prefab*
![Auto Selection Result](./img/result-btn-auto-selection.png)
*In game*
![Auto Selection Result](./img/btn-auto-selection.png)
*ui-bottom-bar-panel prefab*
![Bottom Bar Result](./img/result-buttom-bar.png)
*In game*
![Bottom Bar Result](./img/result-buttom-bar-in-game.png)
---
## Mobile UI Helper
### Run the Helper Tool
- Open the UI Mobile Helper
![Helper Tool](./img/run-ui-mobile-helper.png)
#### Results
*main ui button added textures*
| ![Auto Selection Result](./img/result-mobile-button.png) |

View File

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 219 KiB

View File

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

View File

Before

Width:  |  Height:  |  Size: 216 KiB

After

Width:  |  Height:  |  Size: 216 KiB

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB