Thing-editor 2.0b

The Spine class supports SpineSequence objects, which allow you to chain multiple animation items together with delays, speeds, and callback actions.

SpineSequence Interfaces

SpineSequence

Defines a collection of animation items.

• n: The name of the sequence.
• s: An array of SpineSequenceItem objects.
• l?: An optional index for the loop target within the sequence.

SpineSequenceItem

A single step in a sequence.

• n: The name of the animation to play.
• mixDuration?: Transition duration for this item.
• delay?: Fixed delay after the animation starts.
• delayRandom?: A random delay range applied to the item.
• speed?: Playback speed for this specific item.
• actions?: An array of SpineSequenceItemAction to execute.

SpineSequenceItemAction

An action triggered during a sequence.

• a: A CallBackPath (string) representing the function to call.
• t: The time/frame at which the action is triggered.

const mySequence: SpineSequence = {
  n: 'attack_combo',
  s: [
    {
      n: 'swing_1',
      speed: 1.2,
      actions: [{ a: 'myCallbackPath', t: 10 }]
    },
    {
      n: 'swing_2',
      delay: 5
    }
  ]
};

The Spine class is a Container used to manage and play Spine skeletal animations within the engine. It handles resource loading, animation playback, skin switching, and complex animation sequences.

Key Properties

• spineData: A string representing the resource path to the Spine data.
• currentAnimation: The name of the animation currently playing.
• currentSkin: The name of the skin currently applied (defaults to 'default').
• speed: The playback speed multiplier.
• loop: Boolean indicating if the current animation should loop.
• mixDuration: The duration of the transition between animations.
• sequences: An array of SpineSequence objects defining complex playback logic.
• isPlaying: Boolean indicating if the Spine is currently playing.
• tint: A numeric color value applied to the Spine content.
• useParentTint: If true, the Spine inherits the tint from its parent.

const spine = new Spine();
spine.spineData = 'path/to/spine_resource';
spine.currentAnimation = 'walk';
spine.currentSkin = 'warrior_skin';
spine.speed = 1.5;
spine.loop = true;

The Settings class provides a mechanism for managing key-value pairs that are persisted to localStorage. It handles automatic serialization to JSON and includes a debounced flushing mechanism to minimize writes to storage.

Key Features

• Persistence: Data is stored under a specific storageId in localStorage.
• Automatic Flushing: Changes are debounced (using a 10ms interval) to prevent excessive writes, unless running in EDITOR mode where changes are flushed immediately.
• Global Change Listener: You can subscribe to changes across all Settings instances using the static globalOnChanged callback.
• Lifecycle Management: The class automatically attempts to flush pending changes when the window is unloaded (beforeunload).

import Settings from 'thing-editor/src/engine/utils/settings';

// Initialize settings with a unique storage ID
const mySettings = new Settings('user_preferences');

// Set a value
mySettings.setItem('theme', 'dark');

// Get a value (with an optional default)
const theme = mySettings.getItem('theme', 'light');

// Remove a value
mySettings.removeItem('theme');

// Clear all settings in this instance
mySettings.clear();

Use the following methods to control the playback of Spine animations:

• play(animationName: string, mixDuration?: number): Plays a specific animation with an optional mix duration.
• playFromFrame(frame: number, animationName?: string, mixDuration?: number): Plays an animation starting from a specific frame.
• playIfDifferent(animationName: string, mixDuration: number, playIfStopped?: boolean): Plays the animation only if it is not already playing or if the state allows.
• playIfNot(animationName: string, mixDuration: number, playIfStopped?: boolean, animationNamesRegexp: string): Plays the animation only if the current animation does not match the provided regular expression.
• stop(isNeedRefresh?: boolean): Stops the current animation playback.
• stopByName(animationName: string, isNeedRefresh?: boolean): Stops playback if the specified animation is the one currently playing.
• toInitPose(timeFrames: number): Forces the Spine to return to its initial setup pose over a specified number of frames.

spine.play('run', 0.2);
spine.stop();
spine.playIfDifferent('idle', 0.1);
spine.toInitPose(30);