2025-05-21 14:36:53 +07:00

98 lines
5.5 KiB
Markdown

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