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

three.js based, unity like game engine for browser

import { Vector2 } from "three/src/Three";
import { CssRenderer } from "./CssRenderer";
import type { ICssImageRenderOption } from "./CssSpriteRenderer";
import { ImageRenderingMode } from "./CssSpriteRenderer";
/**
 * represents a sprite atlas that is used by tilemap
 */
export declare class TileAtlasItem {
    private readonly _htmlImageElement;
    private readonly _columnCount;
    private readonly _rowCount;
    /**
     *
     * @param htmlImageElement image source, this image must be loaded before this class is created
     * @param columnCount sprite atlas column count (default: 1)
     * @param rowCount sprite atlas row count (default: 1)
     */
    constructor(htmlImageElement: HTMLImageElement, columnCount?: number, rowCount?: number);
    /**
     * image source, guaranteed to be loaded before this class is created
     */
    get htmlImageElement(): HTMLImageElement;
    /**
     * sprite atlas column count
     */
    get columnCount(): number;
    /**
     * sprite atlas row count
     */
    get rowCount(): number;
}
/**
 * tilemap for grid system
 * there is limitation of tilemap size
 *
 * coordinate system is row column (positive x is right, positive y is down)
 */
export declare class CssTilemapRenderer extends CssRenderer<HTMLCanvasElement> implements ICssImageRenderOption {
    private _columnCount;
    private _rowCount;
    private _tileWidth;
    private _tileHeight;
    private _tileResolutionX;
    private _tileResolutionY;
    private _imageSources;
    private _imageRenderingMode;
    private readonly _initializeFunctions;
    protected renderInitialize(): void;
    protected updateCenterOffset(updateTransform: boolean): void;
    protected updateViewScale(updateTransform: boolean): void;
    private drawTileMap;
    /**
     * draw tile at position.
     * @param column column in tilemap
     * @param row row in tilemap
     * @param imageIndex index of image in imageSources
     * @param atlasIndex index of atlas in imageSources
     * @returns
     */
    drawTile(column: number, row: number, imageIndex: number, atlasIndex?: number): void;
    /**
     * draw tile from two dimensional array.
     *
     * array left upper corner is (0, 0) in tilemap
     * @param array array of image index. { i: 0, a: 1 } means imageSources[0] in atlas[1]
     * @param xOffset array x offset, if you want to add tile from array[1][3] to (2, 3) you should set xOffset = 1
     * @param yOffset array y offset, if you want to add tile from array[3][1] to (3, 2) you should set yOffset = 1
     * @returns
     */
    drawTileFromTwoDimensionalArray(array: ({
        i: number;
        a: number;
    } | null)[][], columnOffset: number, rowOffset: number): void;
    /**
     * clear tile at position.
     * @param column column in tilemap
     * @param row row in tilemap
     * @returns
     */
    clearTile(column: number, row: number): void;
    /**
     * image sources for drawing.
     */
    set imageSources(value: TileAtlasItem[]);
    /**
     * column count of the tilemap (default: 10)
     */
    get columnCount(): number;
    /**
     * column count of the tilemap (default: 10)
     */
    set columnCount(value: number);
    /**
     * row count of the tilemap (default: 10)
     */
    get rowCount(): number;
    /**
     * row count of the tilemap (default: 10)
     */
    set rowCount(value: number);
    /**
     * tile width (default: 1)
     */
    get gridCellWidth(): number;
    /**
     * tile width (default: 1)
     */
    set gridCellWidth(value: number);
    /**
     * tile height (default: 1)
     */
    get gridCellHeight(): number;
    /**
     * tile height (default: 1)
     */
    set gridCellHeight(value: number);
    /**
     * tile resolution x (default: 16)
     *
     * if your assets are high resolution, you should set this value to higher value.
     */
    get tileResolutionX(): number;
    /**
     * tile resolution x (default: 16)
     *
     * if your assets are high resolution, you should set this value to higher value.
     */
    set tileResolutionX(value: number);
    /**
     * tile resolution y (default: 16)
     *
     * if your assets are high resolution, you should set this value to higher value.
     */
    get tileResolutionY(): number;
    /**
     * tile resolution y (default: 16)
     *
     * if your assets are high resolution, you should set this value to higher value.
     */
    set tileResolutionY(value: number);
    /**
     * grid coordinate center position
     *
     *
     * if columnCount is even, The center position will be skewed by half the tile width.
     *
     * if rowCount is even, The center position will be skewed by half the tile height.
     */
    get gridCenter(): Vector2;
    /**
     * grid coordinate center position x
     *
     * if columnCount is even, The center position will be skewed by half the tile width.
     */
    get gridCenterX(): number;
    /**
     * grid coordinate center position y
     *
     * if rowCount is even, The center position will be skewed by half the tile height.
     */
    get gridCenterY(): 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);
}