--- 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)
![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 Pages 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.
- On tab Console, find message with **event** = `config`.
- 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 | Step | Action | Image Reference | | :--: | :----- | :-------------: | | 1 | Change **Color** in `page-background` follow the game design..| ![Locate Prefabs](./img/09-info-page/configure-panel-1.png) | | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-panel-2.png) | | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-page/configure-panel-3.png) || | 4 | Update **Prefab** in `rules-content` from prepared prefabs..| ![Locate Prefabs](./img/09-info-page/configure-panel-4.png) | ### desktop-paytable-content - Paytable: Consist **Item with Payout** and **Item with Description** ![Locate Prefabs](./img/09-info-page/configure-paytable-1.png) ![Locate Prefabs](./img/09-info-page/configure-paytable-2.png) - Setup **Item with Payout** | Step | Action | Image Reference | | :--: | :----- | :-------------: | | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| ![Locate Prefabs](./img/09-info-page/configure-item-payout-1.png) | | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-2.png) | | 3 | Change **Color** in
`multi-x...`
`oods-x...`
follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-payout-3.png) || | 4 | - Change **Font** and **Font Size** in
`multi-x...`
`oods-x...`
follow the game design.
- 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-page/configure-item-payout-4.png) | - Setup **Item with Description** | Step | Action | Image Reference | | :--: | :----- | :-------------: | | 1 | Setup Item with **Name** follow the game design. | ![Locate Prefabs](./img/09-info-page/configure-item-description-1.png) | | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-page/configure-item-description-2.png) | | 3 | Change **String** in `description` follow the game design. | ![Locate Prefabs](./img/09-info-page/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-page/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-2.png) | | ![Locate Prefabs](./img/09-info-page/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-page/configure-feature-game-4.png) | ### desktop-rules-content There are 2 types: **LINES** and **DYNAWAYS** 1. Setup **Sprite Frame** in `lines-image` from prepared assets. 2. Change **Color** in `lines-title` follow game desgin. 3. If the game is **Dynaways** - Change **String** in `lines-title` is **DYNAWAYS**. - Enable and update **String** in `lines-description`. | Overivew | Configure | | :--------------: | :------------------: | | ![Locate Prefabs](./img/09-info-page/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-page/configure-rules-2.png) | | ![Locate Prefabs](./img/09-info-page/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-page/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 |![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) |