---
sidebar_position: 2
---

# Free Spin

## Overview
The **Free Spin (or Free Games) Feature** awards players a set number of spins without requiring additional bets. During these spins, players can still win prizes—often larger than in the base game—without spending any of their own credits.
![Free Spin Overview](./img/freespins/fs-trigger.jpg)


## Implementation Guide

### Prepare Assets

| Component Type         | Description                                       | Visual |
|------------------------|---------------------------------------------------|--------|
| **Core Components**    | Locate the prefabs from the core package.         | ![Core Prefabs](./img/freespins/freespin-prefabs-core.png) |
| **Game-Specific Components** | Prefabs are already present in the main game scene. | ![Game Prefabs](./img/freespins/freespin-prefabs-game.png) |


### Setup

#### Step 1: Configure Animation Provider

- Add Free Spin background animation in **Animation Provider**.

![Add Animation](./img/freespins/add-anim-background.png)

#### Step 2: Set Display Parameters

- Configure **landscape** and **portrait** modes:

![Landscape Background](./img/freespins/set-background-freespin-landscape.png)  
![Portrait Background](./img/freespins/set-background-freespin-portrait.png)

#### Step 3: Asset Example

![Background Assets](./img/freespins/assets-freespin-background.png)

---

#### Main Scene Structure

Your scene should include the following nodes:

- **Trigger**
- **Retrigger**
- **Win**

![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png)

---

#### Component Configuration

##### 1. Free Spin Trigger

- Add fonts and textures for Free Spin trigger.

![Trigger](./img/freespins/trigger-freespin.png)

##### 2. Free Spin Retrigger

- Add fonts and textures to show retrigger effect.

![Retrigger](./img/freespins/retrigger-freespin.png)

##### 3. Free Spin Win

- Add congratulations font and texture.

![Win](./img/freespins/win-freespin.png)

:::tip Best Practice
Follow the visual and font flow as defined by your game's design system.
:::

---

#### Free Spins Count Box

| Step | Description | Image |
|------|-------------|-------|
| 1    | Locate prefab in Core: `freespins-count-box` | ![Core Prefab](./img/freespins/find-freespin-box.png) |
| 2    | Add the prefab to main game scene | ![In Scene](./img/freespins/game-freespin-box.png) |
| 3    | Desktop / Mobile | ![mode mobile](./img/freespins/both-mode-mobile.png) 

![Assets](./img/freespins/assets-freespin-count.png) 

**Asset Mapping:**

| Asset Name | Node/Preference Name |
|------------|----------------------|
| `box-freespin` |     `bg`         |
| `freespins`    | `freespins`      |

---

#### Sidebands (Optional)

- Optional visual element, commonly used in classic or legacy slot designs.

![Sidebands](./img/freespins/freespin-sideband.png)

**Setup Instructions:**

![Sideband Assets](./img/freespins/assets-freespind-sideband.png)

**Asset Mapping:**

| Asset Name | Node/Preference Name |
|------------|----------------------|
| `anim-free-sideband-static` | `particle-free-sideband` |
| `sideband-back`            | `sideband-back`          |
| `sideband`                 | `sideband`               |
| `sideband-shine`           | `sideband-shine`         |
| `sideband-static`          | `liquid`                 |
| `indicator-static`         | `indicator-static`       |

---

#### Transition Effects (Optional)

- These transitions create visual polish between game phases.

![Transition Setup](./img/freespins/setup-transition.png)

Steps:

1. Add transition animation to the **Animation Provider**.
2. Match the animation name with the correct node.

**Example Result:**

![Transition Result](./img/freespins/fs-transition.jpg)

---

## Final Result Examples

| Phase | Image |
|-------|-------|
| Trigger | ![Trigger](./img/freespins/fs-trigger.jpg) |
| Active Scene | ![Scene](./img/freespins/fs-scene.jpg) |
| Completion | ![Congrats](./img/freespins/fs-congra.jpg) |