Spine

Spine animation runtime for Ceramic engine.

This class provides full support for Spine 2D skeletal animations, including:

• Animation playback with mixing and blending
• Skin switching at runtime
• Slot customization and visibility control
• Hierarchical Spine composition (Spine within Spine)
• Attachment rendering (regions, meshes, clipping)
• Event handling and animation completion callbacks
• Tint black support for advanced coloring
• Bounding box hit testing

Basic Usage #

var spine = new Spine();
spine.spineData = assets.spine('hero');
spine.animation = 'walk';
spine.loop = true;
add(spine);

Advanced Features #

• Slot Control: Hide/show specific slots, or use slot whitelists
• Spine Binding: Attach child Spine animations to parent slots
• Custom Rendering: Hook into slot update events for custom drawing
• Performance: Automatic freezing when animations complete

Static Members #

Gets a globally unique slot index for the given slot name.

Global slot indices are consistent across all skeletons, unlike regular slot indices which vary by skeleton structure. This enables efficient slot operations across different Spine instances.

The same slot name always returns the same global index, making it ideal for slot blacklists, whitelists, and cross-skeleton references.

Instance Members #

Internal flag to know if render became dirty because of a skin change or a new animation was set.

Indicates whether any slot in the skeleton uses tint black coloring. This is automatically detected when the skeleton data is loaded. When true, a special shader is used to support dark tinting.

The horizontal origin point of the skeleton (0-1). Determines the pivot point for positioning and transformations. Default is 0.5 (center).

The vertical origin point of the skeleton (0-1). Determines the pivot point for positioning and transformations. Default is 0.5 (center).

Uniform scale factor applied to the entire skeleton. Use this to resize the skeleton without affecting individual bone scales. Default is 1.0 (original size).

Forces the use of tint black shader even if the skeleton doesn't require it. Enable this if you need dark tinting support for dynamically created attachments.

Map of slot indices to hide (blacklist). Slots in this map will not be rendered. Use Spine.globalSlotIndexForName() to get slot indices.

Map of slot indices to show (whitelist). When set, only slots in this map will be rendered. Use Spine.globalSlotIndexForName() to get slot indices.

Map of slot indices that are completely disabled. Disabled slots are skipped entirely during rendering. Use Spine.globalSlotIndexForName() to get slot indices.

Map of animation names to trigger animations. When an animation event matches a key in this map, the corresponding animation will be triggered.

Specifies which slot index to use for hit testing. Set to -1 (default) to use the visual's bounds instead. This allows precise hit detection using a specific slot's attachment.

When true, uses the first bounding box attachment for hit testing. This provides accurate collision detection for complex shapes. Overrides hitWithSlotIndex when enabled.

When true, forces rendering even when the visual is not visible. Useful for animations that need to continue updating off-screen.

Indicates whether this Spine instance is a child of another Spine animation. Child animations are managed and rendered by their parent.

Global tint color applied to the entire skeleton. Multiplied with individual slot and attachment colors. Default is WHITE (no tinting).

When true, forces an immediate render after calling animate(). Useful for ensuring the first frame is displayed immediately.

The Spine skeleton data containing all animations, bones, and slots. Setting this property loads a new skeleton and resets the animation state.

The current skin applied to the skeleton. Skins allow swapping attachment sets at runtime (e.g., different armor sets). Set to null to use the default skin.

The name of the currently playing animation. Setting this property starts the animation immediately. Set to null to clear the animation.

Array of animation names to play sequentially after the current animation. Each animation in the chain will play once before moving to the next. The finishCurrentAnimationChain event fires when all animations complete.

Whether the current animation should loop continuously. Only applies to the main animation, not animations in nextAnimations.

The Spine skeleton instance containing the current pose. Provides access to bones, slots, and attachments for runtime manipulation.

The skeleton data containing all setup pose information. This includes bones, slots, animations, and skins definitions.

The animation state managing animation playback and mixing. Use this for advanced animation control like layering multiple animations.

Configuration for animation mixing (crossfading) durations. Defines how long transitions between animations should take.

Controls automatic animation updates each frame. Set to false if you need manual control over update timing. Note: Use paused to pause animations, not this property.

Indicates whether the animation is currently paused or frozen. This is a combination of the paused and frozen states.

Enables automatic freezing when animations complete. Frozen animations stop updating to improve performance. The animation resumes when a new animation is set.

Pauses the animation at its current frame. The animation can be resumed by setting this to false.

Indicates whether the animation is frozen (auto-paused after completion). Frozen animations automatically resume when a new animation is set.

When true, resets the skeleton to setup pose when animations change. This ensures clean transitions between animations.

Sets the skeleton's origin point for positioning. Values are normalized (0-1) where 0.5 is center.

Starts playing an animation on the specified track.

This is the main method for controlling animation playback. Animations can be played on multiple tracks for layering effects (e.g., walk + shoot).

Forces an immediate render of the current animation state.

This bypasses normal update cycles and renders the skeleton immediately. Useful for capturing specific animation frames or ensuring visual updates.

Resets the skeleton to its setup pose.

This clears all animation data and returns bones and slots to their default positions and values as defined in the Spine project.

Updates the Spine animation by the given delta time.

This method is called automatically each frame if autoUpdate is true. It updates the animation state, applies it to the skeleton, and renders the result. Child Spine instances are updated by their parent.

Checks if the animation can be frozen for performance optimization.

An animation can freeze when all tracks have completed their non-looping animations. Frozen animations stop updating until a new animation is set.

Add a child visual. If the child is a spine animation, it will be managed by its parent and compositing becomes possible.

Registers a handler for updates to a specific slot by name.

This is more efficient than the general updateSlot event as it only fires for the specified slot, reducing overhead for complex skeletons.

Registers a handler for updates to a specific slot by global index.

This is the most efficient way to monitor specific slots, using pre-computed global indices for direct lookup.

Same as onUpdateSlotWithName, but fired only for visible slots (drawDefault=true)

Same as onUpdateSlotWithGlobalIndex, but fired only for visible slots (drawDefault=true)

Binds a parent Spine slot to this child Spine instance.

This enables Spine-in-Spine composition, where child animations follow parent slot transformations. Common uses include:

• Weapons attached to hands
• Armor pieces following body parts
• Modular character systems

Removes a parent slot binding.

This disconnects the child Spine from following the specified parent slot.

Private Members #

Internal listener that handles Spine animation state events. Forwards animation callbacks to the appropriate event handlers.

Maps slot indices to their corresponding mesh objects. Each slot that renders geometry gets a Mesh for efficient GPU rendering.

Reusable SlotInfo object for slot update events. Avoids creating new objects each frame for performance.

Array of child Spine animations attached to this parent. Enables hierarchical animation composition where child animations follow parent slots.

Depth increment between sub-animations to prevent z-fighting. Each child slot gets a slightly different depth for proper layering.

Maps parent slot indices to arrays of child slot binding information. Used for Spine-in-Spine composition where child animations follow parent slots.

Maps child slot indices to their parent binding information. Computed from boundParentSlots for efficient lookup during rendering.

Flag indicating that boundChildSlots needs to be recomputed. Set when parent slot bindings are modified.

Global index of the parent slot that this entire Spine follows. When set, all child slots transform relative to this parent slot.

Reference to the actual parent slot object being followed. Updated during rendering to track the parent slot's current state.

Rendering depth of the global parent slot. Child animations render relative to this depth.

Whether the global parent slot is currently visible. Child animations are hidden when their parent slot is not visible.

Stores the setup pose transforms for each bone. Used for accurate child animation positioning relative to parent slots.

Index of the first slot with a bounding box attachment found during rendering. Used for hitWithFirstBoundingBox functionality.

Handles clipping attachment processing for rendering masked regions. Clips slot geometry to defined shapes for visual effects.

Current clipping shape being applied during rendering. Generated from clipping attachments in the skeleton.

Maps slot indices to their clipping shapes. Caches clipping geometry for performance.

When true, suppresses animation events from being fired. Used during forced rendering to prevent unwanted event callbacks.

When true, defers event emission until the next frame. Prevents issues with events fired during rendering.

Flag indicating whether a render operation is already scheduled. Prevents multiple render operations from being queued.

Flag indicating that the skeleton should be reset to setup pose on next update. Set when resetAtChange is true and a new animation starts.

Maps skeleton-specific slot indices to global slot indices. Enables efficient slot operations across different skeleton structures.

Maps global slot indices to their event dispatchers for slot updates. Enables efficient per-slot event handling without checking all slots.

Array version of updateSlotWithNameDispatchers for efficient iteration. Kept in sync with the map for cleanup operations.

Maps global slot indices to their event dispatchers for visible slot updates. Only fires for slots that are actually being rendered.

Array version of updateVisibleSlotWithNameDispatchers for efficient iteration. Kept in sync with the map for cleanup operations.

Encodes the ABGR int color as a float. The high bits are masked to avoid using floats in the NaN range, which unfortunately

• means the full range of alpha cannot be used.

Emitted when a Spine animation completes a full cycle. For looped animations, this is fired at the end of each loop. For non-looped animations, this is fired when the animation reaches its end.

Emitted when the Spine instance begins rendering its slots. Use this to perform setup before slot rendering begins.

Emitted when the Spine instance finishes rendering all slots. Use this to perform cleanup or post-processing after rendering.

Emitted for each slot that is about to be rendered. This includes both visible and invisible slots. Modify the info parameter to customize slot rendering.

Emitted only for visible slots that will be rendered. This is a filtered version of updateSlot that excludes hidden slots.

Emitted before the skeleton's animation state is updated. Use this to modify skeleton properties before animation is applied.

Emitted before world transforms are calculated for all bones. Hook into this event to apply custom bone transformations.

Emitted when a chain of animations completes without interruption. This is fired when all animations in nextAnimations have finished. If the animation chain is interrupted, this event is not fired.

Emitted when an animation from nextAnimations is applied. This allows tracking of animation transitions in a chain.

Emitted when a Spine event keyframe is triggered during animation. Spine events are defined in the Spine editor and triggered at specific times.

Dynamic reference to the scheduled render function. Cached to avoid creating new closures each time.

Update skeleton with the given delta time.

Process spine draw order and output quads and meshes.

Compute boundChildSlots from boundParentSlots to make it more efficient to gather parent slot transformations when drawing child animation.

Metadata #