add setup info pages
@ -343,77 +343,6 @@ The `helper-paint-color-ui-mobile.js` component is a customizable color painter
|
||||
|
||||
---
|
||||
|
||||
## Setup Background
|
||||
|
||||
Background overview:
|
||||
|
||||
| | Desktop | Mobile |
|
||||
|:-:|--------------|---------|
|
||||
|**Background Landscape**<br/>|<br/>|<br/>|
|
||||
|**Background Portrait**<br/>||<br/>|
|
||||
|
||||
**Background landscape** use for Desktop and Mobile landscape.
|
||||
|
||||
**Background portrait** only use for Mobile portrait.
|
||||
|
||||
### 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|
|
||||
|
||||
### Background Landscape
|
||||
|
||||
We use sprite frame background for landscape from prepared assets.
|
||||
|
||||
|
||||
|
||||
### Background Portrait
|
||||
|
||||
We use sprite frame background for mobile from prepared assets.
|
||||
|
||||
|
||||
|
||||
### Background Animation
|
||||
|
||||
If the game have design animation for background, we will do this step.
|
||||
|
||||
1. Using hepler to generate animation from prepared assets
|
||||
|
||||
|
||||
|
||||
|
||||
2. We have the result as below, and continue setup 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.
|
||||
|
||||
|
||||
|
||||
|
||||
3. Add animation background with component below:
|
||||
|
||||
**Animation background landscape**
|
||||
|
||||
- Create **Empty Node** with name **anim-background-main-game**.
|
||||
- Add **animation-play-on-anable** with animation name in **Animation Provider**.
|
||||
- Add **background-scaler** resize with screen resolution.
|
||||
|
||||
|
||||
|
||||
**Animation background 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-anable** with animation name in **Animation Provider**.
|
||||
- Add **portrait-anim-background-scaler** resize with screen resolution.
|
||||
|
||||
|
||||
|
||||
## Setup Popup Panel
|
||||
|
||||
### Overview
|
||||
|
||||
@ -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
|
||||
81
docs/02-setup-main-game/05-main-scene/09-info-pages.md
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
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 Page 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 |  |
|
||||
|
||||
### desktop-info-panel
|
||||
|
||||
Change color `page-background`, `menu-header-background` follow the game design.
|
||||
|
||||
|
||||
|
||||
### desktop-paytable-content
|
||||
|
||||
- Paytable: Consist **Item with Payout** and **Item with Description**
|
||||
|
||||
 
|
||||
|
||||
| Action | Item with Payout | Item with Description|
|
||||
| ------ | :--------------: | :------------------: |
|
||||
| Setup Item with **Name** and **Odds** follow the game design. |  |  |
|
||||
| Setup sprite frame `item-display` same name with Item from prepared assets. |  |  |
|
||||
| Change color **odds value** follow the game design. |  ||
|
||||
| Change **description** follow the game design. | |  |
|
||||
|
||||
- Feature Game: Depending on each game, there will be different features. Includes of 3 parts
|
||||
- Title : Change Text and Color follow the game design.
|
||||
- Image : Use from prepared assets.
|
||||
- Description: Change Text follow the game design.
|
||||
|
||||
| Overivew | Configure |
|
||||
| :--------------: | :------------------: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
### desktop-rules-content
|
||||
|
||||
1. Add new Node is child of `lines` name `lines-image` with **Sprite** Component
|
||||
2. Use sprite frame **lines** from prepared assets.
|
||||
3. Description: Change Text follow the game design.
|
||||
|
||||
| Overivew | Configure |
|
||||
| :--------------: | :------------------: |
|
||||
|  |  |
|
||||
|
||||
## Setup Prefabs Mobile
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :-------------: |
|
||||
| 1 | Locate all template prefabs need for **Info Page Mobile** | Search for the `mobile-ui` prefab |  |
|
||||
| 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. |  |
|
||||
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 233 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 36 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 |