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**:
|
||||
- Variants for different markets:
|
||||
- Variants for different game theme:
|
||||
| Submodule | Theme | Preview |
|
||||
|-----------|-------|---------|
|
||||
| `hyper-coin-shower-international` | International |  |
|
||||
|
||||
@ -48,7 +48,7 @@ The **Free Round** system manages the display and logic for tracking remaining f
|
||||
- 
|
||||
- **Mobile**:
|
||||
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
|
||||
- 
|
||||
- **Common**:
|
||||
- Free Round Background: 
|
||||
|
||||
|
||||
@ -1,105 +1,58 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
# Bottom Bar UI (Desktop)
|
||||
|
||||
The bottom bar UI on desktop provides a functional interface for gameplay control
|
||||
# Desktop Bottom Bar UI
|
||||
|
||||
---
|
||||
## Overview
|
||||
The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width.
|
||||
|
||||
### Overview
|
||||
- Full bottom bar with all controls visible
|
||||
- Horizontal layout maximizing screen width
|
||||
|
||||
|
||||
|
||||
|
||||
## 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 |
|
||||
|------|---------|--------------|
|
||||
| 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 |  |
|
||||
3. **Set Up UI in Main Scene**:
|
||||
- Create a new node and configure in the main scene.
|
||||
- 
|
||||
|
||||
---
|
||||
4. **Apply Textures**:
|
||||
- Ensure assets for bottom UI and button UI text are complete.
|
||||
- 
|
||||
|
||||
### Step 2: Configure Prefabs
|
||||
|
||||
#### 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)
|
||||
:::
|
||||
|
||||
---
|
||||
5. **Run Helper Tool**:
|
||||
- Configure the bottom bar UI using the helper tool.
|
||||
@ -1,109 +1,96 @@
|
||||
---
|
||||
sidebar_position: 11
|
||||
---
|
||||
|
||||
# Mobile UI Panel
|
||||
The Mobile UI provides a functional interface for gameplay control
|
||||
|
||||
---
|
||||
## Overview
|
||||
The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices.
|
||||
|
||||
### Overview
|
||||
The mobile interface adapts to both landscape and portrait orientations:
|
||||
|
||||
| Orientation | Preview |
|
||||
|-------------|----------|
|
||||
| Orientation | Preview |
|
||||
|-------------|---------|
|
||||
| Landscape |  |
|
||||
| Portrait | 
|
||||
| Portrait |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Step 1: Set Up Prefabs
|
||||
Configure the necessary prefabs for the Mobile UI.
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab |  |
|
||||
| 2 | Clone Assets | Copy the required assets |  |
|
||||
| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - |
|
||||
| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab |  |
|
||||
| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - |
|
||||
| Step | Action | Description | Image Reference |
|
||||
|------|--------|-------------|-----------------|
|
||||
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. |  |
|
||||
| 2 | Clone Assets | Copy the required assets to the game assets directory. |  |
|
||||
| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile`. | - |
|
||||
| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab. |  |
|
||||
| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile`. | - |
|
||||
|
||||
|
||||
:::tip File Structure
|
||||
Maintain this directory structure for proper prefab references:
|
||||
**Tip**: Maintain the following directory structure for proper prefab references:
|
||||
```
|
||||
assets/
|
||||
└── game-assets/
|
||||
└── prefabs/
|
||||
└── mobile/
|
||||
├── Exp: mobile-ui.prefab
|
||||
└── Exp: buy-feature.prefab
|
||||
├── mobile-ui.prefab
|
||||
└── buy-feature.prefab
|
||||
```
|
||||
:::
|
||||
|
||||
### Step 2: Rename Prefabs
|
||||
### Step 2: Rename Prefabs
|
||||
Rename the copied prefabs by removing unnecessary prefixes to ensure consistency.
|
||||
|
||||
Rename the copied prefabs by removing unnecessary prefixes:
|
||||
| Prefix to Remove | Final Name |
|
||||
|------------------|----------------------|
|
||||
| `template-` | |
|
||||
| Prefix to Remove | Example |
|
||||
|------------------|---------|
|
||||
| `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
|
||||
🔗Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
||||
:::
|
||||
|
||||
**Follow Design**:
|
||||
| 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.
|
||||
:::info
|
||||
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
:::
|
||||
2. **Configure Color Properties**:
|
||||
- Adjust the following properties to match the game design:
|
||||
|
||||
|
||||
| # | Property | Description | Example |
|
||||
|---|----------|-------------|---------|
|
||||
| 0 | **Paint Color** | Triggers repainting of UI components. |  |
|
||||
| 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
|
||||
|
||||
#### 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 |  |
|
||||
|
||||
---
|
||||
**Tip**: Ensure color values align with the game’s visual design specifications.
|
||||
@ -2,61 +2,47 @@
|
||||
sidebar_position: 12
|
||||
---
|
||||
|
||||
|
||||
# Popup Panel
|
||||
|
||||
### Overview
|
||||
|
||||
A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
|
||||
|
||||
||||
|
||||
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
|
||||
## Overview
|
||||
The **Popup Panel** is a temporary UI element that overlays the main game content to display additional information or user options, such as exit prompts or disconnection notices.
|
||||
|
||||
| Exit Popup | Disconnect Popup | Credit Popup |
|
||||
|------------|------------------|--------------|
|
||||
|  |  |  |
|
||||
|
||||
## 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 Setting
|
||||
|
||||
:::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*
|
||||
:::
|
||||
**Base Settings**:
|
||||
- **Prefab**: `hyper-multiple-popup.prefab`
|
||||
- **Path**: `assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab`
|
||||
- **Configuration**: Reference the prefab in the main scene to enable multiple popup layouts.
|
||||
- 
|
||||
|
||||
## Manual Popup Panel
|
||||
Manually configured popups allow for custom textures and layouts, tailored to the game’s design. Note that the **Exit Game** popup is exclusive to the Desktop platform.
|
||||
|
||||
:::info
|
||||
- This popup is self-configured using shared textures and layout structure.
|
||||
- The color theme and style may vary depending on the game design.
|
||||
- Note: **Exit Game** Popup only in **Desktop**.
|
||||
:::
|
||||
**Setup Steps**:
|
||||
1. **Prepare Assets**:
|
||||
- **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit`
|
||||
- **Example**: 
|
||||
|
||||
#### 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 |
|
||||
|---------------------------------|-----------------------------------------------------|
|
||||
|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
|
||||
|
||||
- Structure prefabs:
|
||||
|
||||
|
||||
|
||||
- Manually drag and drop the image onto the node:
|
||||
|
||||
|
||||
|
||||
**Preview Result**:
|
||||
|
||||
|
||||
---
|
||||
**Tip**:
|
||||
- Ensure textures align with the game’s color theme and design specifications.
|
||||
- Test the popup on Desktop to confirm functionality for the Exit Game feature.
|
||||
@ -5,126 +5,112 @@ sidebar_position: 13
|
||||
# Game Logo
|
||||
|
||||
## Overview
|
||||
The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
|
||||
The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the game’s identity.
|
||||
|
||||
| Platform | Orientation | Preview |
|
||||
|----------|------------|----------|
|
||||
| Desktop | Standard |  |
|
||||
| Mobile | Landscape |  |
|
||||
| Mobile | Portrait |  |
|
||||
|----------|-------------|---------|
|
||||
| Desktop | Standard |  |
|
||||
| Mobile | Landscape |  |
|
||||
| Mobile | Portrait |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
#### 1. Core Setup
|
||||
Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation`
|
||||
|
||||
```typescript
|
||||
// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
|
||||
onLoad: function () {
|
||||
var self = this;
|
||||
// Initialize animation states
|
||||
self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
|
||||
self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
|
||||
}
|
||||
```
|
||||
- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
|
||||
- **Script**: Initialize animation states for the logo.
|
||||
```typescript
|
||||
// File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
|
||||
onLoad: function () {
|
||||
const self = this;
|
||||
// Initialize animation states
|
||||
self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
|
||||
self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Required Assets
|
||||
|
||||
##### Static Assets
|
||||
**Static Assets**:
|
||||
| Platform | Location | Preview |
|
||||
|----------|----------|---------|
|
||||
| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` |  |
|
||||
| Mobile | `assets\game-assets\textures\mobile\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` |  |
|
||||
|
||||
##### Animation Assets
|
||||
**Animation Assets**:
|
||||
| Platform | Location | Preview |
|
||||
|----------|----------|---------|
|
||||
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
|
||||
| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
|
||||
| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` |  |
|
||||
| Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` |  |
|
||||
|
||||
#### 3. Animation Settings
|
||||
1. Configure Provider
|
||||
1. **Configure Animation Provider**:
|
||||
- Register the logo animations in the Animation Provider.
|
||||
- 
|
||||
|
||||
|
||||
|
||||
2. Setup States
|
||||
|
||||
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
|
||||
|
||||
|
||||
|
||||
- Configure continuous loop playback:
|
||||
|
||||
|
||||
2. **Set Up Animation States**:
|
||||
- Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
|
||||
- 
|
||||
- Configure continuous loop playback for animations.
|
||||
- 
|
||||
|
||||
### Setup
|
||||
|
||||
#### 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',
|
||||
}
|
||||
```
|
||||
- 
|
||||
|
||||
|
||||
|
||||
🔗 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.
|
||||
:::
|
||||
**Tip**: Adjust position and size according to the game design specifications.
|
||||
|
||||
#### Mobile Configuration
|
||||
|
||||
##### Landscape Mode
|
||||
|
||||
1. Node Setup
|
||||
|
||||
| Component | Description |
|
||||
|-------------------------------------------|--------------------------------------------------|
|
||||
| `hyper-logo-animation` | Plays and manages the logo animation |
|
||||
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
|
||||
| `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) |
|
||||
|
||||
|
||||
1. **Node Setup**:
|
||||
- Configure the logo node with the following components:
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `hyper-logo-animation` | Plays and manages the logo animation. |
|
||||
| `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
|
||||
| `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
|
||||
- 
|
||||
|
||||
##### 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 |
|
||||
|----------------------------|--------------------------------------------------|
|
||||
| `hyper-logo-animation` | Plays and manages the logo animation |
|
||||
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
|
||||
| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
|
||||
3. **Size Settings**:
|
||||
- Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
|
||||
- 
|
||||
- **Settings**:
|
||||
| Setting | Description | Default Value |
|
||||
|---------|-------------|---------------|
|
||||
| **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
|
||||
| **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |
|
||||
|
||||
|
||||
|
||||
2. Position Settings
|
||||
|
||||
| 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.
|
||||
:::
|
||||
**Tip**:
|
||||
- Test the static logo display under slow network conditions to ensure fallback works.
|
||||
- Verify animation states (`play` and `idle`) for smooth transitions.
|
||||
@ -1,82 +1,61 @@
|
||||
---
|
||||
sidebar_position: 15
|
||||
---
|
||||
# Jackpot
|
||||
---
|
||||
|
||||
# Jackpot Panel
|
||||
|
||||
## Overview
|
||||
The **Jackpot Feature** offers multiple prize tiers, each with increasing value, providing players with frequent smaller wins and the chance for a large top prize. The panel is responsive, supporting both desktop and mobile layouts.
|
||||
|
||||
- **Jackpot Feature** is a system where there are **multiple levels (tiers)** of prizes, usually increasing in value. This structure gives players a chance to win **smaller jackpots more frequently**, while still keeping a large top prize available.
|
||||
**Jackpot Tiers**:
|
||||
| Tier | Description | Preview |
|
||||
|------|-------------|---------|
|
||||
| Grand | The top prize, rare and often worth thousands or millions (progressive). |  |
|
||||
| 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 |
|
||||
|-------|------------------------------|------------------------------------------------------------|
|
||||
| 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. |  |
|
||||
| Minor | A bit higher in value, still fairly common. |  |
|
||||
| Mini | The smallest and easiest to win. |  |
|
||||
|
||||
- The panel is responsive and supports both desktop and mobile layouts:
|
||||
|
||||
| Orientation | Preview |
|
||||
|-------------|------------------------------------------------------------|
|
||||
| Desktop |  |
|
||||
| Mobile |  |
|
||||
**Platform Support**:
|
||||
| Orientation | Preview |
|
||||
|-------------|---------|
|
||||
| Desktop |  |
|
||||
| Mobile |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
- Use the prefabs located at:
|
||||
|
||||
|`assets/core-assets/jackpot-package/prefabs`||
|
||||
|--------------------------------------------|--------------------------------------------------------------------|
|
||||
- **Prefab Location**:
|
||||
- Path: `assets/core-assets/jackpot-package/prefabs`
|
||||
- Example: 
|
||||
|
||||
### Setup
|
||||
|
||||
#### Jackpot runner
|
||||
#### Jackpot Runner
|
||||
|
||||
##### Desktop
|
||||
|
||||
- The node jackpot to your main scene:
|
||||
|
||||
|
||||
|
||||
More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
1. **Add Node**:
|
||||
- Integrate the jackpot node into the main scene.
|
||||
- 
|
||||
|
||||
##### 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.
|
||||
|
||||
- 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)
|
||||
2. **Platform Node Spawner**:
|
||||
- Example: 
|
||||
|
||||
#### Result Panel
|
||||
- Ensure the jackpot panel displays correctly across all platforms and orientations.
|
||||
- 
|
||||
|
||||
- The jackpot panel works seamlessly across all platforms and orientations.
|
||||
|
||||
|
||||
|
||||
More info: [Node Spawner](/docs/faqs/setup-cocos-scene#node-spawner)
|
||||
|
||||
:::tip
|
||||
- Follow the game design layout.
|
||||
:::
|
||||
|
||||
**Tip**: Follow the game design layout for positioning and sizing.
|
||||
|
||||
## Game Result Examples
|
||||
|
||||
| Win Tier | Example |
|
||||
|----------|------------------------------------------------------------------|
|
||||
| Grand |  |
|
||||
| Major |  |
|
||||
| Minor |  |
|
||||
| Mini |  |
|
||||
|----------|---------|
|
||||
| Grand |  |
|
||||
| Major |  |
|
||||
| Minor |  |
|
||||
| Mini |  |
|
||||
@ -1,26 +1,29 @@
|
||||
---
|
||||
sidebar_position: 16
|
||||
---
|
||||
|
||||
# Idle Animation
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience.
|
||||
|
||||
| Static Preview | Animated Preview |
|
||||
|--------|-------------|
|
||||
|  |  |
|
||||
|
||||
 
|
||||
|
||||
## Prepare the assets
|
||||
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
|  | Used to Setup the static sprite frame. |
|
||||
|  | Used to Setup the idle animation. |
|
||||
|  | Static sprite frame for the idle state. |
|
||||
|  | Animation assets for the idle animation. |
|
||||
|
||||
## Setup Idle Animation
|
||||
|
||||
### Configure Settings
|
||||
|
||||
Create the following script:
|
||||
Create a script to register the idle animation components with the dependency injection container.
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
var BaseSlottySetting = p4fslot.require('slotty-setting');
|
||||
var DIContainer = p4fcore.require('di-container');
|
||||
@ -44,14 +47,18 @@ BaseSlottySetting.prototype._registerInjection = function () {
|
||||
|
||||
### Configure Scene
|
||||
|
||||
1. Search for the `idle-animation-panel` prefab.
|
||||
2. Drag the "prefab" into "scene".
|
||||
3. Click "Generate Panel".
|
||||
|
||||
|
||||
1. **Locate Prefab**:
|
||||
- Search for the `idle-animation-panel` prefab.
|
||||
2. **Add to Scene**:
|
||||
- Drag the prefab into the main scene.
|
||||
3. **Generate Panel**:
|
||||
- Click **Generate Panel** to set up the animation panel.
|
||||
-
|
||||
|
||||
:::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
|
||||
title: Win Limit
|
||||
description: Display limit win
|
||||
description: Display win limit popups during gameplay.
|
||||
---
|
||||
|
||||
# Win Limit
|
||||
|
||||
## Overview
|
||||
The **Win Limit** system displays popups when specific win conditions are met, enhancing player feedback and interaction.
|
||||
|
||||
#### Win Limit
|
||||
- **Win Limit Popup**: Appears when a player’s win points reach a predefined threshold.
|
||||
- 
|
||||
- **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.
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
## Prepare Assets
|
||||
|
||||
#### Prefab Location
|
||||
|
||||
| Path | Prefab Name |
|
||||
|----------------------------------------------------------|------------------------------|
|
||||
| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
|
||||
| Path | Prefab Name |
|
||||
|------|-------------|
|
||||
| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
|
||||
|
||||
#### Scene Hierarchy
|
||||
|
||||
Place the prefab in the following scene structure:
|
||||
|
||||
```
|
||||
Canvas
|
||||
└── [main-view]
|
||||
└── [game-view]
|
||||
└── [present-win-limit-reached]
|
||||
```
|
||||
- 
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Setup
|
||||
## Setup
|
||||
|
||||
#### 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:
|
||||
|
||||
|
||||
|
||||
| Drag Sprite | Node Name |
|
||||
|-------------------------|-----------------------|
|
||||
| `you-won` | `you-won` |
|
||||
| `win-limit-reached` | `win-limit-reached` |
|
||||
| `gamble-limit-reached` | `gamble-limit-reached`|
|
||||
| `btn-normal` | `btn-continue` |
|
||||
| `text-continue` | `continue` |
|
||||
|
||||
| Sprite | Node Name |
|
||||
|--------|-----------|
|
||||
| `you-won` | `you-won` |
|
||||
| `win-limit-reached` | `win-limit-reached` |
|
||||
| `gamble-limit-reached` | `gamble-limit-reached` |
|
||||
| `btn-normal` | `btn-continue` |
|
||||
| `text-continue` | `continue` |
|
||||
|
||||
#### Font
|
||||
- Use a custom font to match the win label style, aligning with the game’s theme.
|
||||
- 
|
||||
|
||||
- Use a **custom font** to match the win label style for your game theme.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
:::tip
|
||||
- Follow the game design layout for assets and fonts.
|
||||
- Win limit configuration may vary by game.
|
||||
:::
|
||||
**Tip**:
|
||||
- Follow the game design layout for asset placement and font styling.
|
||||
- Verify win limit configurations to ensure they match game-specific thresholds.
|
||||
@ -8,7 +8,7 @@ description: Display Gamble
|
||||
|
||||
## Overview
|
||||
|
||||
**Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color.
|
||||
The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a card’s color. It is supported across desktop and mobile platforms in both landscape and portrait orientations.
|
||||
|
||||
| Device Type | Preview |
|
||||
|---------------|-----------------------------------------------------------------------------|
|
||||
@ -23,7 +23,7 @@ description: Display Gamble
|
||||
|
||||
#### Scene Hierarchy
|
||||
|
||||
Place the node in the following scene structure:
|
||||
Place the gamble node in the following scene structure:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@ -6,8 +6,8 @@ sidebar_position: 18
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement.
|
||||
|
||||
|
||||
## Implementation
|
||||
|
||||
@ -15,20 +15,20 @@ sidebar_position: 18
|
||||
|
||||
| Assets | Description |
|
||||
| :----: |-------------|
|
||||
| <img width="300"/>| Used to Setup the static sprite frame. |
|
||||
| <img width="300"/> | Used to Setup the animations. |
|
||||
| <img width="300"/> | Used to Setup the label cost. |
|
||||
| <img width="300"/>| Static sprite frame for the buy feature panel. |
|
||||
| <img width="300"/> | Animation assets for the buy feature button and panel. |
|
||||
| <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.|
|
||||
|
||||
### 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
|
||||
|
||||
Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
|
||||
2. **Configure Spine Animation**:
|
||||
- Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
|
||||
|
||||
|
||||
|
||||
@ -52,8 +52,9 @@ sidebar_position: 18
|
||||
|
||||
|
||||
### Configure Scene
|
||||
|
||||
1. Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
|
||||
2. Update **Prefab** in the `shortcut-buy-feature-button`.
|
||||
1. **Add Prefabs**:
|
||||
- Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
|
||||
2. **Update Prefab**:
|
||||
- Update **Prefab** in the `shortcut-buy-feature-button`.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user