2025-05-16 17:59:12 +07:00

104 lines
4.3 KiB
Markdown

---
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
|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)|
<span class="red-star">*</span> More Detail: [Popup Panel](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel)