diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 9b8f820..4272934 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -208,26 +208,18 @@ Create new node and configuration in your main scene: #### 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): +Checklist assets completed for bottom UI and button UI text +:::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) ##### 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 - -*button-auto-selection prefab* -![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) +To configure the bottom bar UI helper. +:::info +🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor) +::: --- @@ -278,20 +270,22 @@ Create new node and configuration in your main scene: #### 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): +##### Texture Mobile UI + +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) ##### 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) | +To configure the mobile UI helper. +:::info +🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) +::: + #### Step 4: Setup Color For Menu Mobile UI @@ -324,7 +318,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) | |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) | +|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) | --- diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png index d6b0f6b..174821e 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png differ diff --git a/docs/06-submodule/02-hyper-editor-package.md b/docs/06-submodule/02-hyper-editor-package.md index 9661d92..99f7d59 100644 --- a/docs/06-submodule/02-hyper-editor-package.md +++ b/docs/06-submodule/02-hyper-editor-package.md @@ -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. -![Editor Package](./img/editor-package.png) \ No newline at end of file +![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) | + diff --git a/docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png b/docs/06-submodule/img/btn-auto-selection.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png rename to docs/06-submodule/img/btn-auto-selection.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png b/docs/06-submodule/img/result-btn-auto-selection.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png rename to docs/06-submodule/img/result-btn-auto-selection.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png b/docs/06-submodule/img/result-buttom-bar-in-game.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png rename to docs/06-submodule/img/result-buttom-bar-in-game.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png b/docs/06-submodule/img/result-buttom-bar.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png rename to docs/06-submodule/img/result-buttom-bar.png diff --git a/docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png b/docs/06-submodule/img/result-mobile-button.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png rename to docs/06-submodule/img/result-mobile-button.png diff --git a/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png b/docs/06-submodule/img/run-ui-desktop-helper.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png rename to docs/06-submodule/img/run-ui-desktop-helper.png diff --git a/docs/06-submodule/img/run-ui-mobile-helper.png b/docs/06-submodule/img/run-ui-mobile-helper.png new file mode 100644 index 0000000..74238f8 Binary files /dev/null and b/docs/06-submodule/img/run-ui-mobile-helper.png differ