the-world-engine/dist/esm/engine/script/render/CssSpriteAtlasRenderer.d.ts

three.js based, unity like game engine for browser

import { CssRenderer } from "./CssRenderer";
import type { ICssImageRenderOption } from "./CssSpriteRenderer";
import { ImageRenderingMode } from "./CssSpriteRenderer";
/**
 * css sprite atlas render mode
 */
export declare enum CssSpriteAtlasRenderMode {
    /**
     * This option clips images using object-fit css property.
     *
     * The object-fit uses less resources than the clip-path.
     * However, in object-fit mode, the viewScale value must be fixed to 1.
     *
     * If you don't have any problems, you'd better use this method
     */
    ObjectFit = 0,
    /**
     * This option clips images using clip-path css property.
     *
     * The object-fit uses less resources than the clip-path.
     * However, in object-fit mode, the viewScale value must be fixed to 1.
     */
    ClipPath = 1
}
/**
 * css sprite atlas renderer
 *
 * this compoenent slices the image into column and rows, it's memory efficient and fast to animate.
 */
export declare class CssSpriteAtlasRenderer extends CssRenderer<HTMLImageElement> implements ICssImageRenderOption {
    private _renderMode;
    private _imageWidth;
    private _imageHeight;
    private _imageFlipX;
    private _imageFlipY;
    private _opacity;
    private _imageRenderingMode;
    private _columnCount;
    private _rowCount;
    private _currentImageIndex;
    private _croppedImageWidth;
    private _croppedImageHeight;
    private _initializeFunction;
    protected renderInitialize(): void;
    protected updateCenterOffset(updateTransform: boolean): void;
    protected updateViewScale(updateTransform: boolean): void;
    private updateImageIndex;
    /**
     * image (default: null)
     */
    get image(): HTMLImageElement | null;
    /**
     * set image from path asynchronously
     * @param path image path
     * @param columnCount sprite atlas column count
     * @param rowCount sprite atlas row count
     * @param onComplete on complete callback
     * @returns
     */
    asyncSetImageFromPath(path: string, columnCount: number, rowCount: number, onComplete?: () => void): void;
    /**
     * set image from `HTMLImageElement`
     * @param image image must be loaded
     * @param columnCount sprite atlas column count
     * @param rowCount sprite atlas row count
     */
    setImage(image: HTMLImageElement, columnCount: number, rowCount: number): void;
    /**
     * render mode (default: CssSpriteAtlasRenderMode.ObjectFit)
     *
     * Decide which css method to clip the image
     *
     * Change this option if you have a render problem.
     */
    get renderMode(): CssSpriteAtlasRenderMode;
    /**
     * render mode (default: CssSpriteAtlasRenderMode.ObjectFit)
     *
     * Decide which css method to clip the image
     *
     * Change this option if you have a render problem.
     */
    set renderMode(value: CssSpriteAtlasRenderMode);
    /**
     * image index (default: 0)
     *
     * Decide which image to display
     *
     * Index increases from left to right from top to bottom
     */
    get imageIndex(): number;
    /**
     * image index (default: 0)
     *
     * Decide which image to display
     *
     * Index increases from left to right from top to bottom
     */
    set imageIndex(value: number);
    /**
     * sprite atlas column count (default: 1)
     */
    get columnCount(): number;
    /**
     * sprite atlas row count (default: 1)
     */
    get rowCount(): number;
    /**
     * image width (default: 0)
     *
     * if this value is 0, it will automatically update when image is set
     */
    get imageWidth(): number;
    /**
     * image width (default: 0)
     *
     * if this value is 0, it will automatically update when image is set
     */
    set imageWidth(value: number);
    /**
     * image height (default: 0)
     *
     * if this value is 0, it will automatically update when image is set
     */
    get imageHeight(): number;
    /**
     * image height (default: 0)
     *
     * if this value is 0, it will automatically update when image is set
     */
    set imageHeight(value: number);
    /**
     * image flip x (default: false)
     */
    get imageFlipX(): boolean;
    /**
     * image flip x (default: false)
     */
    set imageFlipX(value: boolean);
    /**
     * image flip y (default: false)
     */
    get imageFlipY(): boolean;
    /**
     * image flip y (default: false)
     */
    set imageFlipY(value: boolean);
    /**
     * image opacity (default: 1)
     */
    get opacity(): number;
    /**
     * image opacity (default: 1)
     */
    set opacity(value: number);
    /**
     * image rendering mode (default: ImageRenderingMode.Pixelated)
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
     */
    get imageRenderingMode(): ImageRenderingMode;
    /**
     * image rendering mode (default: ImageRenderingMode.Pixelated)
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
     */
    set imageRenderingMode(value: ImageRenderingMode);
}