---
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: Configure Display

- **landscape**:

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

- **portrait**:

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

#### Step 3: Asset Example

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

---

#### Main Scene Structure Free Spins

Your scene should include the following nodes:

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

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

|      Property            | Description                                               |
|------------------------- |----------------------------------------------------------|
| `transitionStart`        | Triggers the show animation when Free Spins start.<br/>Default: `null`. |
| `transitionStop`         | Triggers the return animation to the base game.<br/>Default: `null`.    |
| `nodeActivate`           | Maintains the visual state during Free Spins.             |
| `freeSideBandContainer`  | Activates the Free Spins side band visual.                |

---

#### Component Configuration

##### Trigger and Retrigger Setup

Configure animations for both trigger and retrigger.

![content](./img/freespins/add-anim-freespin.png)               
![content](./img/freespins/add-anim-content.png)

| Node Name | Purpose                                          | Location in Core Package                                   |
|-----------| ------------------------------------------------ | ---------------------------------------------------------- |
| `content` | Zoom-in and zoom-out animation | `assets/core-assets/slotty-core/packages/feature-game/animations` |

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

|       Property         |      Description          |
|------------------------|---------------------------|
| `durationPresentation` |  Specifies how long (in seconds) the animation trigger plays before auto-stopping  |

![Effect Example](./img/freespins/effect-explosive.png)

| Prefab Name | Purpose                                          | Location in Core Package                                   |
| ----------- | ------------------------------------------------ | ---------------------------------------------------------- |
| `explosive` | Background animation effect triggered by numbers | `assets/core-assets/hyper-core/packages/explosive/prefabs` |

![particles](./img/freespins/textture-particles.png)
![particles](./img/freespins/set-particles-scale.png)

| Node Name   | Purpose                                                                               | Location in Core Package                                    |
|-------------|---------------------------------------------------------------------------------------|-------------------------------------------------------------|
| `particles` | - Particle effects around title and number triggers.<br/>- Set scale to `1` for visibility | `assets/core-assets/slotty-core/packages/present/particles` |

:::tip
Set up the **present freespin retrigger** in the same way as the **present freespin trigger**.
:::

##### 1. present freespin trigger
    
Add fonts and textures for Free Spin trigger.

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

##### 2. present freespin retrigger

Add fonts and textures to show retrigger effect.

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

##### Add Font

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

#### 3. Present Free Spin Win

**Free Spin Win Setup**

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

| Property                | Description                                                                                   |
|-------------------------|-----------------------------------------------------------------------------------------------|
| `content`               | Node for displaying the win animation content.                                                |
| `durationPresentWin`    | Duration (in seconds) that the win presentation is shown.                                     |
| `animation`             | Animation controller for the win presentation.<br/>Located at: `assets/core-assets/slotty-core/packages/feature-game/animations` |
| `clipStartPresentation` | Animation clip played when the win presentation starts.                                       |
| `clipStopPresentation`  | Animation clip played when the win presentation ends.                                         |
| `allowPresentWinPoint`  | Enables the display of win points during the presentation.                                    |
| `durationCountPoint`    | Duration (in seconds) for counting up win points.                                             |
| `lblTotalWinPoint`      | Label node showing the total win points.                                                      |
| `lblTotalFreeSpinCount` | Label node showing the total number of free spins awarded.                                    |

- Add congratulatory font and texture for the win display.

![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 the `freespins-count-box` prefab in the Core package. | ![Core Prefab](./img/freespins/find-freespin-box.png) |
| 2    | Add the `freespins-count-box` prefab to your main game scene. | ![In Scene](./img/freespins/game-freespin-box.png) |
| 3    | Verify appearance in both desktop and mobile modes. | ![mode mobile](./img/freespins/both-mode-mobile.png) |

##### Platform Setup

| Platform | Node Name                | Component to Add            | Example Image                                         |
|----------|--------------------------|-----------------------------|-------------------------------------------------------|
| Desktop  | `freespins-box-desktop`  | `Platform-ui-controller`    | ![Desktop Controller](./img/freespins/add-script-freespin-counter.png) |
| Mobile   | `freespins-box-mobile`   | `Platform-ui-controller`    | ![Mobile Controller](./img/freespins/add-script-freespin-counter-mobile.png) |

##### Asset Setup

| Platform | Asset Path                                                        | Example Image                                                                 |
|----------|-------------------------------------------------------------------|-------------------------------------------------------------------------------|
| Desktop  | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Desktop Assets](./img/freespins/freespin-counter-box-desktop.png) |
| Mobile   | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`  | ![Mobile Assets](./img/freespins/freespin-counter-box-mobile.png)  |
| Common   | Freespins Background                                             | ![common Asset](./img/freespins/freespin-counter-box-common.png) |

##### Asset Font

![common Asset](./img/freespins/set-font-freespin-count-box.png) 

---

#### Sidebands (Optional)

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

| Overview                                   | Setup                                        |
|-------------------------------------------|----------------------------------------------|
| ![Sidebands](./img/freespins/freespin-sideband.png) | ![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)

create new node and add `transition`, `transition-scaler` component.

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

| Property           | Description                                |
|--------------------|--------------------------------------------|
| `content`          | Target node for transition effects         |
| `animationName`    | Animation identifier/reference             |
| `sfxName`          | Sound effect identifier                    |
| `transitionFrame`  | Frame to trigger transition callback       |


##### Asset Setup

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

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


**add preferrence**

Configure preferences as needed for your transition.

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

**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) |