/**
* 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