dev-public/doc-slot-core-manual
19
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Activity

Update contents

Browse Source
This commit is contained in:
Pham Huynh Duc Huy 2025-05-22 14:09:43 +07:00
parent 2d1cf47571
commit e3b256d197
11 changed files with 314 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/02-setup-main-game/05-main-scene/06-special-win.md
View File

@ -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) - ![Component Architecture](../img/05-main-scene/special-win-in-game.png)
- **Coin Effect System**: - **Coin Effect System**:
- Variants for different markets: - Variants for different game theme:
| Submodule | Theme | Preview | | Submodule | Theme | Preview |
|-----------|-------|---------| |-----------|-------|---------|
| `hyper-coin-shower-international` | International | ![International Coin](../img/05-main-scene/special-win-coin-international.png) | | `hyper-coin-shower-international` | International | ![International Coin](../img/05-main-scene/special-win-coin-international.png) |

2
docs/02-setup-main-game/05-main-scene/08-free-round.md
View File

@ -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) - ![Desktop Assets](../img/05-main-scene/freeround-counter/assets-freeround-desktop.png)
- **Mobile**: - **Mobile**:
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` - 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**: - **Common**:
- Free Round Background: ![Background Asset](../img/05-main-scene/freeround-counter/assets-freeround-background.png) - Free Round Background: ![Background Asset](../img/05-main-scene/freeround-counter/assets-freeround-background.png)

139
docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
View File

@ -1,105 +1,58 @@
--- ---
sidebar_position: 10 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 ![Desktop Bottom Bar](../img/05-main-scene/bottom-ui-desktop.png)
- 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)
## Implementation ## 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 | 3. **Set Up UI in Main Scene**:
|------|---------|--------------| - Create a new node and configure in the main scene.
| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](../img/05-main-scene/add-texture-bottom-bar-prefab.png) | - ![Main Scene Setup](../img/05-main-scene/set-positon-bottom-bar.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) |
--- 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 5. **Run Helper Tool**:
- Configure the bottom bar UI using the helper tool.
#### 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)
:::
---

133
docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
View File

@ -1,109 +1,96 @@
--- ---
sidebar_position: 11 sidebar_position: 11
--- ---
# Mobile UI Panel # 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) | | 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 ## Implementation
### Step 1: Set Up Prefabs ### Step 1: Set Up Prefabs
Configure the necessary prefabs for the Mobile UI.
| Step | Action | Description | Image Reference | | 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) | | 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 | ![Asset Placement](../img/05-main-scene/mobile-ui-prefab.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` | - | | 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) | | 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` | - | | 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile`. | - |
**Tip**: Maintain the following directory structure for proper prefab references:
:::tip File Structure
Maintain this directory structure for proper prefab references:
``` ```
assets/ assets/
└── game-assets/ └── game-assets/
└── prefabs/ └── prefabs/
└── mobile/ └── mobile/
├── Exp: mobile-ui.prefab ├── mobile-ui.prefab
└── Exp: buy-feature.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 | Example |
| Prefix to Remove | Final Name | |------------------|---------|
|------------------|----------------------| | `template-` | ![Prefab Naming Example](../img/05-main-scene/result-rename-mobile.png) |
| `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 Scene Setup](../img/05-main-scene/set-positon-mobile-ui.png)
![main scenes](../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 ### Step 4: Apply Textures
Ensure all Mobile UI assets are prepared and applied correctly.
#### Texture Mobile UI ![Texture Setup](../img/05-main-scene/add-texture-mobile-ui.png)
Checklist assets completed for Mobile UI **Run the Helper Tool**:
- Use the Mobile UI helper tool to configure the UI components.
:::info ### Step 5: Set Color Theme for Mobile UI
🔗Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure) 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.
:::
![main scenes](../img/05-main-scene/add-texture-mobile-ui.png)
#### Run the Helper Tool **Follow Design**:
| Landscape | Portrait |
|-----------|----------|
| ![Landscape Menu](../img/05-main-scene/menu-landscape.png) | ![Portrait Menu](../img/05-main-scene/menu-portrait.png) |
To configure the mobile UI helper. **Configuration Steps**:
:::info 1. **Access the Helper Component**:
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) - Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
::: - ![Color Setup](../img/05-main-scene/set-color-menu-ui.png)
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 **Tip**: Ensure color values align with the game’s visual design specifications.
#### 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) |
---

74
docs/02-setup-main-game/05-main-scene/12-popup-panel.md
View File

@ -2,61 +2,47 @@
sidebar_position: 12 sidebar_position: 12
--- ---
# Popup Panel # Popup Panel
### Overview ## 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.
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)|
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
| 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 ## 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 Settings**:
- **Prefab**: `hyper-multiple-popup.prefab`
#### Base Setting - **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.
:::info - ![Popup Configuration](../img/05-main-scene/popup-multi.png)
![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*
:::
## Manual Popup Panel ## 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 **Setup Steps**:
- This popup is self-configured using shared textures and layout structure. 1. **Prepare Assets**:
- The color theme and style may vary depending on the game design. - **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit`
- Note: **Exit Game** Popup only in **Desktop**. - **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 | **Tip**:
|---------------------------------|-----------------------------------------------------| - Ensure textures align with the game’s color theme and design specifications.
|`assets\game-assets\textures\desktop\preloads\main-game\exit`|![Exit Game Popup In Game](../img/05-main-scene/exit-popup-game.png)| - Test the popup on Desktop to confirm functionality for the Exit Game feature.
- 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)
---

134
docs/02-setup-main-game/05-main-scene/13-game-logo.md
View File

@ -5,10 +5,10 @@ sidebar_position: 13
# Game Logo # Game Logo
## Overview ## 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 | | Platform | Orientation | Preview |
|----------|------------|----------| |----------|-------------|---------|
| Desktop | Standard | ![Desktop View](../img/05-main-scene/logo-overview-desktop.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 | Landscape | ![Landscape View](../img/05-main-scene/logo-overview.png) |
| Mobile | Portrait | ![Portrait View](../img/05-main-scene/logo-overview-portrait.png) | | Mobile | Portrait | ![Portrait View](../img/05-main-scene/logo-overview-portrait.png) |
@ -18,113 +18,99 @@ The game logo is a crucial branding element that must be consistently displayed
### Prepare Assets ### Prepare Assets
#### 1. Core Setup #### 1. Core Setup
Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation` - **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
- **Script**: Initialize animation states for the logo.
```typescript ```typescript
// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
onLoad: function () { onLoad: function () {
var self = this; const self = this;
// Initialize animation states // Initialize animation states
self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
} }
``` ```
#### 2. Required Assets #### 2. Required Assets
##### Static Assets **Static Assets**:
| Platform | Location | Preview | | Platform | Location | Preview |
|----------|----------|---------| |----------|----------|---------|
| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` | ![Desktop](../img/05-main-scene/logo-static-desktop.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](../img/05-main-scene/logo-static-mobile.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 | | Platform | Location | Preview |
|----------|----------|---------| |----------|----------|---------|
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](../img/05-main-scene/logo-anim-desktop.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 Anim](../img/05-main-scene/logo-anim-mobile.png) | | Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` | ![Mobile Animation](../img/05-main-scene/logo-anim-mobile.png) |
#### 3. Animation Settings #### 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. **Set Up Animation States**:
- Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
2. Setup States - ![Static Frame Setup](../img/05-main-scene/logo-static-in-anim.png)
- Configure continuous loop playback for animations.
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state: - ![Loop Setup](../img/05-main-scene/logo-anim-loop.png)
![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)
### Setup ### Setup
#### Desktop Configuration #### 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.
![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png) - ```typescript
🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
2. Node Setup
```typescript
Components: { Components: {
animation: 'hyper-logo-animation', animation: 'hyper-logo-animation',
} }
``` ```
![Desktop Setup](../img/05-main-scene/logo-script-desktop.png) - ![Desktop Setup](../img/05-main-scene/logo-script-desktop.png)
:::tip **Tip**: Adjust position and size according to the game design specifications.
- **Position And Size**: Follow Game Design.
:::
#### Mobile Configuration #### Mobile Configuration
##### Landscape Mode ##### Landscape Mode
1. **Node Setup**:
1. Node Setup - Configure the logo node with the following components:
| Component | Description | | Component | Description |
|-------------------------------------------|--------------------------------------------------| |-----------|-------------|
| `hyper-logo-animation` | Plays and manages the logo animation | | `hyper-logo-animation` | Plays and manages the logo animation. |
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state | | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
| `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) | | `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
- ![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png)
![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png)
##### Portrait Mode ##### Portrait Mode
1. **Node Setup**:
1. Node Setup - Configure the logo node with the following components:
| Component | Description | | Component | Description |
|----------------------------|--------------------------------------------------| |-----------|-------------|
| `hyper-logo-animation` | Plays and manages the logo animation | | `hyper-logo-animation` | Plays and manages the logo animation. |
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state | | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) | | `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
- ![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png)
![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png)
2. Position Settings
2. **Position Settings**:
- Adjust logo position based on jackpot state:
| State | Position | Example | | State | Position | Example |
|-------|----------|---------| |-------|----------|---------|
| Jackpot Active | Upper position | ![Active](../img/05-main-scene/logo-portrait-jackpot.png) | | Jackpot Active | Upper position | ![Jackpot Active](../img/05-main-scene/logo-portrait-jackpot.png) |
| Jackpot Inactive | Default position | ![Inactive](../img/05-main-scene/logo-portrait-no-jackpot.png) | | Jackpot Inactive | Default position | ![Jackpot 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)
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 | | Setting | Description | Default Value |
| ----------------- | -------------------------------------------- | --------------------- | |---------|-------------|---------------|
| **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) | | **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
| **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) | | **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |
:::tip **Tip**:
- Check static logo display under slow network conditions. - Test the static logo display under slow network conditions to ensure fallback works.
::: - Verify animation states (`play` and `idle`) for smooth transitions.

89
docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
View File

@ -1,82 +1,61 @@
--- ---
sidebar_position: 15 sidebar_position: 15
--- ---
# Jackpot
--- # Jackpot Panel
## Overview ## 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 | | Tier | Description | Preview |
|-------|------------------------------|------------------------------------------------------------| |------|-------------|---------|
| Grand | The top prize, very rare <br />and often worth thousands <br />or even millions(especially if it's progressive)|![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand.png) | | 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, harder to win. | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major.png) | | Major | A significant prize, less frequent but substantial. | ![Major Jackpot](../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) | | Minor | A moderately valuable prize, relatively common. | ![Minor Jackpot](../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) | | Mini | The smallest prize, easiest to win. | ![Mini Jackpot](../img/05-main-scene/jackpot-panel/jackpot-mini.png) |
- The panel is responsive and supports both desktop and mobile layouts:
**Platform Support**:
| Orientation | Preview | | Orientation | Preview |
|-------------|------------------------------------------------------------| |-------------|---------|
| Desktop | ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) | | Desktop | ![Desktop Jackpot](../img/05-main-scene/jackpot-panel/jackpot-desktop.png) |
| Mobile | ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-mobile.png) | | Mobile | ![Mobile Jackpot](../img/05-main-scene/jackpot-panel/jackpot-mobile.png) |
## Implementation ## Implementation
### Prepare Assets ### Prepare Assets
- **Prefab Location**:
- Use the prefabs located at: - Path: `assets/core-assets/jackpot-package/prefabs`
- Example: ![Core Prefabs](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)
|`assets/core-assets/jackpot-package/prefabs`|![Core](../img/05-main-scene/jackpot-panel/jackpot-core-prefabs.png)|
|--------------------------------------------|--------------------------------------------------------------------|
### Setup ### Setup
#### Jackpot runner #### Jackpot Runner
##### Desktop ##### Desktop
1. **Add Node**:
- The node jackpot to your main scene: - Integrate the jackpot node into the main scene.
- ![Desktop Setup](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png)
![Desktop](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png)
More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
##### Mobile ##### 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. 2. **Platform Node Spawner**:
- Example: ![Mobile Spawner](../img/05-main-scene/jackpot-panel/jackpot-in-mobile-spawner.png)
- 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)
#### Result Panel #### 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. **Tip**: Follow the game design layout for positioning and sizing.
![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.
:::
## Game Result Examples ## Game Result Examples
| Win Tier | Example | | Win Tier | Example |
|----------|------------------------------------------------------------------| |----------|---------|
| Grand | ![Grand](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) | | Grand | ![Grand Win](../img/05-main-scene/jackpot-panel/jackpot-grand-win.jpg) |
| Major | ![Major](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) | | Major | ![Major Win](../img/05-main-scene/jackpot-panel/jackpot-major-win.jpg) |
| Minor | ![Minor](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) | | Minor | ![Minor Win](../img/05-main-scene/jackpot-panel/jackpot-minor-win.jpg) |
| Mini | ![Mini](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg) | | Mini | ![Mini Win](../img/05-main-scene/jackpot-panel/jackpot-mini-win.jpg) |

31
docs/02-setup-main-game/05-main-scene/16-idle-animation.md
View File

@ -1,26 +1,29 @@
--- ---
sidebar_position: 16 sidebar_position: 16
--- ---
# Idle Animation # Idle Animation
---
## Overview ## 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 ## Prepare the assets
| Assets | Description | | Assets | Description |
|--------|-------------| |--------|-------------|
| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-1.png) | Used to Setup the static sprite frame. | | ![Static Asset](./img/16-idle-animation/prepare-assets-1.png) | Static sprite frame for the idle state. |
| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-2.png) | Used to Setup the idle animation. | | ![Animation Asset](./img/16-idle-animation/prepare-assets-2.png) | Animation assets for the idle animation. |
## Setup Idle Animation ## Setup Idle Animation
### Configure Settings ### 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" ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
var BaseSlottySetting = p4fslot.require('slotty-setting'); var BaseSlottySetting = p4fslot.require('slotty-setting');
var DIContainer = p4fcore.require('di-container'); 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) ![Background Setup Animation](./img/16-idle-animation/setup-anim-1.png)
### Configure Scene ### Configure Scene
1. Search for the `idle-animation-panel` prefab. 1. **Locate Prefab**:
2. Drag the "prefab" into "scene". - Search for the `idle-animation-panel` prefab.
3. Click "Generate Panel". 2. **Add to Scene**:
- Drag the prefab into the main scene.
![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png) 3. **Generate Panel**:
- Click **Generate Panel** to set up the animation panel.
-![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png)
:::warning :::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) ![Locate Prefabs](./img/16-idle-animation/configure-scene-warning.png)
::: :::
**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.

62
docs/02-setup-main-game/05-main-scene/17-win-limit.md
View File

@ -1,76 +1,54 @@
--- ---
sidebar_position: 17 sidebar_position: 17
title: Win Limit title: Win Limit
description: Display limit win description: Display win limit popups during gameplay.
--- ---
# Win Limit # Win Limit
## Overview ## 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. ## Prepare Assets
![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
#### Prefab Location #### Prefab Location
| Path | Prefab Name | | Path | Prefab Name |
|----------------------------------------------------------|------------------------------| |------|-------------|
| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` | | `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
#### Scene Hierarchy #### Scene Hierarchy
Place the prefab in the following scene structure: Place the prefab in the following scene structure:
``` ```
Canvas Canvas
└── [main-view] └── [main-view]
└── [game-view] └── [game-view]
└── [present-win-limit-reached] └── [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 #### 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: | Sprite | Node Name |
|--------|-----------|
![Asset Setup](../img/05-main-scene/win-limit/assets-win-limit.png)
| Drag Sprite | Node Name |
|-------------------------|-----------------------|
| `you-won` | `you-won` | | `you-won` | `you-won` |
| `win-limit-reached` | `win-limit-reached` | | `win-limit-reached` | `win-limit-reached` |
| `gamble-limit-reached` | `gamble-limit-reached`| | `gamble-limit-reached` | `gamble-limit-reached` |
| `btn-normal` | `btn-continue` | | `btn-normal` | `btn-continue` |
| `text-continue` | `continue` | | `text-continue` | `continue` |
#### Font #### 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. **Tip**:
- Follow the game design layout for asset placement and font styling.
![Font](../img/05-main-scene/win-limit/add-font.png) - Verify win limit configurations to ensure they match game-specific thresholds.
---
:::tip
- Follow the game design layout for assets and fonts.
- Win limit configuration may vary by game.
:::

4
docs/02-setup-main-game/05-main-scene/18-Gamble.md
View File

@ -8,7 +8,7 @@ description: Display Gamble
## Overview ## 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 | | Device Type | Preview |
|---------------|-----------------------------------------------------------------------------| |---------------|-----------------------------------------------------------------------------|
@ -23,7 +23,7 @@ description: Display Gamble
#### Scene Hierarchy #### Scene Hierarchy
Place the node in the following scene structure: Place the gamble node in the following scene structure:
<table> <table>
<thead> <thead>

25
docs/02-setup-main-game/05-main-scene/18-buy-feature.md
View File

@ -6,8 +6,8 @@ sidebar_position: 18
--- ---
## Overview ## Overview
The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement.
![Locate Prefabs](./img/18-buy-feature/overview.png) ![Buy Feature Overview](./img/18-buy-feature/overview.png)
## Implementation ## Implementation
@ -15,20 +15,20 @@ sidebar_position: 18
| Assets | Description | | Assets | Description |
| :----: |-------------| | :----: |-------------|
| <img width="300"/>![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Used to Setup the static sprite frame. | | <img width="300"/>![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Static sprite frame for the buy feature panel. |
| <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Used to Setup the animations. | | <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Animation assets for the buy feature button and panel. |
| <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Used to Setup the label cost. | | <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Label for displaying the cost of the buy feature. |
| <img width="300"/>![Prepare Assets Prefabs](./img/18-buy-feature/prepare-prefabs.png) | - Search for the `template-shortcut-buy-feature-board` prefab.<br/> - Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.| | <img width="300"/>![Prepare Assets Prefabs](./img/18-buy-feature/prepare-prefabs.png) | - Search for the `template-shortcut-buy-feature-board` prefab.<br/> - Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.|
### Setup Animations ### 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-1.png)
![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-2.png) ![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-2.png)
2. Configure Spine Animation 2. **Configure Spine Animation**:
- Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
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) ![Background Setup Animation](./img/18-buy-feature/setup-anim-1.png)
@ -52,8 +52,9 @@ sidebar_position: 18
### Configure Scene ### Configure Scene
1. **Add Prefabs**:
1. Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position. - 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`. 2. **Update Prefab**:
- Update **Prefab** in the `shortcut-buy-feature-button`.
![Locate Prefabs](./img/18-buy-feature/setup-scene.png) ![Locate Prefabs](./img/18-buy-feature/setup-scene.png)