2025-05-20 16:56:42 +07:00

90 lines
3.0 KiB
Markdown

---
sidebar_position: 18
title: Gamble
description: Display Gamble
---
# Gamble
## Overview
**Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color.
| Device Type | Preview |
|---------------|-----------------------------------------------------------------------------|
| Desktop | ![Desktop](../img/05-main-scene/gamble/gamble-desktop.png) |
| Landscape | ![Landscape](../img/05-main-scene/gamble/gamble-landscape.png) |
| Portrait | <center>![Portrait](../img/05-main-scene/gamble/gamble-portrait.png)</center>|
## Implementation
### Prepare Assets
#### Scene Hierarchy
Place the node in the following scene structure:
<table>
<thead>
<tr>
<th style={{ width: "500px" }}>Path</th>
<th style={{ width: "500px" }}>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
```
Canvas
└── [main-view]
└── [game-view]
└── [gamble-loader]
```
</td>
<td><center>![Scene Structure](../img/05-main-scene/gamble/gamble-structure.png)</center></td>
</tr>
</tbody>
</table>
---
### Setup
- In node component include:
![Scene Structure](../img/05-main-scene/gamble/gamble-component.png)
#### Components
**`gamble-loader`**
- A component for managing the loading and unloading of gambling scenes in a game.
| Property | Type | Description |
|------------------|-----------|---------------------------------------------------------|
| nodeBackground | cc.Node | Background node reference |
| sceneGamble | String | Name of the gamble scene |
| rootGambleName | String | Root node name for the gamble scene |
**`gamble-panel-mobile-scaler`**
#### Backgrounds
![Backgrounds](../img/05-main-scene/gamble/add-background-gamble.png)
1. Use background scenes for the gamble feature:
- `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#2-setup-background-landscape)
- `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#3-setup-background-portrait)
2. Attach the `orientation-ui-controller` component to both `gamble-background-landscape` and `gamble-background-portrait` nodes.
3. The `gamble-background-portrait` node has a dedicated component for portrait mode:
![gamble-background-portrait](../img/05-main-scene/gamble/gamble-portrait-component.png)
This component handles properties and logic specific to the portrait layout.
## Game Result Example
Make sure the main scene includes the Win Limit Panel.
🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#gamble-win-limit)