---
sidebar_position: 16
title: Free Round
description: Display and manage remaining free rounds in the game.
---

# Free Round

## Overview

- Handles the **display** and **logic** for tracking remaining free rounds in a slot game.  
- Supports both **desktop** and **mobile**, including animation and event handling.

| Orientation | Preview |
|-------------|---------|
| Desktop     | ![Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) |
| Mobile      | ![Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png)          |

---

## Implementation

### Prefab Location

#### In Core

| Path                                                                 | Example                                                                                  |
|---------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| `assets\core-assets\hyper-core\packages\freeround-count-box\prefabs` | <center>![Core Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png)</center> |

#### In Game

| Path                              | Example                                                                                           |
|-----------------------------------|---------------------------------------------------------------------------------------------------|
| `assets\game-assets\prefabs`      | <center>![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png)</center> |

### General Setup

![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-general.png) 

- Component that manages and displays the free rounds counter. 

![Copied Prefab](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png)

**(platform)**: Desktop / Mobile <span class="red-star">*</span>

| Property      | Description                              |
|---------------|------------------------------------------|
| `duration`    | Animation duration in seconds (fade In/Out) |
| `content`     | Container node for the counter           |
| `labelLeft`   | Label displaying remaining free rounds   |

---

### Platform Setup

#### Desktop

| Component                | Description                                                                                                   |
|--------------------------|---------------------------------------------------------------------------------------------------------------|
| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller)           |

![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png)

---

#### Mobile

| Component             | Description                                                                                                              |
|-----------------------|--------------------------------------------------------------------------------------------------------------------------|
| `Platform-ui-controller` | [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#Platform-ui-controller)                  |
| `UI Mobile Position`      | [UI Mobile Position](http://localhost:3000/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)     |

![Overview](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png)

### Font Setup

<table>
  <thead>
    <tr>
      <th style={{ width: "700px" }}>Preview</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><center>![Add Font](../img/05-main-scene/freeround-counter/add-font.png)</center></td>
    </tr>
  </tbody>
</table>

:::tip
   - **Position And Size**: Follow Game Design.
:::


## Game Result Examples

*To show the free round popup, make sure the main scene includes the popup panel.*               
<span class="red-star">*</span> More Detail: [Popup Panel](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)

|Platform|Popup|Action|Result|
|--------|-----|------|------|
|Desktop|![Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png)|
|Mobile|![Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png)|click → Start|![Add Font](../img/05-main-scene/freeround-counter/overview-freeround.png)|