Merge pull request 'feature/add-jackpot-panel' (#40) from feature/add-jackpot-panel into develop
Reviewed-on: #40
@ -7,6 +7,7 @@ sidebar_position: 2
|
||||
Is the visual scenery that appears behind the gameplay elements.
|
||||
|
||||
---
|
||||
## Overivew
|
||||
|
||||
The background consists of 2 parts: **Landscape** and **Portrait**.
|
||||
|
||||
@ -18,25 +19,25 @@ The background consists of 2 parts: **Landscape** and **Portrait**.
|
||||
|**Background Landscape**<br/>|<br/>|<br/>|
|
||||
|**Background Portrait**<br/>||<br/>|
|
||||
|
||||
### 1. Prepare the assets
|
||||
## 1. Prepare the assets
|
||||
| | Assets | Description |
|
||||
|:-:|--------------|---------|
|
||||
|**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
|
||||
## 2. Setup Background Landscape
|
||||
|
||||
We use sprite frame background for landscape from prepared assets.
|
||||
|
||||
|
||||
|
||||
### 3. Setup Background Portrait
|
||||
## 3. Setup Background Portrait
|
||||
|
||||
We use sprite frame background for mobile from prepared assets.
|
||||
|
||||
|
||||
|
||||
### 4. Setup Background Animation
|
||||
## 4. Setup Background Animation
|
||||
|
||||
If the game have design animation for background, we will do this step.
|
||||
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Info Page
|
||||
|
||||
Info Page (Information Page) provides players with essential details about how the game works. It helps players understand the rules, features, symbols, payout structures, and other gameplay mechanics.
|
||||
|
||||
---
|
||||
|
||||
## Paytable
|
||||
|
||||
Shows the value of each symbol and how much players can win from different combinations.
|
||||
|
||||
## Special Feature
|
||||
|
||||
Describes bonus rounds, free spins, jackpots, or other special win features.
|
||||
|
||||
## Gamble Feature
|
||||
|
||||
The Gamble Feature is a special option that allows players to risk their recent winnings for a chance to multiply them.
|
||||
|
||||
## Game Rules
|
||||
|
||||
Explains the basic mechanics and objectives of the game.
|
||||
|
||||
## Winning Lines or Ways
|
||||
|
||||
This section shows the valid winning combinations or paylines.
|
||||
|
||||
> To be added
|
||||
100
docs/02-setup-main-game/05-main-scene/09-info-pages.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
---
|
||||
## Overivew
|
||||
|
||||
- **Desktop** consists Paytable and Rules in **Info Pages**.
|
||||
- **Mobile** is divided into 2 parts Paytable and Rules
|
||||
|
||||
|Desktop | Mobile |
|
||||
|:------:|:------:|
|
||||
|||
|
||||
|<br/>||
|
||||
|
||||
## Prepare the assets
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
||Used to setup **Rules** or image in RichText|
|
||||
||Used to setup **Paytable**|
|
||||
|
||||
## Setup Prefabs Desktop
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
|
||||
| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab |  |
|
||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
||||
| 3 | Get settings config| - Run DevTools on Browser.<br/>- On tab Console, find message with **event** = `config`.<br/>- Get values in context = `paytable` to setup for Item Payout with Item name and Odds | <img width="1500"/>  |
|
||||
|
||||
### desktop-info-panel
|
||||
|
||||
| Step | Action | Image Reference |
|
||||
| :--: | :----- | :-------------: |
|
||||
| 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/> |
|
||||
| 2 | Change **Color** in `menu-header-background` follow the game design. |  |
|
||||
| 3 | Update **Prefab** in `paytable-content` from prepared prefabs. |  ||
|
||||
| 4 | Update **Prefab** in `rules-content` from prepared prefabs..|  |
|
||||
|
||||
### desktop-paytable-content
|
||||
|
||||
- Paytable: Consist **Item with Payout** and **Item with Description**
|
||||
|
||||
 
|
||||
|
||||
- Setup **Item with Payout**
|
||||
|
||||
| Step | Action | Image Reference |
|
||||
| :--: | :----- | :-------------: |
|
||||
| 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<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design. |  ||
|
||||
| 4 | - Change **Font** and **Font Size** in<br/> `multi-x...`<br/>`oods-x...`<br/> 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
|
||||
There are 2 types: **LINES** and **DYNAWAYS**
|
||||
1. Setup **Sprite Frame** in `lines-image` from prepared assets.
|
||||
2. Change **Color** in `lines-title` follow game desgin.
|
||||
3. If the game is **Dynaways**
|
||||
- Change **String** in `lines-title` is **DYNAWAYS**.
|
||||
- Enable and update **String** in `lines-description`.
|
||||
|
||||
| Overivew | Configure |
|
||||
| :--------------: | :------------------: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
## Setup Prefabs Mobile
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :-------------: |
|
||||
| 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 do the same as configure for 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"/> |
|
||||
@ -1,11 +1,86 @@
|
||||
---
|
||||
sidebar_position: 15
|
||||
---
|
||||
|
||||
# Jackpot Setup
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
- **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.
|
||||
|
||||
| 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 |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Core Prefabs
|
||||
|
||||
- Use the prefabs located at:
|
||||
|
||||
|`assets/core-assets/jackpot-package/prefabs`||
|
||||
|--------------------------------------------|--------------------------------------------------------------------|
|
||||
|
||||
### Setup Steps
|
||||
|
||||
#### Desktop
|
||||
|
||||
- Add the jackpot prefab to your main scene.
|
||||
- Set its position to **(0, 0)**.
|
||||
|
||||
|
||||
|
||||
More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
|
||||
#### Mobile
|
||||
|
||||
- Configure the jackpot node for both landscape and portrait orientations.
|
||||
- Use `UI Mobile Position` for a responsive layout.
|
||||
|
||||
|
||||
|
||||
More info: [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
|
||||
|
||||
- Example using `Platform Node Spawner`:
|
||||
|
||||
|
||||
|
||||
More info: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
|
||||
### Result
|
||||
|
||||
- The jackpot panel works seamlessly across all platforms and orientations.
|
||||
|
||||
|
||||
|
||||
More info: [Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#node-spawner)
|
||||
|
||||
:::tip
|
||||
**Sibling Index Order:**
|
||||
| Node Name | Sibling Index | Notes |
|
||||
|----------------------------------------|---------------|---------------------------------------|
|
||||
| `jackpot-runner-panel-desktop-spawner` | Lowest | Usually at the bottom |
|
||||
| `container-jackpot-runner-mobile` | Middle | Between desktop and result panels |
|
||||
| `jackpot-result-panel-spawner` | Highest | Always on top <br />  |
|
||||
:::
|
||||
|
||||
|
||||
## Game Result Examples
|
||||
|
||||
| Win Tier | Example |
|
||||
|----------|------------------------------------------------------------------|
|
||||
| Grand |  |
|
||||
| Major |  |
|
||||
| Minor |  |
|
||||
| Mini |  |
|
||||
|
||||
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 233 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 701 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 175 KiB |
|
Before Width: | Height: | Size: 220 KiB |
|
Before Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 240 KiB |
|
After Width: | Height: | Size: 326 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 326 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 36 KiB |
@ -22,3 +22,27 @@ Use this configuration to control which prefabs appear based on the current plat
|
||||
|--------------------|----------------------|-----------------------------------------------|
|
||||
| **Desktop Toggle** | ✅ Enabled | Show node on desktop |
|
||||
| **Mobile Toggle** | ❌ Disabled | Hide node on mobile |
|
||||
|
||||
|
||||
## Node Spawner
|
||||
|
||||
Spawns a prefab at the same position as the original node and then removes the node.
|
||||
|
||||
#### Usage
|
||||
|
||||
- On scene start, the prefab replaces the node.
|
||||
1. Attach the script to a placeholder node.
|
||||
2. Set the `prefab` property in the Inspector.
|
||||
|
||||
|
||||
## UI Mobile Landscape / Portrait Position
|
||||
|
||||
Positions a node at a specific location when the device is in landscape / portrait mode on mobile.
|
||||
|
||||
#### Usage
|
||||
|
||||
1. Attach the script to your node.
|
||||
2. Set `default Position` in the Inspector.
|
||||
3. The position updates automatically in mobile landscape / portrait mode.
|
||||
|
||||
|
||||
BIN
docs/faqs/img/default-setting.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |