---
sidebar_position: 16
---

# Idle Animation

## Overview
The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience.

| Static Preview | Animated Preview |
|--------|-------------|
| ![Idle Static](./img/16-idle-animation/overview.png) | ![Idle Animation](./img/16-idle-animation//overview.gif) |


## Prepare the assets

| Assets | Description |
|--------|-------------|
| ![Static Asset](./img/16-idle-animation/prepare-assets-1.png) | Static sprite frame for the idle state. |
| ![Animation Asset](./img/16-idle-animation/prepare-assets-2.png) | Animation assets for the idle animation. |

## Setup Idle Animation

### Configure Settings

        Create a script to register the idle animation components with the dependency injection container.
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
var BaseSlottySetting = p4fslot.require('slotty-setting');
var DIContainer = p4fcore.require('di-container');

BaseSlottySetting.prototype._registerInjection = function () {
    DIContainer.Register('cellItemRender', require('idle-cell-item-render'));
    DIContainer.Register('idleAnimationHandler', require('idle-animation-handler'));
};
```

### Setup Animations
1. Using hepler to generate animation using the prepared assets

    ![Background Setup Helper Anim](./img/16-idle-animation/setup-anim-helper-1.png)
    ![Background Setup Helper Anim](./img/16-idle-animation/setup-anim-helper-2.png)

2. Configure Spine Animation
    - Set **Is Loop** ✅.
    - Setup the **Static Sprite Frame** using the prepared assets.

    ![Background Setup Animation](./img/16-idle-animation/setup-anim-1.png)
### Configure Scene

1. **Locate Prefab**:
   - Search for the `idle-animation-panel` prefab.
2. **Add to Scene**:
   - Drag the prefab into the main scene.
3. **Generate Panel**:
   - Click **Generate Panel** to set up the animation panel.
   -![Locate Prefabs](./img/16-idle-animation/configure-scene-1.png)

:::warning
When using prefabs directly from `core-assets`, convert them to a **Regular Node** to avoid reference issues.

![Locate Prefabs](./img/16-idle-animation/configure-scene-warning.png)
:::

**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.