add setup idle animation

docs/02-setup-main-game/05-main-scene/16-idle-animation.md

@@ -0,0 +1,57 @@
+---
+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)
+:::