---
sidebar_position: 2
---

# Free Spins Implementation Guide

## Overview
The Free Spins feature provides bonus rounds where players:
- Receive complimentary spins
- Can win prizes without additional bets
- Often encounter enhanced winning opportunities

![Free Spins Overview](./img/freespins/fs-trigger.jpg)

## Setup Process

### 1. Asset Configuration

#### Core Components
Required prefabs from core package:
![Core Assets](./img/freespins/freespin-prefabs-core.png)

#### Game-Specific Assets
Implementation prefabs:
![Game Assets](./img/freespins/freespin-prefabs-game.png)

### 2. Background Configuration

1. **Animation Setup**
   ```typescript
   // Add to Animation Provider
   animationProvider.addAnimation('freespin-background');
   ```
   ![Animation Config](./img/freespins/add-anim-background.png)

2. **Display Modes**
   | Mode | Configuration |
   |------|---------------|
   | Landscape | ![Landscape](./img/freespins/set-background-freespin-landscape.png) |
   | Portrait | ![Portrait](./img/freespins/set-background-freespin-portrait.png) |

### 3. Feature Implementation

#### Scene Structure
Required components:
- Trigger Display
- Retrigger Handler
- Win Presentation

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

#### Component Setup

1. **Trigger Configuration**
   - Add assets:
     - Fonts
     - Textures
   ![Trigger Setup](./img/freespins/trigger-freespin.png)

2. **Retrigger Configuration**
   - Configure display elements
   ![Retrigger Setup](./img/freespins/retrigger-freespin.png)

3. **Win Display**
   - Set congratulations assets
   ![Win Setup](./img/freespins/win-freespin.png)

:::tip Configuration Guidelines
Maintain consistency with game design specifications for:
- Font selection
- Visual elements
- Animation timing
:::

### 4. Optional Enhancements

#### Sidebands
Classic slot visual enhancement:
```typescript
interface SidebandConfig {
    particleEffect: 'particle-free-sideband';
    background: 'sideband-back';
    foreground: 'sideband';
    shine: 'sideband-shine';
    liquid: 'sideband-static';
    indicator: 'indicator-static';
}
```
![Sideband Implementation](./img/freespins/freespin-sideband.png)

#### Transitions
Polish between game states:
1. Configure animation provider
2. Set node mappings
![Transition Config](./img/freespins/setup-transition.png)

## Implementation Examples

### Feature Flow
1. **Trigger**
   ![Trigger Example](./img/freespins/fs-trigger.jpg)
2. **Active State**
   ![Active Example](./img/freespins/fs-scene.jpg)
3. **Completion**
   ![Complete Example](./img/freespins/fs-congra.jpg)