---
sidebar_position: 19
title: Gamble
description: Display Gamble
---

# Gamble

## Overview

The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a card’s color. It is supported across desktop and mobile platforms in both landscape and portrait orientations.

| 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 gamble 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#setup-steps)

  - `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#setup-steps)

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