/** * @classdesc * A renderable object to render Spine animated skeleton. * @augments Renderable */ export default class Spine extends Renderable { /** * @param {number} x - the x coordinates of the Spine object * @param {number} y - the y coordinates of the Spine object * @param {object} settings - Configuration parameters for the Spine object * @param {string} [settings.atlasFile] - the name of the atlasFile to be used to create this spine animation * @param {string} [settings.jsonFile] - the name of the jsonFile to be used to create this spine animation * @param {number} [settings.mixTime = 0.2] - the default mix duration to use when no mix duration has been defined between two animations. * @example * import Spine, { SpinePlugin } from '@melonjs/spine-plugin'; * import * as me from 'melonjs'; * * // register the plugin * me.plugin.register(SpinePlugin); * * // prepare/declare assets for the preloader * const DataManifest = [ * { * "name": "alien-ess.json", * "type": "spine", * "src": "data/spine/alien-ess.json" * }, * { * "name": "alien.atlas", * "type": "spine", * "src": "data/spine/alien.atlas" * }, * ] * * // create a new Spine Renderable * let spineAlien = new Spine(100, 100, {atlasFile: "alien.atlas", jsonFile: "alien-ess.json"}); * * // set default animation * spineAlien.setAnimation(0, "death", true); * * // add it to the game world * me.game.world.addChild(spineAlien); */ constructor(x: number, y: number, settings: { atlasFile?: string | undefined; jsonFile?: string | undefined; mixTime?: number | undefined; }); runtime: typeof spineWebGL | typeof spineCanvas; skeleton: any; plugin: plugin.BasePlugin; animationState: any; skeletonRenderer: SkeletonRenderer | spineWebGL.SkeletonRenderer; root: any; boneOffset: spineCanvas.Vector2; boneSize: spineCanvas.Vector2; isSpineFlipped: { x: boolean; y: boolean; }; /** * Stores settings and other state for the playback of the current animation (if any). * @type {TrackEntry} * @see http://en.esotericsoftware.com/spine-api-reference#TrackEntry * @see setAnimation * @default undefined * @example * // set a default animation to "run" * this.setAnimation(0, "run", true); * ... * ... * // pause the animation * this.currentTrack.timeScale = 0; * ... * ... * // resume the animation * this.currentTrack.timeScale = 1; */ currentTrack: TrackEntry; /** @ignore */ isWebGL: boolean; canvas: any; spineBatcher: any; shapesShader: spineWebGL.Shader | undefined; shapes: spineWebGL.ShapeRenderer | undefined; skeletonDebugRenderer: spineWebGL.SkeletonDebugRenderer | undefined; mixTime: number; jsonFile: string | undefined; atlasFile: string | undefined; set debugRendering(value: boolean); /** * Whether to enable the debug mode when rendering the spine object * @default false * @type {boolean} */ get debugRendering(): boolean; /** * Set and load the given skeleton atlas and json definition files. * (use this if you did not specify any json or atlas through the constructor) * @param {string} atlasFile - the name of the atlasFile to be used to create this spine animation * @param {string} jsonFile - the name of the jsonFile to be used to create this spine animation * @example * // create a new Spine Renderable * let spineAlien = new Spine(100, 100); * * // set the skeleton * spineAlien.setSkeleton("alien.atlas", "alien-ess.json"); * * // set default animation * spineAlien.setAnimation(0, "death", true); * * // add it to the game world * me.game.world.addChild(spineAlien); */ setSkeleton(atlasFile: string, jsonFile: string): void; premultipliedAlpha: any; /** * Flip the Spine skeleton on the horizontal axis (around its center). * @param {boolean} [flip=true] - `true` to flip this Spine object. * @returns {Spine} Reference to this object for method chaining */ flipX(flip?: boolean): Spine; /** * Flip the Spine skeleton on the vertical axis (around its center). * @param {boolean} [flip=true] - `true` to flip this Spine object. * @returns {Spine} Reference to this object for method chaining */ flipY(flip?: boolean): Spine; /** * Rotate this Spine object by the specified angle (in radians). * @param {number} angle - The angle to rotate (in radians) * @param {Vector2d|ObservableVector2d} [v] - an optional point to rotate around * @returns {Spine} Reference to this object for method chaining */ rotate(angle: number, v?: Vector2d | ObservableVector2d): Spine; /** * Scale the Spine object around its anchor point. * @param {number} x - a number representing the abscissa of the scaling vector. * @param {number} [y=x] - a number representing the ordinate of the scaling vector. * @returns {Spine} Reference to this object for method chaining */ scale(x: number, y?: number): Spine; /** * Draw this Spine object using the appropriate renderer. * If WebGL, it uses the melonJS SpineBatcher for two-color tinted rendering. * Otherwise, it falls back to the canvas skeleton renderer. * * @param {CanvasRenderer|WebGLRenderer} renderer - A renderer instance. */ draw(renderer: CanvasRenderer | WebGLRenderer): void; /** * Disposes of all rendering-related resources to free GPU memory. * Called automatically when the renderable is removed from the world. */ dispose(): void; /** * Sets the current animation for a track by animation index, discarding any queued animations. * @param {number} trackIndex - the track index * @param {number} index - the animation index * @param {boolean} [loop=false] - If true, the animation will repeat. * @returns {TrackEntry} A track entry to allow further customization of animation playback. */ setAnimationByIndex(trackIndex: number, index: number, loop?: boolean): TrackEntry; /** * Sets the current animation for a track, discarding any queued animations. * @param {number} trackIndex - the track index * @param {string} name - the animation name * @param {boolean} [loop=false] - If true, the animation will repeat. * @returns {TrackEntry} A track entry to allow further customization of animation playback. * @example * // set the current animation * spineAlien.setAnimation(0, "death", true); */ setAnimation(trackIndex: number, name: string, loop?: boolean): TrackEntry; /** * Return true if the given animation name is the current running animation for the current track. * @param {string} name - animation name * @returns {boolean} * @example * if (!this.isCurrentAnimation("death")) { * // do something funny... * } */ isCurrentAnimation(name: string): boolean; /** * Adds an animation to be played after the current or last queued animation for a track, by index. * @param {number} trackIndex - the track index * @param {number} index - the animation index * @param {boolean} [loop=false] - If true, the animation will repeat. * @param {number} [delay=0] - delay in seconds before playing the animation * @returns {TrackEntry} A track entry to allow further customization of animation playback. */ addAnimationByIndex(trackIndex: number, index: number, loop?: boolean, delay?: number): TrackEntry; /** * Adds an animation to be played after the current or last queued animation for a track, by name. * @param {number} trackIndex - the track index * @param {string} name - the animation name * @param {boolean} [loop=false] - If true, the animation will repeat. * @param {number} [delay=0] - delay in seconds before playing the animation * @returns {TrackEntry} A track entry to allow further customization of animation playback. */ addAnimation(trackIndex: number, name: string, loop?: boolean, delay?: number): TrackEntry; /** * Set the default mix duration to use when no mix duration has been defined between two animations. * @param {number} mixTime */ setDefaultMixTime(mixTime: number): void; /** * Sets a mix duration between two animations by name. * @param {string} firstAnimation - the name of the first animation * @param {string} secondAnimation - the name of the second animation * @param {number} mixTime - the mix duration in seconds */ setTransitionMixTime(firstAnimation: string, secondAnimation: string, mixTime: number): void; /** * Sets a skin by name. * @param {string} skinName * @example * // create a new Spine Renderable * let spineChar = new Spine(100, 100, {atlasFile: "mix-and-match-pma.atlas", jsonFile: "mix-and-match-pro.json"}); * * // set default animation * spineChar.setAnimation(0, "dance", true); * * // set skin * spineChar.setSkinByName("full-skins/girl"); * * // add it to the game world * me.game.world.addChild(spineChar); */ setSkinByName(skinName: string): void; /** * Create a combined skin from multiple skin names (mix-and-match). * @param {string} combinedName - name for the new combined skin * @param {...string} skinNames - names of skins to combine * @example * // combine multiple skins for mix-and-match * spineChar.setCombinedSkin("custom", "skin-base", "nose/short", "eyelids/girly"); */ setCombinedSkin(combinedName: string, ...skinNames: string[]): void; /** * Sets an empty animation for a track, allowing the track entry to be mixed from. * @param {number} trackIndex - the track index * @param {number} [mixDuration=0] - mix duration in seconds * @returns {TrackEntry} A track entry to allow further customization. */ setEmptyAnimation(trackIndex: number, mixDuration?: number): TrackEntry; /** * Find a bone by name. * @param {string} boneName - the bone name * @returns {Bone|null} the bone, or null if not found */ findBone(boneName: string): Bone | null; /** * Find a slot by name. * @param {string} slotName - the slot name * @returns {Slot|null} the slot, or null if not found */ findSlot(slotName: string): Slot | null; /** * Register a listener for animation state events. * @param {object} listener - an object with event handler methods * @param {Function} [listener.start] - called when an animation starts * @param {Function} [listener.interrupt] - called when an animation is interrupted * @param {Function} [listener.end] - called when an animation ends * @param {Function} [listener.dispose] - called when a track entry is disposed * @param {Function} [listener.complete] - called when an animation completes a loop * @param {Function} [listener.event] - called when a user-defined event fires * @example * spineObj.addAnimationListener({ * complete: (entry) => { * console.log("Animation complete:", entry.animation.name); * }, * event: (entry, event) => { * console.log("Event:", event.data.name); * } * }); */ addAnimationListener(listener: { start?: Function | undefined; interrupt?: Function | undefined; end?: Function | undefined; dispose?: Function | undefined; complete?: Function | undefined; event?: Function | undefined; }): void; /** * Remove a previously registered animation state listener. * @param {object} listener - the listener to remove */ removeAnimationListener(listener: object): void; /** * Get the list of animation names available in this skeleton. * @returns {string[]} array of animation names */ getAnimationNames(): string[]; /** * Get the list of skin names available in this skeleton. * @returns {string[]} array of skin names */ getSkinNames(): string[]; /** * Reset this skeleton to the setup pose. */ setToSetupPose(): void; } import { Renderable } from "melonjs"; import * as spineWebGL from "@esotericsoftware/spine-webgl"; import * as spineCanvas from "@esotericsoftware/spine-canvas"; import { plugin } from "melonjs"; import SkeletonRenderer from "./SkeletonRenderer.js"; //# sourceMappingURL=Spine.d.ts.map