doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/16-idle-animation.md

sidebar_position

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

Prepare the assets

Assets	Description
	Static sprite frame for the idle state.
	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.

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

   

2. Configure Spine Animation

   • Set Is Loop ✅.
   • Setup the Static Sprite Frame using the prepared assets.

   

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. -

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

:::

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