Update content

This commit is contained in:
Pham Huynh Duc Huy 2025-05-21 11:03:59 +07:00
parent a001c0159c
commit d7ed9e65fc
6 changed files with 22 additions and 20 deletions

View File

@ -7,7 +7,7 @@ sidebar_position: 2
Is the visual scenery that appears behind the gameplay elements. Is the visual scenery that appears behind the gameplay elements.
--- ---
## Overivew ## Overview
The background consists of 2 parts: **Landscape** and **Portrait**. The background consists of 2 parts: **Landscape** and **Portrait**.

View File

@ -12,7 +12,7 @@ sidebar_position: 5
## Implementation ## Implementation
### Prepare Asssets ### Prepare Assets
#### In Core #### In Core
@ -141,7 +141,3 @@ Set the target node where each win point label appears and define its size and o
:::tip :::tip
- **Position And Size**: Follow Game Design. - **Position And Size**: Follow Game Design.
::: :::
## Game Result Examples
![Overview](../img/05-main-scene/win-point-on-reel/win-point-result.png)|

View File

@ -168,8 +168,3 @@ Place animated assets in the following directories:
:::tip :::tip
Customize font styles based on each game's design. Customize font styles based on each game's design.
::: :::
## Game Result Example
The game result display for Special Wins should match the style and format shown in the Overview section.
🔗 [Game Result Example](/docs/setup-main-game/main-scene/special-win#overview)

View File

@ -13,7 +13,9 @@ Provides players with detailed information about each item in the game.
![Item Description Overview](./img/07-item-description/overview.png) ![Item Description Overview](./img/07-item-description/overview.png)
## Prepare the assets ## Implementation
### Prepare Assets
| Assets | Description | | Assets | Description |
|--------|-------------| |--------|-------------|
| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-1.png) | Used to Setup the background. | | ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-1.png) | Used to Setup the background. |
@ -21,16 +23,16 @@ Provides players with detailed information about each item in the game.
| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-3.png) | Used to Setup the animation symbol. | | ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-3.png) | Used to Setup the animation symbol. |
| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-4.png) | Used to Setup the payout/description. | | ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-4.png) | Used to Setup the payout/description. |
## Setup Prefabs Item Description ### Setup
| Step | Action | Description | Image Reference | | Step | Action | Description | Image Reference |
| :--: | :----- | :---------- | :-------------: | | :--: | :----- | :---------- | :-------------: |
| 1 | Locate all template prefabs needed for the **Item Description** | Search for the `template-item-description` prefab. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) | | 1 | Locate all template prefabs needed for the **Item Description** | Search for the `template-item-description` prefab. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) |
| 2 | Clone assets| Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-2.png) | | 2 | Clone assets| Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-2.png) |
### item-description-small #### item-description-small
Setup the `item-description-small` prefab for items have a win payout: Setup the `item-description-small` prefab for items have only win payout:
![Locate Prefabs](./img/07-item-description/setup-item-small-overview.png) ![Locate Prefabs](./img/07-item-description/setup-item-small-overview.png)
@ -42,7 +44,7 @@ Provides players with detailed information about each item in the game.
| 4 | - Adjust **Color**, **Font** and **Font Size** in `multi-x...` and `oods-x...` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.| ![Locate Prefabs](./img/07-item-description/setup-item-small-4.png) | | 4 | - Adjust **Color**, **Font** and **Font Size** in `multi-x...` and `oods-x...` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.| ![Locate Prefabs](./img/07-item-description/setup-item-small-4.png) |
### item-description-no-odds #### item-description-no-odds
Setup the `item-description-no-odds` prefab for items that have a description but no win payout: Setup the `item-description-no-odds` prefab for items that have a description but no win payout:
![Locate Prefabs](./img/07-item-description/setup-item-no-odds-overview.png) ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-overview.png)
@ -54,7 +56,7 @@ Provides players with detailed information about each item in the game.
| 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-3.png) | | 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-3.png) |
| 4 | - Set the **String** and adjust **Color**, **Font** and **Font Size** in the `description` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-4.png) | | 4 | - Set the **String** and adjust **Color**, **Font** and **Font Size** in the `description` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-4.png) |
### item-description-big #### item-description-big
Setup the `item-description-big` prefab for items that include both a win payout and a description: Setup the `item-description-big` prefab for items that include both a win payout and a description:
![Locate Prefabs](./img/07-item-description/setup-item-big-overview.png) ![Locate Prefabs](./img/07-item-description/setup-item-big-overview.png)

View File

@ -3,12 +3,18 @@ sidebar_position: 10
--- ---
# Bottom Bar UI (Desktop) # Bottom Bar UI (Desktop)
The bottom bar UI on desktop provides a functional interface for gameplay control
---
### Overview ### Overview
- Full bottom bar with all controls visible - Full bottom bar with all controls visible
- Horizontal layout maximizing screen width - Horizontal layout maximizing screen width
![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png) ![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png)
## Implementation
### Step 1: Set Up Prefab Editor ### Step 1: Set Up Prefab Editor
| Step | Action | image | | Step | Action | image |

View File

@ -2,6 +2,9 @@
sidebar_position: 11 sidebar_position: 11
--- ---
# Mobile UI Panel # Mobile UI Panel
The Mobile UI provides a functional interface for gameplay control
---
### Overview ### Overview
The mobile interface adapts to both landscape and portrait orientations: The mobile interface adapts to both landscape and portrait orientations:
@ -11,7 +14,7 @@ The mobile interface adapts to both landscape and portrait orientations:
| Landscape | ![Mobile Landscape](../img/05-main-scene/menu-landscape.png) | | Landscape | ![Mobile Landscape](../img/05-main-scene/menu-landscape.png) |
| Portrait | ![Mobile Portrait](../img/05-main-scene/menu-portrait.png) | Portrait | ![Mobile Portrait](../img/05-main-scene/menu-portrait.png)
## Implementation
### Step 1: Set Up Prefabs ### Step 1: Set Up Prefabs
| Step | Action | Description | Image Reference | | Step | Action | Description | Image Reference |