the-world-engine
Version:
three.js based, unity like game engine for browser
199 lines (198 loc) • 6.72 kB
TypeScript
import { Vector2 } from "three/src/Three";
import { Component } from "../../hierarchy_object/Component";
import type { IGridCoordinatable } from "../helper/IGridCoordinatable";
import type { IUnknownSizeCssRenderOption } from "../render/CssRenderer";
import type { ICssImageRenderOption } from "../render/CssSpriteRenderer";
import { ImageRenderingMode } from "../render/CssSpriteRenderer";
import type { TileAtlasItem } from "../render/CssTilemapRenderer";
import { CssFilter } from "../render/filter/CssFilter";
/**
* tilemap for grid system
* there is no limitation of tilemap size, it use multiple tilemap as chunk
*
* coordinate system is same as world coordinate system (positive x is right, positive y is up)
*
* important: grid position data is stored as string ("x_y" format)
* so this component might not work properly if this component's gameObject.position is not integer
*/
export declare class CssTilemapChunkRenderer extends Component implements IGridCoordinatable, IUnknownSizeCssRenderOption, ICssImageRenderOption {
private readonly _cssTilemapRendererMap;
private readonly _tilemapTileCountMap;
private _chunkSize;
private _tileWidth;
private _tileHeight;
private _tileResolutionX;
private _tileResolutionY;
private _tilemapScale;
private _imageSources;
private _pointerEvents;
private _viewScale;
private _imageRenderingMode;
private readonly onFilterUpdate;
private readonly _filter;
private readonly _initializeFunctions;
private _started;
start(): void;
private updateTilemapPosition;
private getIndexXFromKey;
private getIndexYFromKey;
private getKeyFromIndex;
private computeDrawPosition;
private getTilemapRenedererOrCreate;
private getTilemapRenedererOrNull;
/**
* draw tile at position.
* @param x x position in grid
* @param y y position in grid
* @param imageIndex index of image in imageSources
* @param atlasIndex index of atlas in imageSources
* @returns
*/
drawTile(x: number, y: number, imageIndex: number, atlasIndex?: number): void;
/**
* draw tile from two dimensional array.
*
* array left bottom is (0, 0) in grid coordinate system
* @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)[][], xOffset: number, yOffset: number): void;
/**
* clear tile at position.
* @param x x position in grid
* @param y y position in grid
* @returns
*/
clearTile(x: number, y: number): void;
/**
* chunk size. (default: 16)
*/
get chunkSize(): number;
/**
* chunk size. (default: 16)
*/
set chunkSize(value: number);
/**
* image sources for drawing.
*/
set imageSources(value: TileAtlasItem[]);
/**
* if this value is true, this object will be rendered with css style pointer-events: "auto"
* it means that this object can be clicked. (default: true)
*/
get pointerEvents(): boolean;
/**
* if this value is true, this object will be rendered with css style pointer-events: "auto"
* it means that this object can be clicked. (default: true)
*/
set pointerEvents(value: boolean);
/**
* grid cell width. (default: 1)
*/
get gridCellWidth(): number;
/**
* grid cell width. (default: 1)
*/
set gridCellWidth(value: number);
/**
* grid cell height. (default: 1)
*/
get gridCellHeight(): number;
/**
* grid cell height. (default: 1)
*/
set gridCellHeight(value: number);
/**
* tile resolution x. (default: 16)
*
* higher value means higher quality of rendering.
*/
get tileResolutionX(): number;
/**
* tile resolution x. (default: 16)
*
* higher value means higher quality of rendering.
*/
set tileResolutionX(value: number);
/**
* tile resolution y. (default: 16)
*
* higher value means higher quality of rendering.
*/
get tileResolutionY(): number;
/**
* tile resolution y. (default: 16)
*
* higher value means higher quality of rendering.
*/
set tileResolutionY(value: number);
/**
* tilemaps scale. (default: 1.001)
*
* If this value is 1 due to precision issues, there's a gap between the tilemaps.
*/
get tilemapScale(): number;
/**
* tilemaps scale. (default: 1.001)
*
* If this value is 1 due to precision issues, there's a gap between the tilemaps.
*/
set tilemapScale(value: number);
/**
* grid coordinate center position
*
* if chunkSize is even, The center position will be skewed by half the chunkSize.
*/
get gridCenter(): Vector2;
/**
* grid coordinate center position x
*
* if chunkSize is even, The center position will be skewed by half the chunkSize.
*/
get gridCenterX(): number;
/**
* grid coordinate center position y
*
* if chunkSize is even, The center position will be skewed by half the chunkSize.
*/
get gridCenterY(): number;
/**
* element viewScale
*
* value to scaling html element. the smaller value, the higher resolution of element.
*
* note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed.
* @param value
*/
get viewScale(): number;
/**
* element viewScale
*
* value to scaling html element. the smaller value, the higher resolution of element.
*
* note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed.
* @param value
*/
set viewScale(value: number);
/**
* css filter
*/
get filter(): CssFilter;
/**
* 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);
}