diff --git a/docs/02-setup-main-game/05-main-scene/08-free-round.md b/docs/02-setup-main-game/05-main-scene/08-free-round.md index 38aeae0..2307899 100644 --- a/docs/02-setup-main-game/05-main-scene/08-free-round.md +++ b/docs/02-setup-main-game/05-main-scene/08-free-round.md @@ -11,95 +11,117 @@ description: Display and manage remaining free rounds in the game. - Handles the **display** and **logic** for tracking remaining free rounds in a slot game. - Supports both **desktop** and **mobile**, including animation and event handling. -| Orientation | Preview | -|-------------|---------| -| Desktop | ![Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | -| Mobile | ![Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | +| Platform | Preview | +|----------|---------| +| Desktop | ![Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | +| Mobile | ![Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | --- -## Implementation +## Implementation ### Prefab Location -#### In Core +- Copy or parse prefabs from core to game assets. -| Path | Example | -|---------------------------------------------------------------------|------------------------------------------------------------------------------------------| -| `assets\core-assets\hyper-core\packages\freeround-count-box\prefabs` |
![Core Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png)
| +#### Core -#### In Game +| Path | Preview | +|------|---------| +| `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs` | ![Desktop](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png) | -| Path | Example | -|-----------------------------------|---------------------------------------------------------------------------------------------------| -| `assets\game-assets\prefabs` |
![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png)
| +#### Game + +| Path | Preview | +|------|---------| +| `assets/game-assets/prefabs` |![Preview](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png) | + +--- ### General Setup -![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-general.png) +- Ensure the script references the correct nodes. -- Component that manages and displays the free rounds counter. +![General](../img/05-main-scene/freeround-counter/freeround-counter-general.png) -![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png) +- Manages and displays the remaining free round count in-game. -**(platform)**: Desktop / Mobile * +![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png)" -| Property | Description | -|---------------|------------------------------------------| -| `duration` | Animation duration in seconds (fade In/Out) | -| `content` | Container node for the counter | -| `labelLeft` | Label displaying remaining free rounds | +| Property | Description | +|---------------|--------------------------------------------| +| `duration` | Duration of fade in/out animation (seconds) | +| `content` | Container node for the counter | +| `labelLeft` | Label showing remaining free rounds | --- ### Platform Setup +- Ensure that the desktop and mobile prefabs are positioned differently in the main game scene for proper layout on each platform. + #### Desktop -| Component | Description | -|--------------------------|---------------------------------------------------------------------------------------------------------------| -| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller) | +![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png) -![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png) +| Component | Description | +|-------------------------|-------------| +| `Platform-ui-controller` | [View Setup](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller) | ---- #### Mobile -| Component | Description | -|-----------------------|--------------------------------------------------------------------------------------------------------------------------| -| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller) | -| `UI Mobile Position` | [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) | +![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png) -![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png) +| Component | Description | +|-------------------------|-------------| +| `Platform-ui-controller` | [View Setup](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller) | +| `UI Mobile Position` | [Mobile Position Setup](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) | + +--- + +### Asset Setup + +#### Desktop + +| Path | Preview | +|------|---------| +| `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Assets Desktop](../img/05-main-scene/freeround-counter/assets-freeround-desktop.png) | + +#### Mobile + +| Path | Preview | +|------|---------| +| `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` | ![Assets Mobile](../img/05-main-scene/freeround-counter/assets-freeround-mobile.png) | + +#### Common + +- **Free Round Background** + ![Assets Mobile](../img/05-main-scene/freeround-counter/assets-freeround-background.png) + +🔗 More: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure) + +:::tip +- **Position & Size**: Follow the game design layout. +- **Asset Packing**: Use separate textures for Desktop and Mobile. +::: + +--- ### Font Setup - - - - - - - - - - - -
Preview
![Add Font](../img/05-main-scene/freeround-counter/add-font.png)
+| Preview | +|---------| +| ![Assets Mobile](../img/05-main-scene/freeround-counter/add-font.png) | -:::tip - - **Position And Size**: Follow Game Design. -::: +--- +## Game Result Example -## Game Result Examples - -*To show the free round popup, make sure the main scene includes the popup panel.* -* More Detail: [Popup Panel](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel) - -|Platform|Popup|Action|Result| -|--------|-----|------|------| -|Desktop|![Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png)| -|Mobile|![Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround.png)| +Make sure the main scene includes the popup panel. +🔗 [See Popup Panel Guide](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel) +| Platform | Popup | Action | Result | +|----------|--------|---------------|--------| +| Desktop | ![Popup Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png) | Click → Start | ![Result Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | +| Mobile | ![Popup Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png) | Click → Start | ![Result Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-background.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-background.png new file mode 100644 index 0000000..3068089 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-background.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-desktop.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-desktop.png new file mode 100644 index 0000000..14f55c7 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-mobile.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-mobile.png new file mode 100644 index 0000000..649a0d0 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/assets-freeround-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setting-general.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setting-general.png index bb0bace..f013026 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setting-general.png and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setting-general.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png index d22d204..5b6144f 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-desktop.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-desktop.png new file mode 100644 index 0000000..2251994 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-mobile.png b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-mobile.png new file mode 100644 index 0000000..52b829f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/freeround-counter/texture-mobile.png differ