Improve content by GPT
This commit is contained in:
parent
d7ed9e65fc
commit
b34e007b6b
@ -32,7 +32,7 @@ Then run the follwing command:
|
|||||||
git submodule add -f ../hyper-editor-package.git packages
|
git submodule add -f ../hyper-editor-package.git packages
|
||||||
```
|
```
|
||||||
|
|
||||||
## Internation Theme vs Chinese Theme
|
## International Theme vs Chinese Theme
|
||||||
|
|
||||||
Depend on the theme of your game, add these commands:
|
Depend on the theme of your game, add these commands:
|
||||||
|
|
||||||
|
|||||||
@ -2,19 +2,25 @@
|
|||||||
sidebar_position: 1
|
sidebar_position: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
# System
|
# System Setup
|
||||||
---
|
|
||||||
|
|
||||||
## Sprite Frame Provider Setup
|
## Overview
|
||||||
|
The **System** module provides global access to sprite frames and animation assets, enabling efficient resource management across the game.
|
||||||
|
|
||||||
**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase.
|
## Sprite Frame Provider
|
||||||
|
The **SpriteFrameProvider** allows global access to sprite frames from anywhere in the codebase.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
**Setup Steps:**
|
||||||
|
1. Configure the **SpriteFrameProvider** to register sprite assets.
|
||||||
|
2. Ensure all sprite frames are added to the provider for global access.
|
||||||
|
|
||||||
## Animation Provider Setup
|
## Animation Provider
|
||||||
|
The **Animation Provider** manages and exposes game-related animation assets globally.
|
||||||
|
|
||||||
The **Animation Provider** manages and exposes all game-related **animation assets** globally.
|
|
||||||
|
|
||||||
|
**Setup Steps:**
|
||||||
|
1. Register animation assets in the **Animation Provider**.
|
||||||
|
2. Verify that animations are correctly linked to their respective prefabs.
|
||||||
@ -2,76 +2,50 @@
|
|||||||
sidebar_position: 2
|
sidebar_position: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
# Background
|
# Background Setup
|
||||||
|
|
||||||
Is the visual scenery that appears behind the gameplay elements.
|
|
||||||
|
|
||||||
---
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The background serves as the visual scenery behind gameplay elements, supporting both **Landscape** (Desktop and Mobile) and **Portrait** (Mobile only) orientations.
|
||||||
|
|
||||||
The background consists of 2 parts: **Landscape** and **Portrait**.
|
| Orientation | Desktop | Mobile |
|
||||||
|
|-------------|---------|--------|
|
||||||
|
| **Landscape** |  |  |
|
||||||
|
| **Portrait** |  |  |
|
||||||
|
|
||||||
- **Landscape** use for Desktop and Mobile landscape.
|
## Asset Preparation
|
||||||
- **Portrait** only use for Mobile portrait.
|
| Type | Assets | Description |
|
||||||
|
|------|--------|-------------|
|
||||||
|
| **Static** |  | Required for all games. |
|
||||||
|
| **Animation** |  | Optional, depending on game design. |
|
||||||
|
|
||||||
| | Desktop | Mobile |
|
## Setup Steps
|
||||||
|:-:|--------------|---------|
|
1. **Landscape Background**:
|
||||||
|**Background Landscape**<br/>|<br/>|<br/>|
|
- Use the prepared sprite frame for the landscape background.
|
||||||
|**Background Portrait**<br/>||<br/>|
|
- 
|
||||||
|
|
||||||
## 1. Prepare the assets
|
2. **Portrait Background**:
|
||||||
| | Assets | Description |
|
- Use the prepared sprite frame for the mobile portrait background.
|
||||||
|:-:|--------------|---------|
|
- 
|
||||||
|**Static**<br/>||Static background is necessary for the game|
|
|
||||||
|**Animation**<br/>||Animation background may or may not be present, depending on the game design|
|
|
||||||
|
|
||||||
## 2. Setup Background Landscape
|
3. **Animated Background** (if applicable):
|
||||||
|
- **Step 1**: Use the helper tool to generate animations from prepared assets.
|
||||||
We use sprite frame background for landscape from prepared assets.
|
- 
|
||||||
|
- 
|
||||||
|
- **Step 2**: Configure spine animation settings:
|
||||||
|
- Enable **Is Loop** to ensure continuous playback.
|
||||||
## 3. Setup Background Portrait
|
- Set a **Static Sprite Frame** for display before the animation loads.
|
||||||
|
- 
|
||||||
We use sprite frame background for mobile from prepared assets.
|
- 
|
||||||
|
- **Step 3**: Add animation nodes:
|
||||||
|
- **Landscape**:
|
||||||
|
- Create an `Empty Node` named `anim-background-main-game`.
|
||||||
## 4. Setup Background Animation
|
- Add the `animation-play-on-enable` component with the animation name from the **Animation Provider**.
|
||||||
|
- Add the `background-scaler` component to resize based on screen resolution.
|
||||||
If the game have design animation for background, we will do this step.
|
- 
|
||||||
|
- **Portrait**:
|
||||||
**Setp 1:** Using hepler to generate animation from prepared assets
|
- Create an `Empty Node` named `mobile-background-anim-portrait`.
|
||||||
|
- Add the `mobile-portrait-background-ui-controller` and `orientation-ui-controller` components for mobile portrait display.
|
||||||
|
- Create a child `Empty Node` named `anim-background-main-game`.
|
||||||
|
- Add the `animation-play-on-enable` and `portrait-anim-background-scaler` components.
|
||||||
|
- 
|
||||||
**Setp 2:**. Stup for spine-animation
|
- 
|
||||||
- `Is Loop`: is ✅ because this animation will play through the game.
|
|
||||||
- `Static Sprite Frame`: It will be displayed when the animation has not finished loading.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Setp 3:**. Add animation background with components below:
|
|
||||||
|
|
||||||
**Landscape:**
|
|
||||||
- Create `Empty Node` with name `anim-background-main-game`.
|
|
||||||
- Add `animation-play-on-enable` with animation name in **Animation Provider**.
|
|
||||||
- Add `background-scaler`, used to resize according to screen resolution.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Portrait:**
|
|
||||||
|
|
||||||
- Create `Empty Node` with name `mobile-background-anim-portrait`.
|
|
||||||
- Add `mobile-portrait-background-ui-controller` to display only on **Mobile**.
|
|
||||||
- Add `orientation-ui-controller` to display on Portrait with the options below.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Create `Empty Node` with name `anim-background-main-game`.
|
|
||||||
- Add `animation-play-on-enable` with animation name in **Animation Provider**.
|
|
||||||
- Add `portrait-anim-background-scaler`, used to resize according to screen resolution.
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,50 +1,43 @@
|
|||||||
---
|
---
|
||||||
sidebar_position: 2
|
sidebar_position: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
# Set Up Reel Slot
|
# Reel Slot Setup
|
||||||
---
|
|
||||||
|
|
||||||
### Prepare Assets
|
## Overview
|
||||||
|
The reel slot system manages the core spinning mechanics of the game.
|
||||||
Add the symbol textures and reel frame:
|
|
||||||
|
|
||||||
|||
|
## Asset Preparation
|
||||||
|------------------------------------------------------------------|--------------------------------------------------------------|
|
- Add symbol textures and reel frames:
|
||||||
|
- 
|
||||||
|
- 
|
||||||
|
|
||||||
### Add symbols to `SpriteFrameProvider`
|
## Sprite Frame Provider
|
||||||
|
- Add symbols to the **SpriteFrameProvider** for global access.
|
||||||
|
- 
|
||||||
|
|
||||||
This allows symbols to be accessed globally from code:
|
## Reel Frame
|
||||||
|
- Configure the reel frame:
|
||||||
|
- 
|
||||||
|
- 
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
Use the `reel-scroller-helper` to set up spinning behavior:
|
||||||
|
|
||||||
### Add Reel Frame
|
|
||||||
|
|
||||||
| | |
|
| Property | Description | Example |
|
||||||
|--------------------------------------------------------------------|--------------------------------------------------------------|
|
|----------|-------------|---------|
|
||||||
|
| **Cell Item Script Name** | Script attached to each cell item. |  |
|
||||||
|
| **Scroller Script Name** | Script handling spinning logic. |  |
|
||||||
|
| **Row Count x Reel Count** | Number of slot items per row and column. |  |
|
||||||
|
| **Cell Size** | Size of each cell. |  |
|
||||||
|
| **Cell Spacing** | Horizontal and vertical distance between cells. | - |
|
||||||
|
| **Cell Dim Color** | Dark color for non-winning cells during win animations. |  |
|
||||||
|
| **Top Count and Bot Count** | Additional cells at the top and bottom for spinning logic. |  |
|
||||||
|
|
||||||
### Configure the Reel Slot
|
## Generate Reel Panel
|
||||||
|
- Use the `reel-scroller-helper` to auto-generate the reel panel.
|
||||||
|
- 
|
||||||
|
|
||||||
Use `reel-scroller-helper` to configure spinning behavior:
|
**Tip**: Temporarily disable any popups covering the scene to view and edit reel slot components clearly.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Properties | Description | Example |
|
|
||||||
|------------|--------------|---------|
|
|
||||||
|**Cell Item Script Name**|The name of the script will be attached to each cell item.||
|
|
||||||
| **Scroller Script Name** | the name of the script for handling the spinning logic.||
|
|
||||||
|**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.||
|
|
||||||
|**Cell Size**| the size of each cells.||
|
|
||||||
|**Cell Spacing**| the distance between each cells horizontally and vertically.||
|
|
||||||
|**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.||
|
|
||||||
|**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.||
|
|
||||||
|
|
||||||
### Generate Reel Panel
|
|
||||||
|
|
||||||
Use `reel-scroller-helper` to auto-generate the full panel:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components.
|
|
||||||
:::
|
|
||||||
@ -2,64 +2,36 @@
|
|||||||
sidebar_position: 4
|
sidebar_position: 4
|
||||||
---
|
---
|
||||||
|
|
||||||
# Set Up Spinning Panel
|
# Spinning Panel Setup
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The spinning panel system includes the **reel slot panel** and additional panels: `landing-panel`, `tension-panel`, `present-win-cell-panel`, and `present-win-border-panel`.
|
||||||
|
|
||||||
The **reel slot panel** is just one part of the overall **spinning panel** system.
|
## Panel Setup
|
||||||
|
- **Landing Panel**:
|
||||||
Other required panels include:
|
- 
|
||||||
|
- **Script**:
|
||||||
- `landing-panel`
|
```jsx
|
||||||
- `tension-panel`
|
|
||||||
- `present-win-cell-panel`
|
|
||||||
- `present-win-border-panel`
|
|
||||||
|
|
||||||
Each panel can be quickly set up using the **Generate Panel** function from its helper script.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Set Up Panel
|
|
||||||
|
|
||||||
- Landing Panel:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
To define Landing Panel, create the following script:
|
|
||||||
|
|
||||||
:::warning
|
|
||||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
|
||||||
SlottySetting.prototype._registerInjection = function () {
|
SlottySetting.prototype._registerInjection = function () {
|
||||||
DIContainer.Register('landingGenerator', require('landing-generator'));
|
DIContainer.Register('landingGenerator', require('landing-generator'));
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
:::
|
|
||||||
|
|
||||||
- Present Win Cell Panel:
|
- **Present Win Cell Panel**:
|
||||||
|
- 
|
||||||
|
|
||||||
|
- **Present Win Border Panel**:
|
||||||
|
- 
|
||||||
|
|
||||||
- Present Win Cell Panel:
|
- **Tension Panel**:
|
||||||
|
- 
|
||||||
|
- For custom size frames, set **sizeMode** to **Custom** and configure the static frame and size.
|
||||||
|
- 
|
||||||
- Tension Panel:
|
- **Check Toggle**: Ensure the general panel toggle is correctly set.
|
||||||
|
- 
|
||||||
|
- **Script**:
|
||||||
|
```jsx
|
||||||
If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**check toggle General Panel**
|
|
||||||
|
|
||||||
|
|
||||||
To define Tension Panel, create the following script:
|
|
||||||
:::warning
|
|
||||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
|
||||||
SlottySetting.prototype._registerInjection = function () {
|
SlottySetting.prototype._registerInjection = function () {
|
||||||
DIContainer.Register('tensionGenerator', require('tension-generator'));
|
DIContainer.Register('tensionGenerator', require('tension-generator'));
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
:::
|
|
||||||
@ -5,139 +5,43 @@ sidebar_position: 5
|
|||||||
# Win Point on Reel
|
# Win Point on Reel
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The **Win Point on Reel** system displays win points for each payline, including scatter wins.
|
||||||
|
|
||||||
- Displays win points for each payline, including scatter wins.
|
|
||||||
|
|
||||||
|
## Asset Preparation
|
||||||
|
- **Core Assets**:
|
||||||
|
- Path: `assets/core-assets/hyper-core/packages/on-reel-present-win-point/prefab`
|
||||||
|
- 
|
||||||
|
|
||||||
## Implementation
|
- **Game Assets**:
|
||||||
|
- Path: `assets/game-assets/prefabs`
|
||||||
|
- 
|
||||||
|
|
||||||
### Prepare Assets
|
## Setup
|
||||||
|
1. **Add Prefab to Scene**:
|
||||||
|
- Add the `on-reel-present-win-point` prefab to the main scene.
|
||||||
|
- Components:
|
||||||
|
- `on-reel-present-win-point`: Controls visibility of win points.
|
||||||
|
- `hyper-present-win-point`: Manages presentation flow.
|
||||||
|
- 
|
||||||
|
|
||||||
#### In Core
|
2. **Configure Node Targets**:
|
||||||
|
- Set the target node for win point labels and define size/offset.
|
||||||
|
- 
|
||||||
|
- Properties:
|
||||||
|
| Property | Type | Description |
|
||||||
|
|----------|------|-------------|
|
||||||
|
| `labelPosition` | `cc.Vec2` | Offset position for the win point label. |
|
||||||
|
| `nodeTarget` | `cc.Node` | Target node containing the label. |
|
||||||
|
| `cellItemSize` | `cc.Vec2` | Size of each slot cell. |
|
||||||
|
| `defaultFontSize` | `number` | Default font size for the label. |
|
||||||
|
|
||||||
<table>
|
3. **Set Up Label Component**:
|
||||||
<thead>
|
- Displays win values with support for formatted text (number, currency).
|
||||||
<tr>
|
- Add a custom font:
|
||||||
<th style={{ width: "300px" }}>Path</th>
|
- Path: `assets/game-assets/fonts/preloads/main-game/fnt-win-point-on-reel`
|
||||||
<th style={{ width: "400px" }}>Example</th>
|
- 
|
||||||
</tr>
|
- 
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab</code></td>
|
|
||||||
<td><center></center></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
#### In Game
|
**Tip**: Follow game design specifications for position and size.
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: "300px" }}>Path</th>
|
|
||||||
<th style={{ width: "400px" }}>Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>assets\game-assets\prefabs</code></td>
|
|
||||||
<td><center></center></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
### Setup
|
|
||||||
|
|
||||||
#### Steps 1: Add Prefab to Scene
|
|
||||||
|
|
||||||
Add the win point on reel prefab to your main scene.
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: "300px" }}>Component</th>
|
|
||||||
<th style={{ width: "400px" }}>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>on-reel-present-win-point</code></td>
|
|
||||||
<td><code>A component to **show/hide** points on reels</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>hyper-present-win-point</code></td>
|
|
||||||
<td><code>Manages win point presentation flow</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Steps 2: Configure Node Targets
|
|
||||||
Set the target node where each win point label appears and define its size and offset.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: "200px" }}>Property</th>
|
|
||||||
<th style={{ width: "100px" }}>Type</th>
|
|
||||||
<th style={{ width: "400px" }}>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>labelPosition</code></td>
|
|
||||||
<td><code>cc.Vec2</code></td>
|
|
||||||
<td>Offset position for the win point label</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>nodeTarget</code></td>
|
|
||||||
<td><code>cc.Node</code></td>
|
|
||||||
<td>Target node containing the label</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>cellItemSize</code></td>
|
|
||||||
<td><code>cc.Vec2</code></td>
|
|
||||||
<td>Size of each slot cell</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>defaultFontSize</code></td>
|
|
||||||
<td><code>number</code></td>
|
|
||||||
<td>Default font size for the label</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
#### Steps 3: Set Up Label Component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- **Component**:
|
|
||||||
- Displays win values on the reels.
|
|
||||||
- Supports formatted text (number, currency).
|
|
||||||
|
|
||||||
- **Custom Font**:
|
|
||||||
Add a custom font to style the win label.
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: "300px" }}>Path</th>
|
|
||||||
<th style={{ width: "400px" }}>Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel</code></td>
|
|
||||||
<td><center></center></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
- **Position And Size**: Follow Game Design.
|
|
||||||
:::
|
|
||||||
@ -2,169 +2,91 @@
|
|||||||
sidebar_position: 6
|
sidebar_position: 6
|
||||||
---
|
---
|
||||||
|
|
||||||
# Special Win
|
# Special Win System
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
Special Wins are high-value reward events categorized by payout thresholds:
|
||||||
|
|
||||||
Special Wins are high-value reward events in slot games, cagegorized based on the payout threshold:
|
| Win Type | Trigger Threshold | Preview |
|
||||||
|
|----------|-------------------|---------|
|
||||||
| Win Type | Trigger Threshold | Preview |
|
| **Big Win** | Medium payout |  |
|
||||||
|-----------|-----------------------|----------------|
|
| **Super Win** | High payout |  |
|
||||||
| **Big Win** | Medium payout |  |
|
| **Mega Win** | Maximum payout |  |
|
||||||
| **Super Win** | High payout |  |
|
|
||||||
| **Mega Win** | Maximum payout |  |
|
|
||||||
|
|
||||||
Each type delivers increasing visual excitement to highlight significant player rewards.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
### Asset Preparation
|
||||||
|
- Components:
|
||||||
|
| Component | Purpose |
|
||||||
|
|-----------|---------|
|
||||||
|
| `hyper-special-win-initializer` | Initializes the system. |
|
||||||
|
| `hyper-present-special-win` | Manages animation sequences and display logic. |
|
||||||
|
| `hyper-special-win-label-point-effect` | Controls win amount visualization. |
|
||||||
|
- 
|
||||||
|
|
||||||
### Prepare Assets
|
- **Coin Effect System**:
|
||||||
|
- Variants for different markets:
|
||||||
|
| Submodule | Theme | Preview |
|
||||||
|
|-----------|-------|---------|
|
||||||
|
| `hyper-coin-shower-international` | International |  |
|
||||||
|
| `hyper-coin-shower-chinese` | Chinese |  |
|
||||||
|
|
||||||
The special win system consists of three main components:
|
- **Static Assets**:
|
||||||
|
| Platform | Path | Preview |
|
||||||
|
|----------|------|---------|
|
||||||
|
| Desktop | `assets/textures/desktop/preloads/special-wins` |  |
|
||||||
|
| Mobile | `assets/textures/mobile/preloads/special-wins` |  |
|
||||||
|
|
||||||
| Component | Purpose |
|
### Animation Setup
|
||||||
|-----------|---------|
|
1. **Animation Resources**:
|
||||||
| `hyper-special-win-initializer` | Handles system initialization and setup |
|
- Path:
|
||||||
| `hyper-present-special-win` | Manages animation sequences and display logic |
|
| Platform | Path | Preview |
|
||||||
| `hyper-special-win-label-point-effect` | Controls win amount visualization |
|
|----------|------|---------|
|
||||||
|
| Desktop | `assets/textures/desktop/postloads/anim-special-win` |  |
|
||||||
|
| Mobile | `assets/textures/mobile/postloads/anim-special-win` |  |
|
||||||
|
|
||||||
|
2. **Animation Flow**:
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
SW[Special Wins] --> BW[Big Win]
|
||||||
|
SW --> SPW[Super Win]
|
||||||
|
SW --> MW[Mega Win]
|
||||||
|
|
||||||
#### Coin Effect System
|
BW --> BWI[bigwin-in] --> BWL[bigwin-loop] --> BWO[bigwin-out]
|
||||||
|
SPW --> SPWI[superwin-in] --> SPWL[superwin-loop] --> SPWO[superwin-out]
|
||||||
|
MW --> MWI[megawin-in] --> MWL[megawin-loop] --> MWO[megawin-out]
|
||||||
|
|
||||||
The coin shower effect uses prefab variants for different markets:
|
classDef inStage fill:#e6f3ff,stroke:#666
|
||||||
|
classDef loopStage fill:#fff2cc,stroke:#666
|
||||||
|
classDef outStage fill:#f8cecc,stroke:#666
|
||||||
|
classDef winType fill:#d5e8d4,stroke:#82b366
|
||||||
|
classDef specialWin fill:#fff4dd,stroke:#ff0000
|
||||||
|
|
||||||
|
class BWI,SPWI,MWI inStage
|
||||||
|
class BWL,SPWL,MWL loopStage
|
||||||
|
class BWO,SPWO,MWO outStage
|
||||||
|
class BW,SPW,MW winType
|
||||||
|
class SW specialWin
|
||||||
|
linkStyle default stroke-width:2px,stroke:#ff0000
|
||||||
|
```
|
||||||
|
- 
|
||||||
|
|
||||||
| Submodule | Theme | Preview |
|
3. **Animation Settings**:
|
||||||
|-------------|---------------|---------------|
|
- Configure static fallback and loop animations:
|
||||||
| `hyper-coin-shower-international` | International |  |
|
| Setting | Example |
|
||||||
| `hyper-coin-shower-chinese` | Chinese |  |
|
|---------|---------|
|
||||||
|
| Static Fallback |  |
|
||||||
|
| Loop Animation |  |
|
||||||
|
|
||||||
:::tip
|
4. **Font Configuration**:
|
||||||
- Position the Special Win node as per game design
|
- Path: `assets/game-assets/fonts/preloads/main-game/fnt-special-win`
|
||||||
:::
|
- Steps:
|
||||||
|
1. Import font files.
|
||||||
|
- 
|
||||||
|
2. Add font to the special win component.
|
||||||
|
- 
|
||||||
|
3. Configure text alignment, font size, and spacing.
|
||||||
|
- 
|
||||||
|
|
||||||
---
|
**Tip**:
|
||||||
|
- Move assets to `custom-scale/` to resolve image quality issues.
|
||||||
### Setup
|
- Customize font styles based on game design.
|
||||||
|
|
||||||
#### 1. Static Resources
|
|
||||||
|
|
||||||
Store static assets in platform-specific directories:
|
|
||||||
|
|
||||||
| Platform | Path | Preview |
|
|
||||||
|----------|------|---------|
|
|
||||||
| Desktop | `assets/textures/desktop/preloads/special-wins` |  |
|
|
||||||
| Mobile | `assets/textures/mobile/preloads/special-wins` |  |
|
|
||||||
|
|
||||||
🔗 [View Platform Asset Structure](/docs/cagegory/game-asset-structure)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 2. Animation Setup
|
|
||||||
|
|
||||||
##### Special Win Animation Flow
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '25px', 'fontFamily': 'arial' }}}%%
|
|
||||||
graph TD
|
|
||||||
%% Win Types with Thresholds
|
|
||||||
SW[Special Wins] --> BW["Big Win"]
|
|
||||||
SW --> SPW["Super Win"]
|
|
||||||
SW --> MW["Mega Win"]
|
|
||||||
|
|
||||||
%% Big Win stages with flow
|
|
||||||
BW --> BWI[bigwin-in]
|
|
||||||
BWI --> BWL[bigwin-loop]
|
|
||||||
BWL --> BWO[bigwin-out]
|
|
||||||
|
|
||||||
%% Super Win stages with flow
|
|
||||||
SPW --> SPWI[superwin-in]
|
|
||||||
SPWI --> SPWL[superwin-loop]
|
|
||||||
SPWL --> SPWO[superwin-out]
|
|
||||||
|
|
||||||
%% Mega Win stages with flow
|
|
||||||
MW --> MWI[megawin-in]
|
|
||||||
MWI --> MWL[megawin-loop]
|
|
||||||
MWL --> MWO[megawin-out]
|
|
||||||
|
|
||||||
%% Legend nodes
|
|
||||||
L0["Feature Name"]-->L1["Win Types"] --> L2["In State"] --> L3["Loop State"] --> L4["Out State"]
|
|
||||||
class L0 specialWin
|
|
||||||
class L1 winType
|
|
||||||
class L2 inStage
|
|
||||||
class L3 loopStage
|
|
||||||
class L4 outStage
|
|
||||||
|
|
||||||
%% Style definitions
|
|
||||||
classDef inStage fill:#e6f3ff,stroke:#666,font-size:25px
|
|
||||||
classDef loopStage fill:#fff2cc,stroke:#666,font-size:25px
|
|
||||||
classDef outStage fill:#f8cecc,stroke:#666,font-size:25px
|
|
||||||
classDef winType fill:#d5e8d4,stroke:#82b366,font-size:25px
|
|
||||||
classDef specialWin fill:#fff4dd,stroke:#ff0000,font-size:25px
|
|
||||||
|
|
||||||
class BWI,SPWI,MWI inStage
|
|
||||||
class BWL,SPWL,MWL loopStage
|
|
||||||
class BWO,SPWO,MWO outStage
|
|
||||||
class BW,SPW,MW winType
|
|
||||||
class SW specialWin
|
|
||||||
|
|
||||||
%% Adjust node spacing
|
|
||||||
linkStyle default stroke-width:4px,stroke:#ff0000
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
##### Step 1: Add Animation Resources
|
|
||||||
|
|
||||||
Place animated assets in the following directories:
|
|
||||||
|
|
||||||
| Platform | Path | Preview |
|
|
||||||
|----------|------|---------|
|
|
||||||
| Desktop | `assets/textures/desktop/postloads/anim-special-win` |  |
|
|
||||||
| Mobile | `assets/textures/mobile/postloads/anim-special-win` |  |
|
|
||||||
|
|
||||||
##### Step 2: Configure Animation Settings
|
|
||||||
|
|
||||||
| Setting | Example |
|
|
||||||
|------------------|---------|
|
|
||||||
| Static Fallback |  |
|
|
||||||
| Loop Animation |  |
|
|
||||||
|
|
||||||
🔗 [View Animation Provider Setup](/docs/setup-main-game/main-scene/system#animation-provider-setup)
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
- Move assets to `custom-scale/` directory to resolve image quality issues
|
|
||||||
- Asset paths may vary by project configuration
|
|
||||||
:::
|
|
||||||
|
|
||||||
##### Step 3: Font Configuration
|
|
||||||
|
|
||||||
- **Path:** `assets\game-assets\fonts\preloads\main-game\fnt-special-win`
|
|
||||||
- Follow these steps to configure fonts for special win displays:
|
|
||||||
|
|
||||||
1. **Package Font Assets**
|
|
||||||
- Import font files into project
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
2. **Font Integration**
|
|
||||||
- Add font asset to special win component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3. **Layout Settings**
|
|
||||||
|
|
||||||
- Configure text alignment
|
|
||||||
- Adjust font size and spacing
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
Customize font styles based on each game's design.
|
|
||||||
:::
|
|
||||||
@ -4,75 +4,61 @@ sidebar_position: 7
|
|||||||
|
|
||||||
# Item Description
|
# Item Description
|
||||||
|
|
||||||
Provides players with detailed information about each item in the game.
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The **Item Description** system provides detailed information about game items, including payouts and descriptions.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Implementation
|
## Asset Preparation
|
||||||
|
|
||||||
### Prepare Assets
|
|
||||||
| Assets | Description |
|
| Assets | Description |
|
||||||
|--------|-------------|
|
|--------|-------------|
|
||||||
|  | Used to Setup the background. |
|
|  | Background setup. |
|
||||||
|  | Used to Setup the static symbol. |
|
|  | Static symbol setup. |
|
||||||
|  | Used to Setup the animation symbol. |
|
|  | Animation symbol setup. |
|
||||||
|  | Used to Setup the payout/description. |
|
|  | Payout or description text setup. |
|
||||||
|
|
||||||
### Setup
|
## Setup
|
||||||
|
1. **Locate Template Prefabs**:
|
||||||
|
- Search for the `template-item-description` prefab.
|
||||||
|
- 
|
||||||
|
2. **Clone Assets**:
|
||||||
|
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||||
|
- 
|
||||||
|
|
||||||
| Step | Action | Description | Image Reference |
|
### Prefab Configurations
|
||||||
| :--: | :----- | :---------- | :-------------: |
|
- **item-description-small** (Items with win payout only):
|
||||||
| 1 | Locate all template prefabs needed for the **Item Description** | Search for the `template-item-description` prefab. |  |
|
- 
|
||||||
| 2 | Clone assets| Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
- Steps:
|
||||||
|
| Step | Action | Image Reference |
|
||||||
|
|------|--------|-----------------|
|
||||||
|
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||||
|
| 2 | Name prefab as `item-description-<name>` and set **Animation Name** in **Animation Provider**. |  |
|
||||||
|
| 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
|
||||||
|
| 4 | Adjust **Color**, **Font**, and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||||
|
|
||||||
#### item-description-small
|
- **item-description-no-odds** (Items with description only):
|
||||||
|
- 
|
||||||
|
- Steps:
|
||||||
|
| Step | Action | Image Reference |
|
||||||
|
|------|--------|-----------------|
|
||||||
|
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||||
|
| 2 | Name prefab as `item-description-<name>` and set **Animation Name** in **Animation Provider**. |  |
|
||||||
|
| 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
|
||||||
|
| 4 | Set **String**, **Color**, **Font**, and **Font Size** in `description`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||||
|
|
||||||
Setup the `item-description-small` prefab for items have only win payout:
|
- **item-description-big** (Items with both payout and description):
|
||||||
|
- 
|
||||||
|
- Steps:
|
||||||
|
| Step | Action | Image Reference |
|
||||||
|
|------|--------|-----------------|
|
||||||
|
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||||
|
| 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#item-description-small) |
|
||||||
|
| 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#item-description-no-odds) |
|
||||||
|
|
||||||
| Step | Action | Image Reference |
|
**Tip**:
|
||||||
| :--: | :----- | :-------------: |
|
- Use the helper tool to configure:
|
||||||
| 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | <img width="1000"/> |
|
1. Set **Content Size** and **Cell Item Size** per game design.
|
||||||
| 2 | - Name the item prefab following the format item-description-**name**".<br/> - Setup the **Animation Name** to match the item's name in the **Animation Provider**.|  |
|
2. Use prepared bitmap fonts for **Labels**.
|
||||||
| 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. |  |
|
3. Click **Set Size** to run the helper.
|
||||||
| 4 | - Adjust **Color**, **Font** and **Font Size** in `multi-x...` and `oods-x...` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
|
4. Configure **Background**, **Sprite Frame**, **Animation**, **Payout**, and **Description** using prepared assets.
|
||||||
|
- 
|
||||||
|
|
||||||
#### item-description-no-odds
|
|
||||||
Setup the `item-description-no-odds` prefab for items that have a description but no win payout:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Step | Action | Image Reference |
|
|
||||||
| :--: | :----- | :-------------: |
|
|
||||||
| 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | <img width="1000"/> |
|
|
||||||
| 2 | - Name the item prefab following the format item-description-**name**".<br/> - Setup **Animation Name** to match the item's name in the **Animation Provider**.|  |
|
|
||||||
| 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. |  |
|
|
||||||
| 4 | - Set the **String** and adjust **Color**, **Font** and **Font Size** in the `description` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font. |  |
|
|
||||||
|
|
||||||
#### item-description-big
|
|
||||||
Setup the `item-description-big` prefab for items that include both a win payout and a description:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Step | Action | Image Reference |
|
|
||||||
| :--: | :----- | :-------------: |
|
|
||||||
| 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | <img width="1000"/> |
|
|
||||||
| 2 | - Setup the payout by following **Step 4** in **Setup prefab `item-description-small`** | [Configure Item Description Small](./item-description#item-description-small) | |
|
|
||||||
| 3 | - Setup the description by following **Step 4** in **Setup prefab `item-description-no-odds`** | [Configure Item Description No Odds](./item-description#item-description-no-odds) | |
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
Use Helper to setup:
|
|
||||||
1. Setup **Content Size** and **Cell Item Size** according to the game design.
|
|
||||||
2. Use prepared bitmap fonts to Setup the **Labels** font.
|
|
||||||
3. Click **Set Size** to run the helper.
|
|
||||||
4. Setup the **Background**, **Sprite Frame**, **Animation**, **Payout**, **Description** of the item using the prepared assets.
|
|
||||||
|
|
||||||
|
|
||||||
:::
|
|
||||||
@ -1,128 +1,67 @@
|
|||||||
---
|
---
|
||||||
sidebar_position: 16
|
sidebar_position: 8
|
||||||
title: Free Round
|
title: Free Round
|
||||||
description: Display and manage remaining free rounds in the game.
|
description: Display and manage remaining free rounds in the game.
|
||||||
---
|
---
|
||||||
|
|
||||||
# Free Round
|
# Free Round System
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
The **Free Round** system manages the display and logic for tracking remaining free rounds in the game, supporting both desktop and mobile platforms.
|
||||||
- Handles the **display** and **logic** for tracking remaining free rounds in a slot game.
|
|
||||||
- Supports both **desktop** and **mobile**, including animation and event handling.
|
|
||||||
|
|
||||||
| Platform | Preview |
|
| Platform | Preview |
|
||||||
|----------|---------|
|
|----------|---------|
|
||||||
| Desktop |  |
|
| Desktop |  |
|
||||||
| Mobile |  |
|
| Mobile |  |
|
||||||
|
|
||||||
---
|
## Asset Preparation
|
||||||
|
- **Core Assets**:
|
||||||
|
- Path: `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs`
|
||||||
|
- 
|
||||||
|
- **Game Assets**:
|
||||||
|
- Path: `assets/game-assets/prefabs`
|
||||||
|
- 
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
1. **General Configuration**:
|
||||||
|
- Ensure script references correct nodes.
|
||||||
|
- 
|
||||||
|
- Properties:
|
||||||
|
| Property | Description |
|
||||||
|
|----------|-------------|
|
||||||
|
| `duration` | Duration of fade in/out animation (seconds). |
|
||||||
|
| `content` | Container node for the counter. |
|
||||||
|
| `labelLeft` | Label showing remaining free rounds. |
|
||||||
|
- 
|
||||||
|
|
||||||
## Implementation
|
2. **Platform Setup**:
|
||||||
|
- **Desktop**:
|
||||||
|
- Add `Platform-ui-controller` component.
|
||||||
|
- 
|
||||||
|
- **Mobile**:
|
||||||
|
- Add `Platform-ui-controller` and `UI Mobile Position` components.
|
||||||
|
- 
|
||||||
|
|
||||||
### Prepare Assets
|
3. **Asset Setup**:
|
||||||
|
- **Desktop**:
|
||||||
|
- Path: `assets/game-assets/textures/desktop/preloads/main-game/custom-scale`
|
||||||
|
- 
|
||||||
|
- **Mobile**:
|
||||||
|
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
|
||||||
|
- 
|
||||||
|
|
||||||
- Copy or parse prefabs from core to game assets.
|
4. **Font Setup**:
|
||||||
|
- 
|
||||||
|
|
||||||
#### Core
|
**Tip**:
|
||||||
|
- Follow game design for position and size.
|
||||||
| Path | Preview |
|
- Use separate textures for Desktop and Mobile.
|
||||||
|------|---------|
|
- Ensure the main scene includes the popup panel ([See Popup Panel Guide](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)).
|
||||||
| `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs` |  |
|
|
||||||
|
|
||||||
#### Game
|
|
||||||
|
|
||||||
| Path | Preview |
|
|
||||||
|------|---------|
|
|
||||||
| `assets/game-assets/prefabs` | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Setup
|
|
||||||
|
|
||||||
- Ensure the script references the correct nodes.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Manages and displays the remaining free round count in-game.
|
|
||||||
|
|
||||||
"
|
|
||||||
|
|
||||||
| Property | Description |
|
|
||||||
|---------------|--------------------------------------------|
|
|
||||||
| `duration` | Duration of fade in/out animation (seconds) |
|
|
||||||
| `content` | Container node for the counter |
|
|
||||||
| `labelLeft` | Label showing remaining free rounds |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### Platform Setup
|
|
||||||
|
|
||||||
- Ensure that the desktop and mobile prefabs are positioned differently in the main game scene for proper layout on each platform.
|
|
||||||
|
|
||||||
##### Desktop
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Component | Description |
|
|
||||||
|-------------------------|-------------|
|
|
||||||
| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) |
|
|
||||||
|
|
||||||
|
|
||||||
##### Mobile
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Component | Description |
|
|
||||||
|-------------------------|-------------|
|
|
||||||
| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) |
|
|
||||||
| `UI Mobile Position` | [Mobile Position Setup](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### Asset Setup
|
|
||||||
|
|
||||||
##### Desktop
|
|
||||||
|
|
||||||
| Path | Preview |
|
|
||||||
|------|---------|
|
|
||||||
| `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` |  |
|
|
||||||
|
|
||||||
##### Mobile
|
|
||||||
|
|
||||||
| Path | Preview |
|
|
||||||
|------|---------|
|
|
||||||
| `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` |  |
|
|
||||||
|
|
||||||
##### Common
|
|
||||||
|
|
||||||
- **Free Round Background**
|
|
||||||
|
|
||||||
|
|
||||||
🔗 More: [Game Asset Structure](/docs/category/game-asset-structure)
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
- **Position & Size**: Follow the game design layout.
|
|
||||||
- **Asset Packing**: Use separate textures for Desktop and Mobile.
|
|
||||||
:::
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### Font Setup
|
|
||||||
|
|
||||||
| Preview |
|
|
||||||
|---------|
|
|
||||||
|  |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Game Result Example
|
## Game Result Example
|
||||||
|
| Platform | Popup | Action | Result |
|
||||||
Make sure the main scene includes the popup panel.
|
|----------|-------|--------|--------|
|
||||||
🔗 [See Popup Panel Guide](/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)
|
| Desktop |  | Click → Start |  |
|
||||||
|
| Mobile |  | Click → Start |  |
|
||||||
| Platform | Popup | Action | Result |
|
|
||||||
|----------|--------|---------------|--------|
|
|
||||||
| Desktop |  | Click → Start |  |
|
|
||||||
| Mobile |  | Click → Start |  |
|
|
||||||
@ -4,107 +4,95 @@ sidebar_position: 9
|
|||||||
|
|
||||||
# Info Pages
|
# Info Pages
|
||||||
|
|
||||||
Info Pages (Information Pages) provide players with essential details about how the game works. It helps player understand the rules, features, symbols, payout structures, and other gameplay mechanics.
|
|
||||||
|
|
||||||
---
|
|
||||||
## Overview
|
## Overview
|
||||||
|
**Info Pages** provide players with details about game rules, features, symbols, payout structures, and mechanics. They are divided into **Paytable** and **Rules** sections, with different layouts for Desktop and Mobile.
|
||||||
|
|
||||||
- **Desktop** consists Paytable and Rules in **Info Pages**.
|
| Platform | Desktop | Mobile |
|
||||||
- **Mobile** is divided into 2 parts Paytable and Rules
|
|----------|---------|--------|
|
||||||
|
| Paytable/Rules | <br/><br/> | <br/> |
|
||||||
|
|
||||||
|Desktop | Mobile |
|
## Asset Preparation
|
||||||
|:------:|:------:|
|
|
||||||
|||
|
|
||||||
|<br/>||
|
|
||||||
|
|
||||||
## Prepare the assets
|
|
||||||
| Assets | Description |
|
| Assets | Description |
|
||||||
|--------|-------------|
|
|--------|-------------|
|
||||||
||Used to setup **Rules** or image in RichText|
|
|  | Used for **Rules** or RichText images. |
|
||||||
||Used to setup **Paytable**|
|
|  | Used for **Paytable** setup. |
|
||||||
|
|
||||||
## Setup Prefabs Desktop
|
## Desktop Setup
|
||||||
|
1. **Locate Template Prefabs**:
|
||||||
| Step | Action | Description | Image Reference |
|
- Search for the `desktop-hyper-info-panel` prefab.
|
||||||
| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
|
- 
|
||||||
| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab. |  |
|
2. **Clone Assets**:
|
||||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||||
|
- 
|
||||||
|
|
||||||
### desktop-info-panel
|
### desktop-info-panel
|
||||||
|
| Step | Action | Image Reference |
|
||||||
| Step | Action | Image Reference |
|
|------|--------|-----------------|
|
||||||
| :--: | :----- | :-------------: |
|
| 1 | Change **Color** in `page-background` per game design. |  |
|
||||||
| 1 | Change **Color** in `page-background` follow the game design.| <img width="400"/> |
|
| 2 | Change **Color** in `menu-header-background` per game design. |  |
|
||||||
| 2 | Change **Color** in `menu-header-background` follow the game design. |  |
|
| 3 | Update **Prefab** in `paytable-content` using prepared prefabs. |  |
|
||||||
| 3 | Update **Prefab** in `paytable-content` from prepared prefabs. |  ||
|
| 4 | Update **Prefab** in `rules-content` using prepared prefabs. |  |
|
||||||
| 4 | Update **Prefab** in `rules-content` from prepared prefabs.|  |
|
|
||||||
|
|
||||||
### desktop-paytable-content
|
### desktop-paytable-content
|
||||||
|
- **Item with Payout**:
|
||||||
|
- 
|
||||||
|
- Steps:
|
||||||
|
| Step | Action | Image Reference |
|
||||||
|
|------|--------|-----------------|
|
||||||
|
| 1 | Set **Item Name** and **Odds Items** per game design. |  |
|
||||||
|
| 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
|
||||||
|
| 3 | Change **Color** in `multi-x...` and `odds-x...` per game design. |  |
|
||||||
|
| 4 | Adjust **Font** and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||||
|
|
||||||
- Paytable: Consist **Item with Payout** and **Item with Description**.
|
- **Item with Description**:
|
||||||
|
- 
|
||||||
|
- Steps:
|
||||||
|
| Step | Action | Image Reference |
|
||||||
|
|------|--------|-----------------|
|
||||||
|
| 1 | Set **Name** per game design. |  |
|
||||||
|
| 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
|
||||||
|
| 3 | Change **String** in `description` per game design. |  |
|
||||||
|
|
||||||
- Setup **Item with Payout**:
|
- **Feature Game**:
|
||||||
|
- Configure based on game features (e.g., **FREESPIN BONUS**, **BONUS FEATURE**):
|
||||||
|
- **Title**: Update **String** and **Color** in `freespins-bonus-title`.
|
||||||
|
- **Image**: Set **Sprite Frame** in `freespins-bonus-image-...` using prepared assets.
|
||||||
| Step | Action | Image Reference |
|
- **Description**: Update **String** in `freespins-bonus-description`.
|
||||||
| :--: | :----- | :-------------: |
|
- 
|
||||||
| 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/>  |
|
- 
|
||||||
| 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. |  |
|
- 
|
||||||
| 3 | Change **Color** in `multi-x...` and `oods-x...` follow the game design. |  ||
|
- 
|
||||||
| 4 | - Change **Font** and **Font Size** in `multi-x...` and `oods-x...` follow the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.|  |
|
|
||||||
|
|
||||||
- Setup **Item with Description**:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
| Step | Action | Image Reference |
|
|
||||||
| :--: | :----- | :-------------: |
|
|
||||||
| 1 | Setup Item with **Name** follow the game design. | <img width="1250"/>  |
|
|
||||||
| 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. |  |
|
|
||||||
| 3 | Change **String** in `description` follow the game design. |  |
|
|
||||||
|
|
||||||
- Feature Game: Depending on each game, there will be different feature: **FREESPIN BONUS**, **BONUS FEATURE**, ...
|
|
||||||
|
|
||||||
- Title : Change **String** and **Color** in `freespins-bonus-title` follow the game design.
|
|
||||||
- Image : Setup **Sprite Frame** `freespins-bonus-image-...` use from prepared assets.
|
|
||||||
- Description: Change **String** in `freespins-bonus-description` ollow the game design.
|
|
||||||
|
|
||||||
| Overivew | Configure |
|
|
||||||
| :--------------: | :------------------: |
|
|
||||||
|  |  |
|
|
||||||
|  |  |
|
|
||||||
|
|
||||||
### desktop-rules-content
|
### desktop-rules-content
|
||||||
There are 2 types: **Lines** and **Ways**.
|
- Types: **Lines** or **Ways**.
|
||||||
1. Setup **Sprite Frame** in `lines-image` from prepared assets.
|
- Steps:
|
||||||
2. Change **Color** in `lines-title` follow game desgin.
|
1. Set **Sprite Frame** in `lines-image` using prepared assets.
|
||||||
3. If the game is **Ways**:
|
2. Change **Color** in `lines-title` per game design.
|
||||||
- Change **String** in `lines-title` is **WIN WAYS/DYNAWAYS**.
|
3. For **Ways**:
|
||||||
- Enable and update **String** in `lines-description`.
|
- Update **String** in `lines-title` to **WIN WAYS/DYNAWAYS**.
|
||||||
|
- Enable and update **String** in `lines-description`.
|
||||||
|
- 
|
||||||
|
- 
|
||||||
|
- 
|
||||||
|
- 
|
||||||
|
|
||||||
| Overivew | Configure |
|
## Mobile Setup
|
||||||
| :--------------: | :------------------: |
|
1. **Locate Template Prefabs**:
|
||||||
|  |  |
|
- Search for the `mobile-ui` prefab.
|
||||||
|  |  |
|
- 
|
||||||
|
2. **Clone Assets**:
|
||||||
|
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||||
|
- 
|
||||||
|
3. **Configure Prefabs**:
|
||||||
|
- Configure `mobile-paytable-content` and `mobile-rules-content` as described in [Desktop Setup](#desktop-setup).
|
||||||
|
4. **Spawner Positions**:
|
||||||
|
- For **Paytable**: Use `mobile-paytable-content-spawner` in the `mobile-ui` prefab.
|
||||||
|
- 
|
||||||
|
- For **Rules**: Use `mobile-rule-content-spawner` in the `mobile-ui` prefab.
|
||||||
|
- 
|
||||||
|
|
||||||
## Setup Prefabs Mobile
|
**Tip**:
|
||||||
|
- If the game has a server, verify config settings:
|
||||||
| Step | Action | Description | Image Reference |
|
1. Open DevTools, navigate to the **Network** tab, and find the message with **event** = "config".
|
||||||
| :--: | :----- | :---------- | :-------------: |
|
2. Compare **paytable** values with the configured setup.
|
||||||
| 1 | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab. |<img width="2000"/> |
|
- 
|
||||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
|
||||||
| 3 | Configure prefabs| We will configure `mobile-paytable-content` and `mobile-rules-content` the same as configure for desktop. | [Configure prefabs Desktop](./info-pages#setup-prefabs-desktop) |
|
|
||||||
| 4 | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. |  |
|
|
||||||
| 5 | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | <img width="1500"/> |
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
|
|
||||||
If the game already have server, we will check config settings from server.
|
|
||||||
|
|
||||||
1. Run DevTools on Browser, on tab **Network** find message with **event** = "config".
|
|
||||||
|
|
||||||
2. Check values in **paytable** and compare it with what we've done.
|
|
||||||
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
Loading…
x
Reference in New Issue
Block a user