From e3b256d1975fc6b4fdf5116a6cbb83872d0df0b4 Mon Sep 17 00:00:00 2001 From: huy Date: Thu, 22 May 2025 14:09:43 +0700 Subject: [PATCH] Update contents --- .../05-main-scene/06-special-win.md | 2 +- .../05-main-scene/08-free-round.md | 2 +- .../05-main-scene/10-desktop-bottom-bar-ui.md | 139 +++++---------- .../05-main-scene/11-ui-mobile-panel.md | 141 +++++++-------- .../05-main-scene/12-popup-panel.md | 74 ++++---- .../05-main-scene/13-game-logo.md | 164 ++++++++---------- .../05-main-scene/15-jackpot-panel.md | 93 ++++------ .../05-main-scene/16-idle-animation.md | 33 ++-- .../05-main-scene/17-win-limit.md | 74 +++----- .../05-main-scene/18-Gamble.md | 4 +- .../05-main-scene/18-buy-feature.md | 25 +-- 11 files changed, 314 insertions(+), 437 deletions(-) diff --git a/docs/02-setup-main-game/05-main-scene/06-special-win.md b/docs/02-setup-main-game/05-main-scene/06-special-win.md index 80c5096..74f52a9 100644 --- a/docs/02-setup-main-game/05-main-scene/06-special-win.md +++ b/docs/02-setup-main-game/05-main-scene/06-special-win.md @@ -24,7 +24,7 @@ Special Wins are high-value reward events categorized by payout thresholds: - ![Component Architecture](../img/05-main-scene/special-win-in-game.png) - **Coin Effect System**: - - Variants for different markets: + - Variants for different game theme: | Submodule | Theme | Preview | |-----------|-------|---------| | `hyper-coin-shower-international` | International | ![International Coin](../img/05-main-scene/special-win-coin-international.png) | 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 af1449a..fc5a816 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 @@ -48,7 +48,7 @@ The **Free Round** system manages the display and logic for tracking remaining f - ![Desktop Assets](../img/05-main-scene/freeround-counter/assets-freeround-desktop.png) - **Mobile**: - Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` - - ![Mobile Assets../img/05-main-scene/freeround-counter/assets-freeround-mobile.png) + - ![Mobile Assets](../img/05-main-scene/freeround-counter/assets-freeround-mobile.png) - **Common**: - Free Round Background: ![Background Asset](../img/05-main-scene/freeround-counter/assets-freeround-background.png) diff --git a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md index aaebffe..e19ca38 100644 --- a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md +++ b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md @@ -1,105 +1,58 @@ --- sidebar_position: 10 --- -# Bottom Bar UI (Desktop) -The bottom bar UI on desktop provides a functional interface for gameplay control +# Desktop Bottom Bar UI ---- +## Overview +The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width. -### Overview -- Full bottom bar with all controls visible -- Horizontal layout maximizing screen width - -![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png) +![Desktop Bottom Bar](../img/05-main-scene/bottom-ui-desktop.png) ## Implementation +1. **Set Up Prefab Editor**: + - **Locate Prefab**: + - Search for `ui-bottom-bar-panel` prefab. + - ![Locate Prefab](../img/05-main-scene/add-texture-bottom-bar-prefab.png) + - **Find Assets**: + - Navigate to `core/editor` directory. + - ![Core Directory](../img/05-main-scene/add-texture-label-prefab.png) + - **Clone Assets**: + - Copy and paste to the game assets location. + - ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png) -### Step 1: Set Up Prefab Editor +2. **Configure Prefabs**: + - **Core Prefabs Structure**: + - Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs` + - ![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png) + - **Rename Prefabs**: + - Remove unnecessary prefixes: + | Prefix to Remove | Original Name | Final Name | + |------------------|---------------|------------| + | `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` | + | `template-` | `template-button-auto-selection` | `button-auto-selection` | + - ![Rename Example](../img/05-main-scene/rename-prefab.png) + - **Customize `button-auto-selection` Label**: + - Use `template-label-auto-selection` to adjust appearance. + - Add **Label Outline** and **Label Shadow** for better readability. + - ![Label Options](../img/05-main-scene/option-for-label.png) + - **Customize `ui-bottom-bar-panel` Label**: + - Use `assets/game-assets/editor/bottom-ui/template-label-title`. + - Include a localization component for multi-language support. + - ![Localization Component](../img/05-main-scene/component-locale.png) + - **FormatText Properties**: + | Property | Description | Example | + |----------|-------------|---------| + | `default` | Initial formatting state | `false` | + | `notify` | Formatting update callback | Updates when value changes | -| 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. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](../img/05-main-scene/add-texture-label-prefab.png) | -| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png) | +3. **Set Up UI in Main Scene**: + - Create a new node and configure in the main scene. + - ![Main Scene Setup](../img/05-main-scene/set-positon-bottom-bar.png) ---- +4. **Apply Textures**: + - Ensure assets for bottom UI and button UI text are complete. + - ![Texture Setup](../img/05-main-scene/prepare-ui-bottom-bar.png) -### Step 2: Configure Prefabs - -#### Core Prefabs Structure -Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\` -![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png) - -#### Rename Prefabs -Rename the copied prefabs by removing unnecessary prefixes: -| Prefix to Remove | Original Prefab Name | Final Name | -|------------------|----------------------|------------| -| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` | -| `template-` | `template-button-auto-selection` | `button-auto-selection` | - - -```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 - -**Follow Design:** -Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab. - -| Component | Description | -| -------------------- | ------------------------------------------------- | -| **Label Outline** | Add an outline to make the text stand out. | -| **Label Shadow** | Add a shadow for better contrast and readability. | -| -------------------- | ------------------------------------------------- | - -![Label Configuration Options](../img/05-main-scene/option-for-label.png) - -#### Customize *`ui-bottom-bar-panel`* Label -Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`: -:::info -๐Ÿ”—[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label) -Bottom bar labels include a localization component for multi-language support -::: - -![component-locale](../img/05-main-scene/component-locale.png) - -The `FormatText` property controls text formatting behavior for label components: - -| Property | Description | Example | -|----------|-------------|---------| -| `default` | Initial formatting state | `false` | -| `notify` | Formatting update callback | Updates when value changes | - ---- - -### Step 3: Set Up UI In Main Scenes - -Create new node and configuration in your main scene: -![main scenes](../img/05-main-scene/set-positon-bottom-bar.png) - -#### Platform Node Spawner Settings - -๐Ÿ”— Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner) - -### Step 4: Apply Textures - -#### Texture Button Bar -Checklist assets completed for bottom UI and button UI text -:::info -๐Ÿ”— Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure) -::: - ![main scenes](../img/05-main-scene/prepare-ui-bottom-bar.png) - -#### Run the Helper Tool - -To configure the bottom bar UI helper. -:::info -๐Ÿ”—Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) -::: - ---- \ No newline at end of file +5. **Run Helper Tool**: + - Configure the bottom bar UI using the helper tool. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md index a138821..4f4324c 100644 --- a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md +++ b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md @@ -1,109 +1,96 @@ --- sidebar_position: 11 --- + # Mobile UI Panel -The Mobile UI provides a functional interface for gameplay control ---- +## Overview +The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices. -### Overview -The mobile interface adapts to both landscape and portrait orientations: - -| Orientation | Preview | -|-------------|----------| +| Orientation | Preview | +|-------------|---------| | Landscape | ![Mobile Landscape](../img/05-main-scene/menu-landscape.png) | -| Portrait | ![Mobile Portrait](../img/05-main-scene/menu-portrait.png) +| Portrait | ![Mobile Portrait](../img/05-main-scene/menu-portrait.png) | ## Implementation + ### Step 1: Set Up Prefabs +Configure the necessary prefabs for the Mobile UI. -| Step | Action | Description | Image Reference | -| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- | -| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab | ![Locate Prefabs](../img/05-main-scene/search-mobile-ui.png) | -| 2 | Clone Assets | Copy the required assets | ![Asset Placement](../img/05-main-scene/mobile-ui-prefab.png) | -| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - | -| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab | ![Locate Prefabs](../img/05-main-scene/buy-feature-bonus-mobile.png) | -| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - | +| Step | Action | Description | Image Reference | +|------|--------|-------------|-----------------| +| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. | ![Locate Prefabs](../img/05-main-scene/search-mobile-ui.png) | +| 2 | Clone Assets | Copy the required assets to the game assets directory. | ![Asset Placement](../img/05-main-scene/mobile-ui-prefab.png) | +| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile`. | - | +| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab. | ![Locate Prefabs](../img/05-main-scene/buy-feature-bonus-mobile.png) | +| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile`. | - | - -:::tip File Structure -Maintain this directory structure for proper prefab references: +**Tip**: Maintain the following directory structure for proper prefab references: ``` assets/ โ””โ”€โ”€ game-assets/ โ””โ”€โ”€ prefabs/ โ””โ”€โ”€ mobile/ - โ”œโ”€โ”€ Exp: mobile-ui.prefab - โ””โ”€โ”€ Exp: buy-feature.prefab + โ”œโ”€โ”€ mobile-ui.prefab + โ””โ”€โ”€ buy-feature.prefab ``` -::: -### Step 2: Rename Prefabs +### Step 2: Rename Prefabs +Rename the copied prefabs by removing unnecessary prefixes to ensure consistency. -Rename the copied prefabs by removing unnecessary prefixes: -| Prefix to Remove | Final Name | -|------------------|----------------------| -| `template-` |![Prefab Naming Example](../img/05-main-scene/result-rename-mobile.png) | +| Prefix to Remove | Example | +|------------------|---------| +| `template-` | ![Prefab Naming Example](../img/05-main-scene/result-rename-mobile.png) | -### Step 3: Configure UI in Main Scenes +### Step 3: Configure UI in Main Scene +Add and configure a new node in the main scene to integrate the Mobile UI. -Create new node and configuration in your main scene: -![main scenes](../img/05-main-scene/set-positon-mobile-ui.png) +![Main Scene Setup](../img/05-main-scene/set-positon-mobile-ui.png) -#### Platform Node Spawner Settings +**Platform Node Spawner Settings**: -๐Ÿ”— Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner) +### Step 4: Apply Textures +Ensure all Mobile UI assets are prepared and applied correctly. -### Step 4: Apply Textures +![Texture Setup](../img/05-main-scene/add-texture-mobile-ui.png) -#### Texture Mobile UI +**Run the Helper Tool**: +- Use the Mobile UI helper tool to configure the UI components. -Checklist assets completed for Mobile UI +### Step 5: Set Color Theme for Mobile UI +Customize the color theme for the Mobile UI using the `helper-paint-color-ui-mobile.js` component to apply theme-based colors across UI elements. -:::info -๐Ÿ”—Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure) -::: - ![main scenes](../img/05-main-scene/add-texture-mobile-ui.png) +**Follow Design**: +| Landscape | Portrait | +|-----------|----------| +| ![Landscape Menu](../img/05-main-scene/menu-landscape.png) | ![Portrait Menu](../img/05-main-scene/menu-portrait.png) | -#### Run the Helper Tool +**Configuration Steps**: +1. **Access the Helper Component**: + - Locate the `helper-paint-color-ui-mobile.js` component in the node inspector. + - ![Color Setup](../img/05-main-scene/set-color-menu-ui.png) -To configure the mobile UI helper. -:::info -๐Ÿ”—Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) -::: +2. **Configure Color Properties**: + - Adjust the following properties to match the game design: - +| # | Property | Description | Example | +|---|----------|-------------|---------| +| 0 | **Paint Color** | Triggers repainting of UI components. | ![Paint Color Trigger](../img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png) | +| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). | ![Main UI Examples](../img/05-main-scene/image-for-mobile-ui-helper/buy.png) | +| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. | ![Highlight Color](../img/05-main-scene/main-ui-highlight-color.png) | +| 3 | **Toggle State Off Color** | Color for toggles in the off state. | ![Toggle Off](../img/05-main-scene/toggle-off.png) | +| 4 | **Toggle State On Color** | Color for toggles in the on state. | ![Toggle On](../img/05-main-scene/toggle-on.png) | +| 5 | **Background Info Page Color** | Background color for info pages. | ![Info Page Background](../img/05-main-scene/image-for-mobile-ui-helper/background-info.png) | +| 6 | **Background Menu Color** | Background color for menus. | ![Menu Background](../img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) | +| 7 | **Background Point Panel Color** | Background color for point/balance panels. | ![Point Panel Background](../img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) | +| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). | ![Bottom Bar Background](../img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) | +| 9 | **Button Quit Color** | Color for the Quit button. | ![Quit Button](../img/05-main-scene/btn-quit-game.png) | +| 10 | **Button Cancel Color** | Color for the Cancel button. | ![Cancel Button](../img/05-main-scene/btn-cancel-game.png) | +| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. | ![Balance Normal](../img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) | +| 12 | **Label Balance Spin Color** | Color for the balance label during spins. | ![Balance Spin](../img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) | +| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. | ![Plus/Minus Buttons](../img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) | +| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. | ![Start Auto Label](../img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | +| 15 | **Label Outline Notification** | Outline color and width for notifications. | ![Outline Notification](../img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) | +| 16 | **Total Win Medium Win Color** | Color for medium win labels. | ![Medium Win Color](../img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | -### Step 5: Set Color Theme for Mobile Menu UI - -#### Follow Design: - -| ![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 | -|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------| -|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) | -|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 label medium win | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | - ---- \ No newline at end of file +**Tip**: Ensure color values align with the gameโ€™s visual design specifications. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md index aca866c..8d31634 100644 --- a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md +++ b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md @@ -2,61 +2,47 @@ sidebar_position: 12 --- - # Popup Panel -### Overview - -A popup is a temporary UI element that overlays the main content to provide additional information or options to the user. - -|![Popup overview exit](../img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](../img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](../img/05-main-scene/popup-credit-game.png)| -|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------| +## Overview +The **Popup Panel** is a temporary UI element that overlays the main game content to display additional information or user options, such as exit prompts or disconnection notices. +| Exit Popup | Disconnect Popup | Credit Popup | +|------------|------------------|--------------| +| ![Exit Popup](../img/05-main-scene/popup-exit-game.png) | ![Disconnect Popup](../img/05-main-scene/popup-disconnet.png) | ![Credit Popup](../img/05-main-scene/popup-credit-game.png) | ## Multiple Popup Panel -The popup panel is already integrated into the main scenes `template-main-game`. +The **Multiple Popup Panel** is pre-integrated into the main scene via the `template-main-game` prefab, allowing multiple popups to be managed efficiently. -![Popup In Game](../img/05-main-scene/popup-panel-in-game.png) +![Popup in Game](../img/05-main-scene/popup-panel-in-game.png) - Detail configuring: - -#### Base Setting - -:::info -![Popup Position](../img/05-main-scene/popup-multi.png) - -To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core: - -**Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab* -::: +**Base Settings**: +- **Prefab**: `hyper-multiple-popup.prefab` +- **Path**: `assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab` +- **Configuration**: Reference the prefab in the main scene to enable multiple popup layouts. +- ![Popup Configuration](../img/05-main-scene/popup-multi.png) ## Manual Popup Panel +Manually configured popups allow for custom textures and layouts, tailored to the gameโ€™s design. Note that the **Exit Game** popup is exclusive to the Desktop platform. -:::info -- This popup is self-configured using shared textures and layout structure. -- The color theme and style may vary depending on the game design. -- Note: **Exit Game** Popup only in **Desktop**. -::: +**Setup Steps**: +1. **Prepare Assets**: + - **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit` + - **Example**: ![Exit Game Popup Assets](../img/05-main-scene/exit-popup-game.png) -#### Pack Assets +2. **Configure Prefabs**: + - Locate and clone the popup prefab to `assets/game-assets/prefabs`. + - Structure the prefab as shown: + - ![Prefab Structure](../img/05-main-scene/popup-exit-in-game.png) -- *Prepare asset to pack*. +3. **Apply Textures**: + - Manually drag and drop images onto the corresponding nodes in the editor. + - ![Texture Application](../img/05-main-scene/popup-draw.png) -๐Ÿ”— Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure) +4. **Preview Result**: + - Verify the popup displays correctly in the game. + - ![Popup Preview](../img/05-main-scene/popup-exit-game.png) -| Path | Example | -|---------------------------------|-----------------------------------------------------| -|`assets\game-assets\textures\desktop\preloads\main-game\exit`|![Exit Game Popup In Game](../img/05-main-scene/exit-popup-game.png)| - -- Structure prefabs: - -![Exit Game Popup In Game](../img/05-main-scene/popup-exit-in-game.png) - -- Manually drag and drop the image onto the node: - -![Exit Game Popup In Game](../img/05-main-scene/popup-draw.png) - -**Preview Result**: -![Popup overview exit](../img/05-main-scene/popup-exit-game.png) - ---- \ No newline at end of file +**Tip**: +- Ensure textures align with the gameโ€™s color theme and design specifications. +- Test the popup on Desktop to confirm functionality for the Exit Game feature. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/13-game-logo.md b/docs/02-setup-main-game/05-main-scene/13-game-logo.md index 31a3108..b02997d 100644 --- a/docs/02-setup-main-game/05-main-scene/13-game-logo.md +++ b/docs/02-setup-main-game/05-main-scene/13-game-logo.md @@ -5,126 +5,112 @@ sidebar_position: 13 # Game Logo ## Overview -The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations. +The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the gameโ€™s identity. | Platform | Orientation | Preview | -|----------|------------|----------| -| Desktop | Standard | ![Desktop View](../img/05-main-scene/logo-overview-desktop.png) | -| Mobile | Landscape | ![Landscape View](../img/05-main-scene/logo-overview.png) | -| Mobile | Portrait | ![Portrait View](../img/05-main-scene/logo-overview-portrait.png) | +|----------|-------------|---------| +| Desktop | Standard | ![Desktop View](../img/05-main-scene/logo-overview-desktop.png) | +| Mobile | Landscape | ![Landscape View](../img/05-main-scene/logo-overview.png) | +| Mobile | Portrait | ![Portrait View](../img/05-main-scene/logo-overview-portrait.png) | ## Implementation ### Prepare Assets #### 1. Core Setup -Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation` - -```typescript -// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js -onLoad: function () { - var self = this; - // Initialize animation states - self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); - self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); -} -``` +- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation` +- **Script**: Initialize animation states for the logo. + ```typescript + // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js + onLoad: function () { + const self = this; + // Initialize animation states + self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); + self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); + } + ``` #### 2. Required Assets -##### Static Assets +**Static Assets**: | Platform | Location | Preview | |----------|----------|---------| -| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` | ![Desktop](../img/05-main-scene/logo-static-desktop.png) | -| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` | ![Mobile](../img/05-main-scene/logo-static-mobile.png) | +| Desktop | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Desktop Static](../img/05-main-scene/logo-static-desktop.png) | +| Mobile | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` | ![Mobile Static](../img/05-main-scene/logo-static-mobile.png) | -##### Animation Assets +**Animation Assets**: | Platform | Location | Preview | |----------|----------|---------| -| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](../img/05-main-scene/logo-anim-desktop.png) | -| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` | ![Mobile Anim](../img/05-main-scene/logo-anim-mobile.png) | +| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` | ![Desktop Animation](../img/05-main-scene/logo-anim-desktop.png) | +| Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` | ![Mobile Animation](../img/05-main-scene/logo-anim-mobile.png) | #### 3. Animation Settings -1. Configure Provider +1. **Configure Animation Provider**: + - Register the logo animations in the Animation Provider. + - ![Provider Setup](../img/05-main-scene/logo-anim-provider.png) - ![Provider Setup](../img/05-main-scene/logo-anim-provider.png) - -2. Setup States - - - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state: - - ![Provider Setup](../img/05-main-scene/logo-static-in-anim.png) - - - Configure continuous loop playback: - - ![Provider Setup](../img/05-main-scene/logo-anim-loop.png) +2. **Set Up Animation States**: + - Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`. + - ![Static Frame Setup](../img/05-main-scene/logo-static-in-anim.png) + - Configure continuous loop playback for animations. + - ![Loop Setup](../img/05-main-scene/logo-anim-loop.png) ### Setup #### Desktop Configuration +1. **Base Settings**: + - Configure the logo node in the main scene. + - ![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png) -1. Base Settings +2. **Node Setup**: + - Add the `hyper-logo-animation` component to the logo node. + - ```typescript + Components: { + animation: 'hyper-logo-animation', + } + ``` + - ![Desktop Setup](../img/05-main-scene/logo-script-desktop.png) - ![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png) - - ๐Ÿ”— Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller) - -2. Node Setup - ```typescript - Components: { - animation: 'hyper-logo-animation', - } - ``` - ![Desktop Setup](../img/05-main-scene/logo-script-desktop.png) - -:::tip - - **Position And Size**: Follow Game Design. -::: +**Tip**: Adjust position and size according to the game design specifications. #### Mobile Configuration ##### Landscape Mode - -1. Node Setup - - | Component | Description | - |-------------------------------------------|--------------------------------------------------| - | `hyper-logo-animation` | Plays and manages the logo animation | - | `node-position-by-jackpot` | Moves the logo based on the jackpot display state | - | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) | - - ![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png) +1. **Node Setup**: + - Configure the logo node with the following components: + | Component | Description | + |-----------|-------------| + | `hyper-logo-animation` | Plays and manages the logo animation. | + | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. | + | `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). | + - ![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png) ##### Portrait Mode +1. **Node Setup**: + - Configure the logo node with the following components: + | Component | Description | + |-----------|-------------| + | `hyper-logo-animation` | Plays and manages the logo animation. | + | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. | + | `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). | + - ![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png) -1. Node Setup +2. **Position Settings**: + - Adjust logo position based on jackpot state: + | State | Position | Example | + |-------|----------|---------| + | Jackpot Active | Upper position | ![Jackpot Active](../img/05-main-scene/logo-portrait-jackpot.png) | + | Jackpot Inactive | Default position | ![Jackpot Inactive](../img/05-main-scene/logo-portrait-no-jackpot.png) | - | Component | Description | - |----------------------------|--------------------------------------------------| - | `hyper-logo-animation` | Plays and manages the logo animation | - | `node-position-by-jackpot` | Moves the logo based on the jackpot display state | - | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) | +3. **Size Settings**: + - Use the `spine-aspect-ratio-keeper` component to maintain logo proportions. + - ![Size Configuration](../img/05-main-scene/logo-center-align.png) + - **Settings**: + | Setting | Description | Default Value | + |---------|-------------|---------------| + | **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) | + | **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) | - ![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png) - -2. Position Settings - - | State | Position | Example | - |-------|----------|---------| - | Jackpot Active | Upper position | ![Active](../img/05-main-scene/logo-portrait-jackpot.png) | - | Jackpot Inactive | Default position | ![Inactive](../img/05-main-scene/logo-portrait-no-jackpot.png) | - -3. Size Settings - - Using componet `spine-aspect-ratio-keeper` : - - ![Portrait Logo Configuration](../img/05-main-scene/logo-center-align.png) - - | Setting | Description | Default Value | - | ----------------- | -------------------------------------------- | --------------------- | - | **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) | - | **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) | - -:::tip -- Check static logo display under slow network conditions. -::: \ No newline at end of file +**Tip**: +- Test the static logo display under slow network conditions to ensure fallback works. +- Verify animation states (`play` and `idle`) for smooth transitions. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md index 436d8d1..3fd3fd6 100644 --- a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md +++ b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md @@ -1,82 +1,61 @@ --- sidebar_position: 15 --- -# Jackpot ---- + +# Jackpot Panel ## Overview +The **Jackpot Feature** offers multiple prize tiers, each with increasing value, providing players with frequent smaller wins and the chance for a large top prize. The panel is responsive, supporting both desktop and mobile layouts. -- **Jackpot Feature** is a system where there are **multiple levels (tiers)** of prizes, usually increasing in value. This structure gives players a chance to win **smaller jackpots more frequently**, while still keeping a large top prize available. +**Jackpot Tiers**: +| Tier | Description | Preview | +|------|-------------|---------| +| Grand | The top prize, rare and often worth thousands or millions (progressive). | ![Grand Jackpot](../img/05-main-scene/jackpot-panel/jackpot-grand.png) | +| Major | A significant prize, less frequent but substantial. | ![Major Jackpot](../img/05-main-scene/jackpot-panel/jackpot-major.png) | +| Minor | A moderately valuable prize, relatively common. | ![Minor Jackpot](../img/05-main-scene/jackpot-panel/jackpot-minor.png) | +| Mini | The smallest prize, easiest to win. | ![Mini Jackpot](../img/05-main-scene/jackpot-panel/jackpot-mini.png) | -| Tier | Description | Preview | -|-------|------------------------------|------------------------------------------------------------| -| Grand | The top prize, very rare
and often worth thousands
or even millions(especially if it's progressive)|![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand.png) | -| Major | A significant prize, harder to win. | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major.png) | -| Minor | A bit higher in value, still fairly common. | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor.png) | -| Mini | The smallest and easiest to win. | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini.png) | - -- The panel is responsive and supports both desktop and mobile layouts: - -| Orientation | Preview | -|-------------|------------------------------------------------------------| -| Desktop | ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) | -| Mobile | ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-mobile.png) | +**Platform Support**: +| Orientation | Preview | +|-------------|---------| +| Desktop | ![Desktop Jackpot](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) | +| Mobile | ![Mobile Jackpot](../img/05-main-scene/jackpot-panel/jackpot-mobile.png) | ## Implementation ### Prepare Assets - -- Use the prefabs located at: - - |`assets/core-assets/jackpot-package/prefabs`|![Core](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)| - |--------------------------------------------|--------------------------------------------------------------------| +- **Prefab Location**: + - Path: `assets/core-assets/jackpot-package/prefabs` + - Example: ![Core Prefabs](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png) ### Setup -#### Jackpot runner +#### Jackpot Runner ##### Desktop - -- The node jackpot to your main scene: - - ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png) - - More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner) +1. **Add Node**: + - Integrate the jackpot node into the main scene. + - ![Desktop Setup](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png) ##### Mobile +1. **Configure Node**: + - Set up the jackpot node for both landscape and portrait orientations. + - Use `UI Mobile Landscape Position` and `UI Mobile Portrait Position` components for responsiveness. + - ![Mobile Setup](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png) -- Configure the jackpot node for both landscape and portrait orientations. - -- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout. - - ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png) - - More info: [UI Mobile Position](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) - -- Example using `Platform Node Spawner`: - - ![Mobile Spawner](../img/05-main-scene/jackpot-panel/jackpot-in-mobile-spawner.png) - - More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner) +2. **Platform Node Spawner**: + - Example: ![Mobile Spawner](../img/05-main-scene/jackpot-panel/jackpot-in-mobile-spawner.png) #### Result Panel +- Ensure the jackpot panel displays correctly across all platforms and orientations. +- ![Result Panel](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png) -- The jackpot panel works seamlessly across all platforms and orientations. - - ![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png) - - More info: [Node Spawner](/docs/faqs/setup-cocos-scene#node-spawner) - -:::tip -- Follow the game design layout. -::: - +**Tip**: Follow the game design layout for positioning and sizing. ## Game Result Examples - | Win Tier | Example | -|----------|------------------------------------------------------------------| -| Grand | ![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) | -| Major | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) | -| Minor | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) | -| Mini | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg) | +|----------|---------| +| Grand | ![Grand Win](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) | +| Major | ![Major Win](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) | +| Minor | ![Minor Win](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) | +| Mini | ![Mini Win](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg) | \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md index 3ca25e4..02901ec 100644 --- a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md +++ b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md @@ -1,26 +1,29 @@ --- sidebar_position: 16 --- + # Idle Animation ---- - ## Overview +The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience. + +| Static Preview | Animated Preview | +|--------|-------------| +| ![Idle Static](./img/16-idle-animation/overview.png) | ![Idle Animation](./img/16-idle-animation//overview.gif) | -![Locate Prefabs](./img/16-idle-animation/overview.png) ![Major](./img/16-idle-animation/overview.gif) ## Prepare the assets | Assets | Description | |--------|-------------| -| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-1.png) | Used to Setup the static sprite frame. | -| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-2.png) | Used to Setup the idle animation. | +| ![Static Asset](./img/16-idle-animation/prepare-assets-1.png) | Static sprite frame for the idle state. | +| ![Animation Asset](./img/16-idle-animation/prepare-assets-2.png) | Animation assets for the idle animation. | ## Setup Idle Animation ### Configure Settings - Create the following script: + Create a script to register the idle animation components with the dependency injection container. ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" var BaseSlottySetting = p4fslot.require('slotty-setting'); var DIContainer = p4fcore.require('di-container'); @@ -44,14 +47,18 @@ BaseSlottySetting.prototype._registerInjection = function () { ![Background Setup Animation](./img/16-idle-animation/setup-anim-1.png) ### Configure Scene -1. Search for the `idle-animation-panel` prefab. -2. Drag the "prefab" into "scene". -3. Click "Generate Panel". - -![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png) +1. **Locate Prefab**: + - Search for the `idle-animation-panel` prefab. +2. **Add to Scene**: + - Drag the prefab into the main scene. +3. **Generate Panel**: + - Click **Generate Panel** to set up the animation panel. + -![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png) :::warning -When using **prefab** directly from **core-assets**, you should convert to **Regular Node**. +When using prefabs directly from `core-assets`, convert them to a **Regular Node** to avoid reference issues. ![Locate Prefabs](./img/16-idle-animation/configure-scene-warning.png) -::: \ No newline at end of file +::: + +**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/17-win-limit.md b/docs/02-setup-main-game/05-main-scene/17-win-limit.md index 6ed6bc8..b8d8ad3 100644 --- a/docs/02-setup-main-game/05-main-scene/17-win-limit.md +++ b/docs/02-setup-main-game/05-main-scene/17-win-limit.md @@ -1,76 +1,54 @@ --- sidebar_position: 17 title: Win Limit -description: Display limit win +description: Display win limit popups during gameplay. --- # Win Limit ## Overview +The **Win Limit** system displays popups when specific win conditions are met, enhancing player feedback and interaction. -#### Win Limit +- **Win Limit Popup**: Appears when a playerโ€™s win points reach a predefined threshold. + - ![Win Limit Popup](../img/05-main-scene/win-limit/overview.png) +- **Gamble Win Limit Popup**: Triggered during the gamble feature when the maximum number of gamble attempts (typically 5) is reached. + - ![Gamble Win Limit Popup](../img/05-main-scene/win-limit/overview-gamble.png) -- The **Win Limit** popup appears during gameplay when the player's win points reach a predefined threshold. - -![Win Limit Popup](../img/05-main-scene/win-limit/overview.png) - -#### Gamble Win Limit - -- The **Gamble Win Limit** popup is triggered during the gamble feature when the player reaches the maximum number of allowed gamble attempts (typically 5). - -![Gamble Win Limit Popup](../img/05-main-scene/win-limit/overview-gamble.png) - ---- - -### Prepare Assets +## Prepare Assets #### Prefab Location - -| Path | Prefab Name | -|----------------------------------------------------------|------------------------------| -| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` | +| Path | Prefab Name | +|------|-------------| +| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` | #### Scene Hierarchy - Place the prefab in the following scene structure: - ``` Canvas โ””โ”€โ”€ [main-view] โ””โ”€โ”€ [game-view] โ””โ”€โ”€ [present-win-limit-reached] ``` +- ![Scene Structure](../img/05-main-scene/win-limit/win-limit-component.png) -![Scene Structure](../img/05-main-scene/win-limit/win-limit-component.png) - ---- - -### Setup +## Setup #### Assets +- Drag and drop the required images onto the corresponding nodes in the editor. +- ![Asset Setup](../img/05-main-scene/win-limit/assets-win-limit.png) -- Drag and drop the required image onto the node in the editor: - -![Asset Setup](../img/05-main-scene/win-limit/assets-win-limit.png) - -| Drag Sprite | Node Name | -|-------------------------|-----------------------| -| `you-won` | `you-won` | -| `win-limit-reached` | `win-limit-reached` | -| `gamble-limit-reached` | `gamble-limit-reached`| -| `btn-normal` | `btn-continue` | -| `text-continue` | `continue` | - +| Sprite | Node Name | +|--------|-----------| +| `you-won` | `you-won` | +| `win-limit-reached` | `win-limit-reached` | +| `gamble-limit-reached` | `gamble-limit-reached` | +| `btn-normal` | `btn-continue` | +| `text-continue` | `continue` | #### Font +- Use a custom font to match the win label style, aligning with the gameโ€™s theme. +- ![Font Setup](../img/05-main-scene/win-limit/add-font.png) -- Use a **custom font** to match the win label style for your game theme. - -![Font](../img/05-main-scene/win-limit/add-font.png) - ---- - -:::tip -- Follow the game design layout for assets and fonts. -- Win limit configuration may vary by game. -::: +**Tip**: +- Follow the game design layout for asset placement and font styling. +- Verify win limit configurations to ensure they match game-specific thresholds. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/18-Gamble.md b/docs/02-setup-main-game/05-main-scene/18-Gamble.md index 5cdbe0e..c1757e3 100644 --- a/docs/02-setup-main-game/05-main-scene/18-Gamble.md +++ b/docs/02-setup-main-game/05-main-scene/18-Gamble.md @@ -8,7 +8,7 @@ description: Display Gamble ## Overview -**Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color. +The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a cardโ€™s color. It is supported across desktop and mobile platforms in both landscape and portrait orientations. | Device Type | Preview | |---------------|-----------------------------------------------------------------------------| @@ -23,7 +23,7 @@ description: Display Gamble #### Scene Hierarchy -Place the node in the following scene structure: +Place the gamble node in the following scene structure: diff --git a/docs/02-setup-main-game/05-main-scene/18-buy-feature.md b/docs/02-setup-main-game/05-main-scene/18-buy-feature.md index e8defb8..cf25e3e 100644 --- a/docs/02-setup-main-game/05-main-scene/18-buy-feature.md +++ b/docs/02-setup-main-game/05-main-scene/18-buy-feature.md @@ -6,8 +6,8 @@ sidebar_position: 18 --- ## Overview - -![Locate Prefabs](./img/18-buy-feature/overview.png) +The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement. +![Buy Feature Overview](./img/18-buy-feature/overview.png) ## Implementation @@ -15,20 +15,20 @@ sidebar_position: 18 | Assets | Description | | :----: |-------------| -| ![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Used to Setup the static sprite frame. | -| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Used to Setup the animations. | -| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Used to Setup the label cost. | +| ![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Static sprite frame for the buy feature panel. | +| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Animation assets for the buy feature button and panel. | +| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Label for displaying the cost of the buy feature. | | ![Prepare Assets Prefabs](./img/18-buy-feature/prepare-prefabs.png) | - Search for the `template-shortcut-buy-feature-board` prefab.
- Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.| ### Setup Animations -1. Using hepler to generate animations using the prepared assets +1. **Generate Animations**: + - Use the helper tool to create animations from prepared assets. ![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-1.png) ![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-2.png) -2. Configure Spine Animation - - Set **Is Loop** โœ… for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`. +2. **Configure Spine Animation**: + - Set **Is Loop** โœ… for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`. ![Background Setup Animation](./img/18-buy-feature/setup-anim-1.png) @@ -52,8 +52,9 @@ sidebar_position: 18 ### Configure Scene - -1. Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position. -2. Update **Prefab** in the `shortcut-buy-feature-button`. +1. **Add Prefabs**: + - Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position. +2. **Update Prefab**: + - Update **Prefab** in the `shortcut-buy-feature-button`. ![Locate Prefabs](./img/18-buy-feature/setup-scene.png) \ No newline at end of file