---
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 |
|:------:|:------:|
|![Background Overview Landscape](./img/09-info-page/overview-desktop-1.png)|![Background Overview Landscape](./img/09-info-page/overview-mobile-1.png)|
|![Background Overview Landscape](./img/09-info-page/overview-desktop-2.png)<br/>![Background Overview Landscape](./img/09-info-page/overview-desktop-3.png)|![Background Overview Portrait](./img/09-info-page/overview-mobile-2.png)|

## Prepare the assets
| Assets | Description |
|--------|-------------|
|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-1.png)|Used to setup **Rules** or image in RichText|
|![Info Page Prepare Assets](./img/09-info-page/prepare-assets-2.png)|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 | ![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) |

### 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)

### 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) 

| 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) |

- 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  |
| :--------------: | :------------------: |
| ![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) |

### 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  |
| :--------------: | :------------------: |
| ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-15.png) | ![Locate Prefabs](./img/09-info-page/configure-prefab-desktop-16.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) |
| 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) |