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

---
## Overview

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

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

### desktop-info-panel

    | 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) |
        | 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) ||
        | 4 | Update **Prefab** in `rules-content` from prepared prefabs.| ![Locate Prefabs](./img/09-info-pages/configure-panel-4.png) |

### desktop-paytable-content

- Paytable: Consist **Item with Payout** and **Item with Description**.

    - Setup **Item with Payout**:
     
        ![Locate Prefabs](./img/09-info-pages/configure-paytable-1.png) 

        | 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) |
        | 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 `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 `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**:
    
        ![Locate Prefabs](./img/09-info-pages/configure-paytable-2.png) 

        | Step | Action | Image Reference |
        | :--: | :----- | :-------------: |
        | 1 | Setup Item with **Name** follow the game design. | <img width="1250"/> ![Locate Prefabs](./img/09-info-pages/configure-item-description-1.png) |
        | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-description-2.png) |
        | 3 | Change **String** in `description` follow the game design. |  ![Locate Prefabs](./img/09-info-pages/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-pages/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-2.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
    There are 2 types: **Lines** and **Ways**.
    1. Setup **Sprite Frame** in `lines-image` from prepared assets.
    2. Change **Color** in `lines-title` follow game desgin.
    3. If the game is **Ways**:
        - Change **String** in `lines-title` is **WIN WAYS/DYNAWAYS**.
        - Enable and update **String** in `lines-description`.

| Overivew | Configure |
| :--------------: | :------------------: |
| ![Locate Prefabs](./img/09-info-pages/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-2.png) |
| ![Locate Prefabs](./img/09-info-pages/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-4.png) |

## 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"/>![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) |
| 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) |
| 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) |

:::tip 

If the game already have server, we will check config settings from server.

1. Run DevTools on Browser, on tab **Network** find message with **event** = "config".

2. Check values in **paytable** and compare it with what we've done.

![Info Page Prepare Assets](./img/09-info-pages/prepare-setting-config.png)
:::