add setup info pages

This commit is contained in:
Nguyen Ngoc Thanh 2025-05-15 15:18:47 +07:00
parent 72a4319c8f
commit 4354dca1cd
39 changed files with 63 additions and 27 deletions

View File

@ -4,8 +4,25 @@ sidebar_position: 7
# Item Description
> To be Add
Provides players with detailed information about each item of the game.
---
> To be Add
## Overview
![Item Description Overview](./img/07-item-description/overview.png)
## Prepare the assets
| Assets | Description |
|--------|-------------|
|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-1.png)|Used to setup background|
|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-2.png)|Used to setup for static symbol|
|![Info Page Prepare Assets](./img/07-item-description/prepare-assets-3.png)|Used to setup for animation symbol|
## Setup Prefabs Item Description
| Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :-------------: |
| 1 | Locate all template prefabs need for **Item Description** | Search for the `template-item-description` prefab | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) |
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-2.png) |

View File

@ -27,55 +27,74 @@ Info Pages (Information Pages) provide players with essential details about how
| Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
| 1 | Locate all template prefabs need for **Info Page Desktop** | Search for the `desktop-hyper-info-panel` prefab | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-1.png) |
| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-1.png) |
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-desktop-2.png) |
| 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 | ![Info Page Prepare Assets](./img/09-info-page/prepare-setting-config.png) |
| 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"/> ![Info Page Prepare Assets](./img/09-info-page/prepare-setting-config.png) |
### desktop-info-panel
Change color `page-background`, `menu-header-background` follow the game design.
![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-1.png)
| Step | Action | Image Reference |
| :--: | :----- | :-------------: |
| 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/>![Locate Prefabs](./img/09-info-page/configure-panel-1.png) |
| 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-panel-2.png) |
| 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-page/configure-panel-3.png) ||
| 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-page/configure-panel-4.png) |
### desktop-paytable-content
- Paytable: Consist **Item with Payout** and **Item with Description**
![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-3.png) ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-4.png)
![Locate Prefabs](./img/09-info-page/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-page/configure-paytable-2.png)
| Action | Item with Payout | Item with Description|
| ------ | :--------------: | :------------------: |
| Setup Item with **Name** and **Odds** follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-5.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-8.png) |
| Setup sprite frame `item-display` same name with Item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-6.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-9.png) |
| Change color **odds value** follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-7.png) ||
| Change **description** follow the game design. | | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-10.png) |
- Setup **Item with Payout**
| Step | Action | Image Reference |
| :--: | :----- | :-------------: |
| 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/> ![Locate Prefabs](./img/09-info-page/configure-item-payout-1.png) |
| 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-2.png) |
| 3 | Change **Color** in<br/> `multi-x...`<br/>`oods-x...`<br/> follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-3.png) ||
| 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.| ![Locate Prefabs](./img/09-info-page/configure-item-payout-4.png) |
- 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.
- Setup **Item with Description**
| Step | Action | Image Reference |
| :--: | :----- | :-------------: |
| 1 | Setup Item with **Name** follow the game design. | <img width="1250"/> ![Locate Prefabs](./img/09-info-page/configure-item-description-1.png) |
| 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-description-2.png) |
| 3 | Change **String** in `description` follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-description-3.png) |
- 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 |
| :--------------: | :------------------: |
| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-11.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-12.png) |
| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-13.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-14.png) |
| ![Locate Prefabs](./img/09-info-page/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-2.png) |
| ![Locate Prefabs](./img/09-info-page/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-4.png) |
### 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.
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 |
| :--------------: | :------------------: |
| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-15.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-16.png) |
| ![Locate Prefabs](./img/09-info-page/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-2.png) |
| ![Locate Prefabs](./img/09-info-page/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-4.png) |
## Setup Prefabs Mobile
| Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :-------------: |
| 1 | Locate all template prefabs need for **Info Page Mobile** | Search for the `mobile-ui` prefab | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-1.png) |
| 1 | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab |<img width="2000"/>![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-1.png) |
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-page/prepare-prefabs-mobile-2.png) |
| 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. | ![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-1.png) |
| 5 | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-2.png) |
| 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"/>![Locate Prefabs](./img/09-info-page/configure-prefab-mobile-2.png) |

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB