/** * additional import for TypeScript * @import {Vector2d} from "../math/vector2d.js"; * @import Renderer from "./../video/renderer.js"; */ /** * An object to display a fixed or animated sprite on screen. * @category Game Objects */ export default class Sprite extends Renderable { /** * @param {number} x - the x coordinates of the sprite object * @param {number} y - the y coordinates of the sprite object * @param {object} settings - Configuration parameters for the Sprite object * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|Texture2d|TextureAtlas|CompressedImage|string} settings.image - reference to a spritesheet image, a {@link Texture2d} asset (e.g. a {@link TextureAtlas}), a video element, a compressed texture, or a loader key * @param {string} [settings.name=""] - name of this object * @param {string} [settings.region] - region name of a specific region to use when using a texture atlas, see {@link TextureAtlas} * @param {number} [settings.framewidth] - Width of a single frame within the spritesheet * @param {number} [settings.frameheight] - Height of a single frame within the spritesheet * @param {string|Color} [settings.tint] - a tint to be applied to this sprite * @param {number} [settings.flipX] - flip the sprite on the horizontal axis * @param {number} [settings.flipY] - flip the sprite on the vertical axis * @param {string|Vector2d|{x:number,y:number}} [settings.anchorPoint={x:0.5, y:0.5}] - Anchor point to draw the frame at (defaults to the center of the frame). Also accepts the named presets `"center"`, `"top"`, `"bottom"`, `"left"`, `"right"`, `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`. For spritesheet atlases the anchor also becomes the cached atlas's per-frame pivot (see {@link TextureAtlas}). * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap|Texture2d|string} [settings.normalMap] - optional normal-map texture used for per-pixel lighting (SpriteIlluminator-style). Same layout/UVs as `settings.image`. When omitted (default), the sprite renders unlit and pays no extra cost. Ignored by the Canvas renderer. Note: `HTMLVideoElement` is intentionally not supported — normal maps encode static surface directions in RGB, and the engine caches the GL texture per image reference (a video would freeze on frame 0). * @example * // create a single sprite from a standalone image, with anchor in the center * let sprite = new me.Sprite(0, 0, { * image : "PlayerTexture", * framewidth : 64, * frameheight : 64, * anchorPoint : new me.Vector2d(0.5, 0.5) * }); * * // create a single sprite from a packed texture * mytexture = new me.TextureAtlas( * me.loader.getJSON("texture"), * me.loader.getImage("texture") * ); * let sprite = new me.Sprite(0, 0, { * image : mytexture, * region : "npc2.png", * }); * * // create a video sprite * let videoSprite = new me.Sprite(0, 0, { * image : me.loader.getVideo("bigbunny"), * anchorPoint : new me.Vector2d(0.5, 0.5) * }); * // scale the video sprite * videoSprite.scale(2); * // start playing the video (if video is preloaded with `autoplay` set to false) * videoSprite.play(); */ constructor(x: number, y: number, settings: { image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | Texture2d | TextureAtlas | CompressedImage | string; name?: string | undefined; region?: string | undefined; framewidth?: number | undefined; frameheight?: number | undefined; tint?: string | Color | undefined; flipX?: number | undefined; flipY?: number | undefined; anchorPoint?: string | Vector2d | { x: number; y: number; } | undefined; normalMap?: string | ImageBitmap | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | Texture2d | undefined; }); /** * global offset for the position to draw from on the source image. * @type {Vector2d} * @default <0.0,0.0> */ offset: Vector2d; /** * true if this is a video sprite (e.g. a HTMLVideoElement was passed as as source) * @type {boolean} * @default false */ isVideo: boolean; /** * a callback fired when the end of a video or current animation was reached * @type {Function} * @default undefined */ /** * The source texture object this sprite object is using * @type {TextureAtlas} */ source: TextureAtlas; image: any; textureAtlas: any; width: any; height: any; set animationpause(value: boolean); /** * pause the frame animation, freezing the current frame. * @type {boolean} * @default false */ get animationpause(): boolean; set normalMap(value: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | ImageBitmap | null); /** * The optional normal-map image paired with this sprite's color * texture (SpriteIlluminator workflow). When set, the GPU backends' * lit pipeline samples this texture for per-pixel lighting using * `Stage._activeLights`. `null` when unlit. * Setting any non-image value (or anything without numeric * `width`/`height`) throws — assign `null` to clear. * * Silently ignored by the Canvas renderer. * @type {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap|null} */ get normalMap(): HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | ImageBitmap | null; atlasIndices: any; /** * defined animations, keyed by id (see {@link Sprite#addAnimation}). * @type {object} */ get anim(): object; /** * current frame information (name / index / texture offset & size / trim). * @type {object} */ get current(): object; set dt(value: number); /** * elapsed time within the current animation frame, in milliseconds. * @type {number} */ get dt(): number; set animationspeed(value: number); /** * animation cycling speed (delay between frames in ms). * @type {number} * @default 100 */ get animationspeed(): number; /** * return the flickering state of the object * @returns {boolean} */ isFlickering(): boolean; /** * Play an animation, or resume the current animation / video. A shorthand: * call with an animation id to switch to (and start) it, or with no argument * to resume after {@link Sprite#pause}. Always clears the paused state. The * options mirror {@link Sprite#setCurrentAnimation} and the 3D * {@link GLTFModel#play}, so 2D and 3D animation share one API. * @param {string} [name] - animation id to play; omit to just resume * @param {string|Function|object} [options] - loop / chain / completion behavior (see {@link Sprite#setCurrentAnimation}) * @returns {Sprite} Reference to this object for method chaining * @example * sprite.play("walk"); // switch to + play "walk" * sprite.play("die", { loop: false }); // play once, hold the last frame * sprite.pause(); * sprite.play(); // resume */ play(name?: string, options?: string | Function | object): Sprite; /** * Pause the current animation or video, freezing the current frame. Resume * with {@link Sprite#play}. * @returns {Sprite} Reference to this object for method chaining */ pause(): Sprite; /** * Stop the current animation or video and reset it to the first frame * (paused). (Use {@link Sprite#pause} instead to freeze in place.) * @returns {Sprite} Reference to this object for method chaining */ stop(): Sprite; /** * make the object flicker * @param {number} duration - expressed in milliseconds * @param {Function} [callback] - Function to call when flickering ends * @returns {Sprite} Reference to this object for method chaining * @example * // make the object flicker for 1 second * // and then remove it * this.flicker(1000, function () { * world.removeChild(this); * }); */ flicker(duration: number, callback?: Function): Sprite; /** * add an animation
* For fixed-sized cell sprite sheet, the index list must follow the * logic as per the following example :
* * @param {string} name - animation id * @param {number[]|string[]|object[]} index - list of sprite index or name defining the animation. Can also use objects to specify delay for each frame, see below * @param {number} [animationspeed] - cycling speed for animation in ms * @returns {number} frame amount of frame added to the animation (delay between each frame). * @see Sprite#animationspeed * @example * // walking animation * this.addAnimation("walk", [ 0, 1, 2, 3, 4, 5 ]); * // standing animation * this.addAnimation("stand", [ 11, 12 ]); * // eating animation * this.addAnimation("eat", [ 6, 6 ]); * // rolling animation * this.addAnimation("roll", [ 7, 8, 9, 10 ]); * // slower animation * this.addAnimation("roll", [ 7, 8, 9, 10 ], 200); * // or get more specific with delay for each frame. Good solution instead of repeating: * this.addAnimation("turn", [{ name: 0, delay: 200 }, { name: 1, delay: 100 }]) * // can do this with atlas values as well: * this.addAnimation("turn", [{ name: "turnone", delay: 200 }, { name: "turntwo", delay: 100 }]) * // define a dying animation that stop on the last frame * this.addAnimation("die", [{ name: 3, delay: 200 }, { name: 4, delay: 100 }, { name: 5, delay: Infinity }]) * // set the standing animation as default * this.setCurrentAnimation("stand"); */ addAnimation(name: string, index: number[] | string[] | object[], animationspeed?: number): number; /** * set the current animation, and reset the frame to zero. Selecting the * animation that is already current is a no-op unless it had completed. * @param {string} name - animation id * @param {string|Function|object} [resetAnim] - animation id to switch to when complete, a callback, or an options object (`{ loop, next, speed, onComplete }`) * @param {boolean} [preserve_dt=false] - if false will reset the elapsed time counter since last frame * @returns {Sprite} Reference to this object for method chaining * @example * // set "walk" animation * this.setCurrentAnimation("walk"); * * // set "walk" animation if it is not the current animation * if (!this.isCurrentAnimation("walk")) { * this.setCurrentAnimation("walk"); * } * * // set "eat" animation, and switch to "walk" when complete * this.setCurrentAnimation("eat", "walk"); * * // set "die" animation, and remove the object when finished * this.setCurrentAnimation("die", () => { * world.removeChild(this); * return false; // do not reset to first frame * }); * * // set "attack" animation, and pause for a short duration * this.setCurrentAnimation("die", () => { * this.animationpause = true; * * // back to "standing" animation after 1 second * setTimeout(function () { * this.setCurrentAnimation("standing"); * }, 1000); * * return false; // do not reset to first frame * }); */ setCurrentAnimation(name: string, resetAnim?: string | Function | object, preserve_dt?: boolean): Sprite; /** * reverse the given or current animation if none is specified * @param {string} [name] - animation id * @returns {Sprite} Reference to this object for method chaining * @see Sprite#animationspeed */ reverseAnimation(name?: string): Sprite; /** * return true if the specified animation is the current one. * @param {string} name - animation id * @returns {boolean} * @example * if (!this.isCurrentAnimation("walk")) { * // do something funny... * } */ isCurrentAnimation(name: string): boolean; /** * the names of every animation defined on this sprite (via * {@link Sprite#addAnimation}). * @returns {string[]} the defined animation names * @example * sprite.addAnimation("walk", [0, 1, 2, 3]); * sprite.addAnimation("idle", [4, 5]); * sprite.getAnimationNames(); // ["walk", "idle"] */ getAnimationNames(): string[]; /** * change the current texture atlas region for this sprite * @see Texture.getRegion * @param {object} region - typically returned through me.Texture.getRegion() * @returns {Sprite} Reference to this object for method chaining * @example * // change the sprite to "shadedDark13.png"; * mySprite.setRegion(mytexture.getRegion("shadedDark13.png")); */ setRegion(region: object): Sprite; /** * force the current animation frame index. * @param {number} [index=0] - animation frame index * @returns {Sprite} Reference to this object for method chaining * @example * // reset the current animation to the first frame * this.setAnimationFrame(); */ setAnimationFrame(index?: number): Sprite; /** * return the current animation frame index. * @returns {number} current animation frame index */ getCurrentAnimationFrame(): number; /** * Prepare the rendering context before drawing this sprite (automatically called by melonJS). * Extends `Renderable.preDraw` to publish this sprite's `normalMap` (if any) * on the renderer so the WebGL lit pipeline can pair it with the next * `drawImage` call. Cleared back in `postDraw`. * @param {Renderer} renderer - a renderer instance */ preDraw(renderer: Renderer): void; /** * restore the rendering context after drawing this sprite (automatically called by melonJS). * @param {Renderer} renderer - a renderer instance */ postDraw(renderer: Renderer): void; /** * draw this sprite (automatically called by melonJS) * @param {Renderer} renderer - a renderer instance */ draw(renderer: Renderer): void; } import Renderable from "./renderable.js"; import FrameAnimation from "./frameAnimation.js"; import type { Vector2d } from "../math/vector2d.js"; import { TextureAtlas } from "./../video/texture/atlas.js"; import type Renderer from "./../video/renderer.js"; import Texture2d from "./../video/texture/texture2d.ts"; import { Color } from "../math/color.ts"; //# sourceMappingURL=sprite.d.ts.map