Update contents
This commit is contained in:
parent
2d1cf47571
commit
e3b256d197
@ -24,7 +24,7 @@ Special Wins are high-value reward events categorized by payout thresholds:
|
|||||||
- 
|
- 
|
||||||
|
|
||||||
- **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 |  |
|
| `hyper-coin-shower-international` | International |  |
|
||||||
|
|||||||
@ -48,7 +48,7 @@ The **Free Round** system manages the display and logic for tracking remaining f
|
|||||||
- 
|
- 
|
||||||
- **Mobile**:
|
- **Mobile**:
|
||||||
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
|
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
|
||||||
- 
|
||||||
- **Common**:
|
- **Common**:
|
||||||
- Free Round Background: 
|
- Free Round Background: 
|
||||||
|
|
||||||
|
|||||||
@ -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
|
|
||||||
- Full bottom bar with all controls visible
|
|
||||||
- Horizontal layout maximizing screen width
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
1. **Set Up Prefab Editor**:
|
||||||
|
- **Locate Prefab**:
|
||||||
|
- Search for `ui-bottom-bar-panel` prefab.
|
||||||
|
- 
|
||||||
|
- **Find Assets**:
|
||||||
|
- Navigate to `core/editor` directory.
|
||||||
|
- 
|
||||||
|
- **Clone Assets**:
|
||||||
|
- Copy and paste to the game assets location.
|
||||||
|
- 
|
||||||
|
|
||||||
### Step 1: Set Up Prefab Editor
|
2. **Configure Prefabs**:
|
||||||
|
- **Core Prefabs Structure**:
|
||||||
|
- Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs`
|
||||||
|
- 
|
||||||
|
- **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` |
|
||||||
|
- 
|
||||||
|
- **Customize `button-auto-selection` Label**:
|
||||||
|
- Use `template-label-auto-selection` to adjust appearance.
|
||||||
|
- Add **Label Outline** and **Label Shadow** for better readability.
|
||||||
|
- 
|
||||||
|
- **Customize `ui-bottom-bar-panel` Label**:
|
||||||
|
- Use `assets/game-assets/editor/bottom-ui/template-label-title`.
|
||||||
|
- Include a localization component for multi-language support.
|
||||||
|
- 
|
||||||
|
- **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 |  |
|
- 
|
||||||
| 2. Find Assets | Navigate to `core/editor` directory |  |
|
|
||||||
| 3. Clone Assets | Copy / Paste to game assets location |  |
|
|
||||||
|
|
||||||
---
|
4. **Apply Textures**:
|
||||||
|
- Ensure assets for bottom UI and button UI text are complete.
|
||||||
|
- 
|
||||||
|
|
||||||
### 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\`
|
|
||||||
|
|
||||||
|
|
||||||
#### 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
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 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. |
|
|
||||||
| -------------------- | ------------------------------------------------- |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 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
|
|
||||||
:::
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
|
|
||||||
#### 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)
|
|
||||||
:::
|
|
||||||
|
|
||||||
|
|
||||||
#### 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)
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
@ -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
|
| Orientation | Preview |
|
||||||
The mobile interface adapts to both landscape and portrait orientations:
|
|-------------|---------|
|
||||||
|
|
||||||
| Orientation | Preview |
|
|
||||||
|-------------|----------|
|
|
||||||
| Landscape |  |
|
| Landscape |  |
|
||||||
| Portrait | 
|
| Portrait |  |
|
||||||
|
|
||||||
## 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 |  |
|
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. |  |
|
||||||
| 2 | Clone Assets | Copy the required assets |  |
|
| 2 | Clone Assets | Copy the required assets to the game assets directory. |  |
|
||||||
| 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 |  |
|
| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab. |  |
|
||||||
| 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-` |  |
|
||||||
| `template-` | |
|
|
||||||
|
|
||||||
### 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:
|
|
||||||
|
|
||||||
|
|
||||||
#### 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 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
|
**Follow Design**:
|
||||||
🔗Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
| Landscape | Portrait |
|
||||||
:::
|
|-----------|----------|
|
||||||
|
|  |  |
|
||||||
|
|
||||||
#### Run the Helper Tool
|
**Configuration Steps**:
|
||||||
|
1. **Access the Helper Component**:
|
||||||
|
- Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
|
||||||
|
- 
|
||||||
|
|
||||||
To configure the mobile UI helper.
|
2. **Configure Color Properties**:
|
||||||
:::info
|
- Adjust the following properties to match the game design:
|
||||||
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
|
||||||
:::
|
|
||||||
|
|
||||||
|
| # | Property | Description | Example |
|
||||||
|
|---|----------|-------------|---------|
|
||||||
|
| 0 | **Paint Color** | Triggers repainting of UI components. |  |
|
||||||
|
| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). |  |
|
||||||
|
| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. |  |
|
||||||
|
| 3 | **Toggle State Off Color** | Color for toggles in the off state. |  |
|
||||||
|
| 4 | **Toggle State On Color** | Color for toggles in the on state. |  |
|
||||||
|
| 5 | **Background Info Page Color** | Background color for info pages. |  |
|
||||||
|
| 6 | **Background Menu Color** | Background color for menus. |  |
|
||||||
|
| 7 | **Background Point Panel Color** | Background color for point/balance panels. |  |
|
||||||
|
| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). |  |
|
||||||
|
| 9 | **Button Quit Color** | Color for the Quit button. |  |
|
||||||
|
| 10 | **Button Cancel Color** | Color for the Cancel button. |  |
|
||||||
|
| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. |  |
|
||||||
|
| 12 | **Label Balance Spin Color** | Color for the balance label during spins. |  |
|
||||||
|
| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. |  |
|
||||||
|
| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. |  |
|
||||||
|
| 15 | **Label Outline Notification** | Outline color and width for notifications. |  |
|
||||||
|
| 16 | **Total Win Medium Win Color** | Color for medium win labels. |  |
|
||||||
|
|
||||||
### Step 5: Set Color Theme for Mobile Menu UI
|
**Tip**: Ensure color values align with the game’s visual design specifications.
|
||||||
|
|
||||||
#### Follow Design:
|
|
||||||
|
|
||||||
| |  |
|
|
||||||
|---------|-------|
|
|
||||||
|
|
||||||
#### 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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|Ordinal number| Properties | Explaination | Example |
|
|
||||||
|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
|
|
||||||
|0 |**paintColor** |Trigger to repaint UI components | |
|
|
||||||
|1 | **Main Ui Normal Color** |Default color of UI elements |  |
|
|
||||||
|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
|
|
||||||
|3 | **Toggle State Off Color** | Color of toggle when off |  |
|
|
||||||
|4 | **Toggle State On Color** | Color of toggle when on |  |
|
|
||||||
|5 | **Background Info Page Color** | Info screen background |  |
|
|
||||||
|6 | **Background Menu Color** | Menu background color |  |
|
|
||||||
|7 | **Background Point Panel Color** | Background panel for point/balance UI | |
|
|
||||||
|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
|
|
||||||
|9 | **Button Quit Color** | Quit button color |  |
|
|
||||||
|10 | **Button Cancel Color** | Cancel button color |  |
|
|
||||||
|11 | **Label Balance Normal Color** | Normal balance label color |  |
|
|
||||||
|12 | **Label Balance Spin Color** | During-spin label color |  |
|
|
||||||
|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | |
|
|
||||||
|14 | **Label Start Auto Color** | Start autoplay label |  |
|
|
||||||
|15 | **Label Outline Notification** | Outline color + width config | |
|
|
||||||
|16 | **Total Win Medium Win Color** | Color for label medium win |  |
|
|
||||||
|
|
||||||
---
|
|
||||||
@ -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.
|
|
||||||
|
|
||||||
||||
|
|
||||||
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
|
|
||||||
|
|
||||||
|
| Exit Popup | Disconnect Popup | Credit Popup |
|
||||||
|
|------------|------------------|--------------|
|
||||||
|
|  |  |  |
|
||||||
|
|
||||||
## 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
- 
|
||||||
|
|
||||||
|
|
||||||
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**: 
|
||||||
:::
|
|
||||||
|
|
||||||
#### Pack Assets
|
2. **Configure Prefabs**:
|
||||||
|
- Locate and clone the popup prefab to `assets/game-assets/prefabs`.
|
||||||
|
- Structure the prefab as shown:
|
||||||
|
- 
|
||||||
|
|
||||||
- *Prepare asset to pack*.
|
3. **Apply Textures**:
|
||||||
|
- Manually drag and drop images onto the corresponding nodes in the editor.
|
||||||
|
- 
|
||||||
|
|
||||||
🔗 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.
|
||||||
|
- 
|
||||||
|
|
||||||
| Path | Example |
|
**Tip**:
|
||||||
|---------------------------------|-----------------------------------------------------|
|
- Ensure textures align with the game’s color theme and design specifications.
|
||||||
|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
|
- Test the popup on Desktop to confirm functionality for the Exit Game feature.
|
||||||
|
|
||||||
- Structure prefabs:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Manually drag and drop the image onto the node:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Preview Result**:
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
@ -5,126 +5,112 @@ 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 | Standard |  |
|
||||||
| Mobile | Landscape |  |
|
| Mobile | Landscape |  |
|
||||||
| Mobile | Portrait |  |
|
| Mobile | Portrait |  |
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
### 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 | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` |  |
|
||||||
| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
|
| Mobile | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` |  |
|
||||||
|
|
||||||
##### Animation Assets
|
**Animation Assets**:
|
||||||
| Platform | Location | Preview |
|
| Platform | Location | Preview |
|
||||||
|----------|----------|---------|
|
|----------|----------|---------|
|
||||||
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
|
| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` |  |
|
||||||
| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
|
| Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` |  |
|
||||||
|
|
||||||
#### 3. Animation Settings
|
#### 3. Animation Settings
|
||||||
1. Configure Provider
|
1. **Configure Animation Provider**:
|
||||||
|
- Register the logo animations in the Animation Provider.
|
||||||
|
- 
|
||||||
|
|
||||||
|
2. **Set Up Animation States**:
|
||||||
|
- Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
|
||||||
2. Setup States
|
- 
|
||||||
|
- Configure continuous loop playback for animations.
|
||||||
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
|
- 
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Configure continuous loop playback:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Setup
|
### Setup
|
||||||
|
|
||||||
#### Desktop Configuration
|
#### Desktop Configuration
|
||||||
|
1. **Base Settings**:
|
||||||
|
- Configure the logo node in the main scene.
|
||||||
|
- 
|
||||||
|
|
||||||
1. Base Settings
|
2. **Node Setup**:
|
||||||
|
- Add the `hyper-logo-animation` component to the logo node.
|
||||||
|
- ```typescript
|
||||||
|
Components: {
|
||||||
|
animation: 'hyper-logo-animation',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- 
|
||||||
|
|
||||||
|
**Tip**: Adjust position and size according to the game design specifications.
|
||||||
|
|
||||||
🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
|
|
||||||
|
|
||||||
2. Node Setup
|
|
||||||
```typescript
|
|
||||||
Components: {
|
|
||||||
animation: 'hyper-logo-animation',
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
- **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` | Adjusts logo position based on jackpot display state. |
|
||||||
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
|
| `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
|
||||||
| `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) |
|
- 
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
##### Portrait Mode
|
##### 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). |
|
||||||
|
- 
|
||||||
|
|
||||||
1. Node Setup
|
2. **Position Settings**:
|
||||||
|
- Adjust logo position based on jackpot state:
|
||||||
|
| State | Position | Example |
|
||||||
|
|-------|----------|---------|
|
||||||
|
| Jackpot Active | Upper position |  |
|
||||||
|
| Jackpot Inactive | Default position |  |
|
||||||
|
|
||||||
| Component | Description |
|
3. **Size Settings**:
|
||||||
|----------------------------|--------------------------------------------------|
|
- Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
|
||||||
| `hyper-logo-animation` | Plays and manages the logo animation |
|
- 
|
||||||
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
|
- **Settings**:
|
||||||
| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
|
| 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) |
|
||||||
|
|
||||||
|
**Tip**:
|
||||||
|
- Test the static logo display under slow network conditions to ensure fallback works.
|
||||||
2. Position Settings
|
- Verify animation states (`play` and `idle`) for smooth transitions.
|
||||||
|
|
||||||
| State | Position | Example |
|
|
||||||
|-------|----------|---------|
|
|
||||||
| Jackpot Active | Upper position |  |
|
|
||||||
| Jackpot Inactive | Default position |  |
|
|
||||||
|
|
||||||
3. Size Settings
|
|
||||||
|
|
||||||
Using componet `spine-aspect-ratio-keeper` :
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| 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.
|
|
||||||
:::
|
|
||||||
@ -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 |
|
||||||
|
|------|-------------|---------|
|
||||||
|
| Grand | The top prize, rare and often worth thousands or millions (progressive). |  |
|
||||||
|
| Major | A significant prize, less frequent but substantial. |  |
|
||||||
|
| Minor | A moderately valuable prize, relatively common. |  |
|
||||||
|
| Mini | The smallest prize, easiest to win. |  |
|
||||||
|
|
||||||
| Tier | Description | Preview |
|
**Platform Support**:
|
||||||
|-------|------------------------------|------------------------------------------------------------|
|
| Orientation | Preview |
|
||||||
| Grand | The top prize, very rare <br />and often worth thousands <br />or even millions(especially if it's progressive)| |
|
|-------------|---------|
|
||||||
| Major | A significant prize, harder to win. |  |
|
| Desktop |  |
|
||||||
| Minor | A bit higher in value, still fairly common. |  |
|
| Mobile |  |
|
||||||
| Mini | The smallest and easiest to win. |  |
|
|
||||||
|
|
||||||
- The panel is responsive and supports both desktop and mobile layouts:
|
|
||||||
|
|
||||||
| Orientation | Preview |
|
|
||||||
|-------------|------------------------------------------------------------|
|
|
||||||
| Desktop |  |
|
|
||||||
| Mobile |  |
|
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
### Prepare Assets
|
### Prepare Assets
|
||||||
|
- **Prefab Location**:
|
||||||
- Use the prefabs located at:
|
- Path: `assets/core-assets/jackpot-package/prefabs`
|
||||||
|
- Example: 
|
||||||
|`assets/core-assets/jackpot-package/prefabs`||
|
|
||||||
|--------------------------------------------|--------------------------------------------------------------------|
|
|
||||||
|
|
||||||
### 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.
|
||||||
|
- 
|
||||||
|
|
||||||
|
|
||||||
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.
|
||||||
|
- 
|
||||||
|
|
||||||
- Configure the jackpot node for both landscape and portrait orientations.
|
2. **Platform Node Spawner**:
|
||||||
|
- Example: 
|
||||||
- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
More info: [UI Mobile Position](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
|
|
||||||
|
|
||||||
- Example using `Platform Node Spawner`:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
||||||
|
- 
|
||||||
|
|
||||||
- The jackpot panel works seamlessly across all platforms and orientations.
|
**Tip**: Follow the game design layout for positioning and sizing.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 |  |
|
||||||
| Major |  |
|
| Major |  |
|
||||||
| Minor |  |
|
| Minor |  |
|
||||||
| Mini |  |
|
| Mini |  |
|
||||||
@ -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 |
|
||||||
|
|--------|-------------|
|
||||||
|
|  |  |
|
||||||
|
|
||||||
 
|
|
||||||
|
|
||||||
## Prepare the assets
|
## Prepare the assets
|
||||||
|
|
||||||
| Assets | Description |
|
| Assets | Description |
|
||||||
|--------|-------------|
|
|--------|-------------|
|
||||||
|  | Used to Setup the static sprite frame. |
|
|  | Static sprite frame for the idle state. |
|
||||||
|  | Used to Setup the idle animation. |
|
|  | 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 () {
|
|||||||
|
|
||||||
### 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.
|
||||||
|
3. **Generate Panel**:
|
||||||
|
- Click **Generate Panel** to set up the animation panel.
|
||||||
|
-
|
||||||
|
|
||||||
:::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.
|
||||||
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.
|
||||||
@ -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.
|
||||||
|
- 
|
||||||
|
- **Gamble Win Limit Popup**: Triggered during the gamble feature when the maximum number of gamble attempts (typically 5) is reached.
|
||||||
|
- 
|
||||||
|
|
||||||
- The **Win Limit** popup appears during gameplay when the player's win points reach a predefined threshold.
|
## Prepare Assets
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 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).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 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]
|
||||||
```
|
```
|
||||||
|
- 
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Setup
|
|
||||||
|
|
||||||
#### Assets
|
#### Assets
|
||||||
|
- Drag and drop the required images onto the corresponding nodes in the editor.
|
||||||
|
- 
|
||||||
|
|
||||||
- Drag and drop the required image onto the node in the editor:
|
| Sprite | Node Name |
|
||||||
|
|--------|-----------|
|
||||||
|
| `you-won` | `you-won` |
|
||||||
|
| `win-limit-reached` | `win-limit-reached` |
|
||||||
| Drag Sprite | Node Name |
|
| `gamble-limit-reached` | `gamble-limit-reached` |
|
||||||
|-------------------------|-----------------------|
|
| `btn-normal` | `btn-continue` |
|
||||||
| `you-won` | `you-won` |
|
| `text-continue` | `continue` |
|
||||||
| `win-limit-reached` | `win-limit-reached` |
|
|
||||||
| `gamble-limit-reached` | `gamble-limit-reached`|
|
|
||||||
| `btn-normal` | `btn-continue` |
|
|
||||||
| `text-continue` | `continue` |
|
|
||||||
|
|
||||||
|
|
||||||
#### Font
|
#### Font
|
||||||
|
- Use a custom font to match the win label style, aligning with the game’s theme.
|
||||||
|
- 
|
||||||
|
|
||||||
- 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.
|
||||||
|
- 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.
|
|
||||||
:::
|
|
||||||
@ -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>
|
||||||
|
|||||||
@ -6,8 +6,8 @@ sidebar_position: 18
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement.
|
||||||
|
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
@ -15,20 +15,20 @@ sidebar_position: 18
|
|||||||
|
|
||||||
| Assets | Description |
|
| Assets | Description |
|
||||||
| :----: |-------------|
|
| :----: |-------------|
|
||||||
| <img width="300"/>| Used to Setup the static sprite frame. |
|
| <img width="300"/>| Static sprite frame for the buy feature panel. |
|
||||||
| <img width="300"/> | Used to Setup the animations. |
|
| <img width="300"/> | Animation assets for the buy feature button and panel. |
|
||||||
| <img width="300"/> | Used to Setup the label cost. |
|
| <img width="300"/> | Label for displaying the cost of the buy feature. |
|
||||||
| <img width="300"/> | - 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"/> | - 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -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`.
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user