---
sidebar_position: 9
---

# Info Pages

## Overview
**Info Pages** provide players with details about game rules, features, symbols, payout structures, and mechanics. They are divided into **Paytable** and **Rules** sections, with different layouts for Desktop and Mobile.

| Platform | Desktop | Mobile |
|----------|---------|--------|
| Paytable/Rules | ![Desktop 1](./img/09-info-pages/overview-desktop-1.png)<br/>![Desktop 2](./img/09-info-pages/overview-desktop-2.png)<br/>![Desktop 3](./img/09-info-pages/overview-desktop-3.png) | ![Mobile 1](./img/09-info-pages/overview-mobile-1.png)<br/>![Mobile 2](./img/09-info-pages/overview-mobile-2.png) |

## Asset Preparation
| Assets | Description |
|--------|-------------|
| ![Rules Asset](./img/09-info-pages/prepare-assets-1.png) | Used for **Rules** or RichText images. |
| ![Paytable Asset](./img/09-info-pages/prepare-assets-2.png) | Used for **Paytable** setup. |

## Desktop Setup
1. **Locate Template Prefabs**:
   - Search for the `desktop-hyper-info-panel` prefab.
   - ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-desktop-1.png)
2. **Clone Assets**:
   - Copy and paste to the game assets location, removing unnecessary prefixes.
   - ![Clone Prefabs](./img/09-info-pages/prepare-prefabs-desktop-2.png)

### desktop-info-panel
| Step | Action | Image Reference |
|------|--------|-----------------|
| 1 | Change **Color** in `page-background` per game design. | ![Step 1](./img/09-info-pages/configure-panel-1.png) |
| 2 | Change **Color** in `menu-header-background` per game design. | ![Step 2](./img/09-info-pages/configure-panel-2.png) |
| 3 | Update **Prefab** in `paytable-content` using prepared prefabs. | ![Step 3](./img/09-info-pages/configure-panel-3.png) |
| 4 | Update **Prefab** in `rules-content` using prepared prefabs. | ![Step 4](./img/09-info-pages/configure-panel-4.png) |

### desktop-paytable-content
- **Item with Payout**:
  - ![Paytable Payout](./img/09-info-pages/configure-paytable-1.png)
  - Steps:
    | Step | Action | Image Reference |
    |------|--------|-----------------|
    | 1 | Set **Item Name** and **Odds Items** per game design. | ![Step 1](./img/09-info-pages/configure-item-payout-1.png) |
    | 2 | Set **Sprite Frame** in `item-display` using prepared assets. | ![Step 2](./img/09-info-pages/configure-item-payout-2.png) |
    | 3 | Change **Color** in `multi-x...` and `odds-x...` per game design. | ![Step 3](./img/09-info-pages/configure-item-payout-3.png) |
    | 4 | Adjust **Font** and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. | ![Step 4](./img/09-info-pages/configure-item-payout-4.png) |

- **Item with Description**:
  - ![Paytable Description](./img/09-info-pages/configure-paytable-2.png)
  - Steps:
    | Step | Action | Image Reference |
    |------|--------|-----------------|
    | 1 | Set **Name** per game design. | ![Step 1](./img/09-info-pages/configure-item-description-1.png) |
    | 2 | Set **Sprite Frame** in `item-display` using prepared assets. | ![Step 2](./img/09-info-pages/configure-item-description-2.png) |
    | 3 | Change **String** in `description` per game design. | ![Step 3](./img/09-info-pages/configure-item-description-3.png) |

- **Feature Game**:
  - Configure based on game features (e.g., **FREESPIN BONUS**, **BONUS FEATURE**):
    - **Title**: Update **String** and **Color** in `freespins-bonus-title`.
    - **Image**: Set **Sprite Frame** in `freespins-bonus-image-...` using prepared assets.
    - **Description**: Update **String** in `freespins-bonus-description`.
  - ![Feature Overview](./img/09-info-pages/configure-feature-game-1.png)
  - ![Feature Configure](./img/09-info-pages/configure-feature-game-2.png)
  - ![Feature Overview 2](./img/09-info-pages/configure-feature-game-3.png)
  - ![Feature Configure 2](./img/09-info-pages/configure-feature-game-4.png)

### desktop-rules-content
- Types: **Lines** or **Ways**.
- Steps:
  1. Set **Sprite Frame** in `lines-image` using prepared assets.
  2. Change **Color** in `lines-title` per game design.
  3. For **Ways**:
     - Update **String** in `lines-title` to **WIN WAYS/DYNAWAYS**.
     - Enable and update **String** in `lines-description`.
  - ![Rules Overview](./img/09-info-pages/configure-rules-1.png)
  - ![Rules Configure](./img/09-info-pages/configure-rules-2.png)
  - ![Rules Overview 2](./img/09-info-pages/configure-rules-3.png)
  - ![Rules Configure 2](./img/09-info-pages/configure-rules-4.png)

## Mobile Setup
1. **Locate Template Prefabs**:
   - Search for the `mobile-ui` prefab.
   - ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-1.png)
2. **Clone Assets**:
   - Copy and paste to the game assets location, removing unnecessary prefixes.
   - ![Clone Prefabs](./img/09-info-pages/prepare-prefabs-mobile-2.png)
3. **Configure Prefabs**:
   - Configure `mobile-paytable-content` and `mobile-rules-content` as described in [Desktop Setup](#desktop-setup).
4. **Spawner Positions**:
   - For **Paytable**: Use `mobile-paytable-content-spawner` in the `mobile-ui` prefab.
     - ![Paytable Spawner](./img/09-info-pages/configure-prefab-mobile-1.png)
   - For **Rules**: Use `mobile-rule-content-spawner` in the `mobile-ui` prefab.
     - ![Rules Spawner](./img/09-info-pages/configure-prefab-mobile-2.png)

**Tip**:
- If the game has a server, verify config settings:
  1. Open DevTools, navigate to the **Network** tab, and find the message with **event** = "config".
  2. Compare **paytable** values with the configured setup.
  - ![Config Settings](./img/09-info-pages/prepare-setting-config.png)