---
sidebar_position: 16
---
# Idle Animation

---

## Overview

![Locate Prefabs](./img/16-idle-animation/overview.png) ![Major](./img/16-idle-animation/overview.gif)

## Prepare the assets

| Assets | Description |
|--------|-------------|
| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-1.png) | Used to Setup the static sprite frame. |
| ![Info Page Prepare Assets](./img/16-idle-animation/prepare-assets-2.png) | Used to Setup the idle animation. |

## Setup Idle Animation

### Configure Settings

        Create the following script:
```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. Search for the `idle-animation-panel` prefab.
2. Drag the "prefab" into "scene".
3. Click "Generate Panel".

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

:::warning
When using **prefab** directly from **core-assets**, you should convert to **Regular Node**.

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