pencil.js/dist/modules/sprite/sprite.d.ts

Nice modular interactive 2D drawing library.

/**
 * @module Sprite
 */
/**
 * Sprite class
 * <br><img src="./media/examples/sprite.gif" alt="sprite demo"/>
 * @class
 * @extends {module:Image}
 */
export default class Sprite {
    /**
     *
     * @param {Object} definition -
     * @return {Sprite}
     */
    static from(definition: any): Sprite;
    /**
     * Load and return a spritesheet json file
     * @param {String} url - Url to the file
     * @return {Spritesheet}
     */
    static sheet(url: string): Spritesheet;
    /**
     * @typedef {Object} SpriteOptions
     * @extends ComponentOptions
     * @prop {Number} [speed=1] -
     * @prop {Boolean} [loop=true] -
     */
    /**
     * @type {SpriteOptions}
     */
    static get defaultOptions(): any;
    /**
     * @typedef {Object} SpriteEvents
     * @extends ContainerEvent
     * @prop {String} start -
     * @prop {String} frame -
     * @prop {String} end -
     */
    /**
     * @type {SpriteEvents}
     */
    static get events(): any;
    /**
     * @typedef {Object} Frame
     * @prop {Number} x - Horizontal position
     * @prop {Number} y - Vertical position
     * @prop {Number} w - Width
     * @prop {Number} h - Height
     */
    /**
     * @typedef {Object} FrameData
     * @prop {Frame} frame - Data about this frame in the sprite-sheet
     * @prop {Frame} spriteSourceSize - Data about the original file
     */
    /**
     * Sprite constructor
     * @param {PositionDefinition} positionDefinition -
     * @param {String} url -
     * @param {Array<FrameData>} frames -
     * @param {SpriteOptions} [options] - Drawing options
     */
    constructor(positionDefinition: PositionDefinition, url: string, frames: Array<{
        /**
         * - Data about this frame in the sprite-sheet
         */
        frame: {
            /**
             * - Horizontal position
             */
            x: number;
            /**
             * - Vertical position
             */
            y: number;
            /**
             * - Width
             */
            w: number;
            /**
             * - Height
             */
            h: number;
        };
        /**
         * - Data about the original file
         */
        spriteSourceSize: {
            /**
             * - Horizontal position
             */
            /**
             * - Horizontal position
             */
            x: number;
            /**
             * - Vertical position
             */
            /**
             * - Vertical position
             */
            y: number;
            /**
             * - Width
             */
            /**
             * - Width
             */
            w: number;
            /**
             * - Height
             */
            /**
             * - Height
             */
            h: number;
        };
    }>, options?: any);
    frames: {
        /**
         * - Data about this frame in the sprite-sheet
         */
        frame: {
            /**
             * - Horizontal position
             */
            x: number;
            /**
             * - Vertical position
             */
            y: number;
            /**
             * - Width
             */
            w: number;
            /**
             * - Height
             */
            h: number;
        };
        /**
         * - Data about the original file
         */
        spriteSourceSize: {
            /**
             * - Horizontal position
             */
            /**
             * - Horizontal position
             */
            x: number;
            /**
             * - Vertical position
             */
            /**
             * - Vertical position
             */
            y: number;
            /**
             * - Width
             */
            /**
             * - Width
             */
            w: number;
            /**
             * - Height
             */
            /**
             * - Height
             */
            h: number;
        };
    }[];
    frame: number;
    isPaused: boolean;
    /**
     * @inheritDoc
     * @return {Sprite} Itself
     */
    makePath(ctx: any): Sprite;
    width: any;
    height: any;
    /**
     * @inheritDoc
     * @return {Sprite} Itself
     */
    draw(ctx: any): Sprite;
    /**
     * Play the sprite animation
     * @param {Number} [speed] - Choose a play speed
     * @return {Sprite} Itself
     */
    play(speed?: number): Sprite;
    /**
     * Put the sprite on pause
     * @return {Sprite} Itself
     */
    pause(): Sprite;
    /**
     *
     * @param {Number} frame - Number of the frame to set
     * @return {Sprite} Itself
     */
    setFrame(frame: number): Sprite;
    /**
     * @inheritDoc
     */
    toJSON(): any;
}
/**
 * Spritesheet class
 * @class
 */
declare class Spritesheet {
    /**
     * Spritesheet constructor
     * @param {Object} json -
     */
    constructor(json: any);
    json: any;
    /**
     * Getter for the image file
     * @return {Image}
     */
    get file(): Image;
    /**
     * Return all the frames corresponding to a selector
     * @param {String|Function|RegExp} [selector="*"] - Match against the spritesheet images name using a glob pattern, a validation function or a regular expression
     * @return {Array}
     */
    get(selector?: string | Function | RegExp): any[];
    /**
     * Group images from the spritesheet into a single sprite
     * @param {PositionDefinition} position - Position of the sprite
     * @param {String|Function|RegExp} [selector="*"] - Match against the spritesheet images name using a glob pattern, a validation function or a regular expression
     * @param {ImageOptions} [options] - Options of the sprite
     * @return {Sprite}
     */
    extract(position: PositionDefinition, selector?: string | Function | RegExp, options?: ImageOptions): Sprite;
}
import Image from "@pencil.js/image";
export {};