Compare commits

...

1 Commits

Author SHA1 Message Date
184c651068 add setup info pages 2025-05-15 16:12:11 +07:00

View File

@ -27,7 +27,7 @@ Info Pages (Information Pages) provide players with essential details about how
| Step | Action | Description | Image Reference | | Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: | | :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab | ![Locate Prefabs](./img/09-info-pages/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-pages/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-pages/prepare-prefabs-desktop-2.png) | | 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-pages/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 | <img width="1500"/> ![Info Page Prepare Assets](./img/09-info-pages/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-pages/prepare-setting-config.png) |
@ -35,27 +35,27 @@ Info Pages (Information Pages) provide players with essential details about how
| Step | Action | Image Reference | | Step | Action | Image Reference |
| :--: | :----- | :-------------: | | :--: | :----- | :-------------: |
| 1 | Change **Color** in `page-background` follow the game design..| <img width="400"/>![Locate Prefabs](./img/09-info-pages/configure-panel-1.png) | | 1 | Change **Color** in `page-background` follow the game design.| <img width="400"/>![Locate Prefabs](./img/09-info-pages/configure-panel-1.png) |
| 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-panel-2.png) | | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-panel-2.png) |
| 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-pages/configure-panel-3.png) || | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-pages/configure-panel-3.png) ||
| 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-pages/configure-panel-4.png) | | 4 | Update **Prefab** in `rules-content` from prepared prefabs.| ![Locate Prefabs](./img/09-info-pages/configure-panel-4.png) |
### desktop-paytable-content ### desktop-paytable-content
- Paytable: Consist **Item with Payout** and **Item with Description** - Paytable: Consist **Item with Payout** and **Item with Description**.
![Locate Prefabs](./img/09-info-pages/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-pages/configure-paytable-2.png) ![Locate Prefabs](./img/09-info-pages/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-pages/configure-paytable-2.png)
- Setup **Item with Payout** - Setup **Item with Payout**:
| Step | Action | Image Reference | | 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-pages/configure-item-payout-1.png) | | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| <img width="1000"/> ![Locate Prefabs](./img/09-info-pages/configure-item-payout-1.png) |
| 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-payout-2.png) | | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/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-pages/configure-item-payout-3.png) || | 3 | Change **Color** in `multi-x...` and `oods-x...` follow the game design. | ![Locate Prefabs](./img/09-info-pages/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-pages/configure-item-payout-4.png) | | 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.| ![Locate Prefabs](./img/09-info-pages/configure-item-payout-4.png) |
- Setup **Item with Description** - Setup **Item with Description**:
| Step | Action | Image Reference | | Step | Action | Image Reference |
| :--: | :----- | :-------------: | | :--: | :----- | :-------------: |
@ -77,10 +77,10 @@ Info Pages (Information Pages) provide players with essential details about how
| ![Locate Prefabs](./img/09-info-pages/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-4.png) | | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-4.png) |
### desktop-rules-content ### desktop-rules-content
There are 2 types: **LINES** and **DYNAWAYS** There are 2 types: **LINES** and **DYNAWAYS**.
1. Setup **Sprite Frame** in `lines-image` from prepared assets. 1. Setup **Sprite Frame** in `lines-image` from prepared assets.
2. Change **Color** in `lines-title` follow game desgin. 2. Change **Color** in `lines-title` follow game desgin.
3. If the game is **Dynaways** 3. If the game is **Dynaways**:
- Change **String** in `lines-title` is **DYNAWAYS**. - Change **String** in `lines-title` is **DYNAWAYS**.
- Enable and update **String** in `lines-description`. - Enable and update **String** in `lines-description`.
@ -93,8 +93,8 @@ Info Pages (Information Pages) provide players with essential details about how
| Step | Action | Description | Image Reference | | Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :-------------: | | :--: | :----- | :---------- | :-------------: |
| 1 | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab |<img width="2000"/>![Locate Prefabs](./img/09-info-pages/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-pages/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-pages/prepare-prefabs-mobile-2.png) | | 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-2.png) |
| 3 | Configure prefabs| We will do the same as configure for desktop. | | | 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. | ![Locate Prefabs](./img/09-info-pages/configure-prefab-mobile-1.png) | | 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-pages/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. | <img width="1500"/>![Locate Prefabs](./img/09-info-pages/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-pages/configure-prefab-mobile-2.png) |