@haiyue/extensions 0.1.0

package/dist/tilemap/Tilemap2DComponent.d.ts

@@ -0,0 +1,110 @@
+import { Component } from '@haiyue/engine';
+export type TilemapCellValue = number;
+export type TilemapPaletteColor = [number, number, number, number];
+export interface Tilemap2DComponentOptions {
+    columns?: number;
+    rows?: number;
+    cellWidth?: number;
+    cellHeight?: number;
+    originX?: number;
+    originY?: number;
+    gap?: number;
+    cells?: ArrayLike<TilemapCellValue>;
+    palette?: TilemapPaletteColor[];
+}
+export declare class Tilemap2DComponent extends Component {
+    static UniqueCheckType: number;
+    static UniqueSymbol: symbol;
+    static editor: {
+        fields: {
+            columns: {
+                type: string;
+                label: string;
+                min: number;
+                step: number;
+            };
+            rows: {
+                type: string;
+                label: string;
+                min: number;
+                step: number;
+            };
+            cellWidth: {
+                type: string;
+                label: string;
+                min: number;
+                step: number;
+            };
+            cellHeight: {
+                type: string;
+                label: string;
+                min: number;
+                step: number;
+            };
+            gap: {
+                type: string;
+                label: string;
+                min: number;
+                step: number;
+            };
+            originX: {
+                type: string;
+                label: string;
+                step: number;
+            };
+            originY: {
+                type: string;
+                label: string;
+                step: number;
+            };
+            palette: {
+                type: string;
+                label: string;
+                rows: number;
+            };
+            cells: {
+                type: string;
+                label: string;
+                rows: number;
+            };
+        };
+    };
+    private _columns;
+    private _rows;
+    private _cellWidth;
+    private _cellHeight;
+    private _originX;
+    private _originY;
+    private _gap;
+    private _cells;
+    private _palette;
+    private _version;
+    constructor(options?: Tilemap2DComponentOptions);
+    get columns(): number;
+    set columns(value: number);
+    get rows(): number;
+    set rows(value: number);
+    get cellWidth(): number;
+    set cellWidth(value: number);
+    get cellHeight(): number;
+    set cellHeight(value: number);
+    get originX(): number;
+    set originX(value: number);
+    get originY(): number;
+    set originY(value: number);
+    get gap(): number;
+    set gap(value: number);
+    get cells(): Int16Array;
+    set cells(value: Int16Array);
+    get palette(): TilemapPaletteColor[];
+    set palette(value: TilemapPaletteColor[]);
+    get version(): number;
+    markDirty(): this;
+    index(column: number, row: number): number;
+    contains(column: number, row: number): boolean;
+    getCell(column: number, row: number): TilemapCellValue;
+    setCell(column: number, row: number, value: TilemapCellValue): this;
+    clear(value?: number): this;
+    resize(columns: number, rows: number): this;
+    clone(): Tilemap2DComponent;
+}

package/dist/tilemap/Tilemap2DRenderSystem.d.ts

@@ -0,0 +1,11 @@
+import { type IEngine, type RenderCommandContext } from '@haiyue/engine/extension-authoring';
+import { Entity, World } from '@haiyue/engine/ecs';
+import { RenderSystem2DBase, type RenderSystem2DBaseOptions } from '../utils/RenderSystem2DBase';
+export type Tilemap2DRenderSystemOptions = RenderSystem2DBaseOptions;
+export declare class Tilemap2DRenderSystem extends RenderSystem2DBase {
+    private renderer;
+    constructor(engine: IEngine, cameraEntity: Entity, options?: Tilemap2DRenderSystemOptions);
+    record(world: World, context: RenderCommandContext): this;
+    destroy(): this;
+    protected releaseGpuResourcesForRecovery(): void;
+}

package/dist/tilemap/Tilemap2DRenderer.d.ts

@@ -0,0 +1,24 @@
+import { type IEngine } from '@haiyue/engine/extension-authoring';
+import type { Tilemap2DComponent } from './Tilemap2DComponent';
+export declare class Tilemap2DRenderer {
+    reverseZ: boolean;
+    msaaSamples: 1 | 4;
+    private engine;
+    private cameraGpu;
+    private objectLayout;
+    private shaderModule;
+    private pipelineLayout;
+    private sharedGpu;
+    private entityCache;
+    private signatureCache;
+    private initialized;
+    prepare(engine: IEngine): void;
+    updateCamera(viewProj: Float32Array): void;
+    releaseEntitiesNotIn(liveEntities: ReadonlySet<number>): void;
+    render(passEncoder: GPURenderPassEncoder, entityId: number, tilemap: Tilemap2DComponent, worldMatrix: Float32Array): void;
+    private computeSignature;
+    private buildVertices;
+    private getPipeline;
+    destroy(): void;
+    private destroyEntityGpu;
+}

package/dist/tilemap/TilemapPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { EnginePlugin } from '@haiyue/engine/core';
+import type { RenderPipelineEntryOptions } from '@haiyue/engine/extension-authoring';
+import { type Tilemap2DRenderSystemOptions } from './Tilemap2DRenderSystem';
+export interface TilemapPluginOptions {
+    system?: Tilemap2DRenderSystemOptions;
+    render?: RenderPipelineEntryOptions | false | null;
+}
+export declare function createTilemapPlugin(options?: TilemapPluginOptions): EnginePlugin;

package/dist/tilemap.d.ts

@@ -0,0 +1,6 @@
+export { Tilemap2DComponent } from './tilemap/Tilemap2DComponent';
+export type { Tilemap2DComponentOptions, TilemapCellValue, TilemapPaletteColor } from './tilemap/Tilemap2DComponent';
+export { Tilemap2DRenderSystem } from './tilemap/Tilemap2DRenderSystem';
+export type { Tilemap2DRenderSystemOptions } from './tilemap/Tilemap2DRenderSystem';
+export { createTilemapPlugin } from './tilemap/TilemapPlugin';
+export type { TilemapPluginOptions } from './tilemap/TilemapPlugin';

package/dist/tilemap.js

@@ -0,0 +1,535 @@
+import { Component } from '@haiyue/engine';
+import { UniqueCheckType } from '@haiyue/engine/ecs';
+import { requireEngineDevice, getExtensionGPUResourceTracker, beginRenderCommandPass } from '@haiyue/engine/extension-authoring';
+import { c as createCamera2DGpu, f as writeFloatBuffer, g as createObject2DGpu, w as writeObjectMatrixIfChanged, d as destroyCamera2DGpu, h as destroyObject2DGpu, i as createCamera2DLayout, b as createObject2DLayout, R as RenderSystem2DBase } from './chunks/RenderSystem2DBase-DDT61dAu.js';
+import { t as tilemap2dWgsl } from './chunks/2d-ui-tilemap2d.generated-gebw4mX7.js';
+import { E as EXTENSIONS_PLUGIN_VERSION, i as installEditorRenderSystem, r as removeSystem } from './chunks/pluginUtils-CvwroRMd.js';
+import '@haiyue/engine/components';
+import 'wgpu-matrix';
+
+class Tilemap2DComponent extends Component {
+    static UniqueCheckType = UniqueCheckType.SYMBOL | UniqueCheckType.REPLACE;
+    static UniqueSymbol = Symbol.for('Tilemap2DComponent');
+    static editor = {
+        fields: {
+            columns: { type: 'number', label: 'Columns', min: 1, step: 1 },
+            rows: { type: 'number', label: 'Rows', min: 1, step: 1 },
+            cellWidth: { type: 'number', label: 'Cell Width', min: 0.001, step: 1 },
+            cellHeight: { type: 'number', label: 'Cell Height', min: 0.001, step: 1 },
+            gap: { type: 'number', label: 'Gap', min: 0, step: 1 },
+            originX: { type: 'number', label: 'Origin X', step: 1 },
+            originY: { type: 'number', label: 'Origin Y', step: 1 },
+            palette: { type: 'json', label: 'Palette JSON', rows: 7 },
+            cells: { type: 'int-array', label: 'Cells JSON', rows: 8 },
+        },
+    };
+    _columns;
+    _rows;
+    _cellWidth;
+    _cellHeight;
+    _originX;
+    _originY;
+    _gap;
+    _cells;
+    _palette;
+    _version = 0;
+    constructor(options = {}) {
+        super('Tilemap2DComponent');
+        this._columns = Math.max(1, Math.floor(options.columns ?? 10));
+        this._rows = Math.max(1, Math.floor(options.rows ?? 20));
+        this._cellWidth = options.cellWidth ?? 32;
+        this._cellHeight = options.cellHeight ?? 32;
+        this._originX = options.originX ?? 0;
+        this._originY = options.originY ?? 0;
+        this._gap = Math.max(0, options.gap ?? 1);
+        this._cells = new Int16Array(this.columns * this.rows);
+        if (options.cells)
+            this._cells.set(Array.from(options.cells).slice(0, this._cells.length));
+        this._palette = options.palette?.length
+            ? options.palette.map(color => [...color])
+            : [
+                [0, 0, 0, 0],
+                [0.18, 0.62, 1, 1],
+                [0.96, 0.72, 0.18, 1],
+                [0.35, 0.86, 0.48, 1],
+                [0.92, 0.28, 0.36, 1],
+            ];
+    }
+    get columns() {
+        return this._columns;
+    }
+    set columns(value) {
+        const next = Math.max(1, Math.floor(value));
+        if (this._columns === next)
+            return;
+        this._columns = next;
+        this.markDirty();
+    }
+    get rows() {
+        return this._rows;
+    }
+    set rows(value) {
+        const next = Math.max(1, Math.floor(value));
+        if (this._rows === next)
+            return;
+        this._rows = next;
+        this.markDirty();
+    }
+    get cellWidth() {
+        return this._cellWidth;
+    }
+    set cellWidth(value) {
+        if (this._cellWidth === value)
+            return;
+        this._cellWidth = value;
+        this.markDirty();
+    }
+    get cellHeight() {
+        return this._cellHeight;
+    }
+    set cellHeight(value) {
+        if (this._cellHeight === value)
+            return;
+        this._cellHeight = value;
+        this.markDirty();
+    }
+    get originX() {
+        return this._originX;
+    }
+    set originX(value) {
+        if (this._originX === value)
+            return;
+        this._originX = value;
+        this.markDirty();
+    }
+    get originY() {
+        return this._originY;
+    }
+    set originY(value) {
+        if (this._originY === value)
+            return;
+        this._originY = value;
+        this.markDirty();
+    }
+    get gap() {
+        return this._gap;
+    }
+    set gap(value) {
+        const next = Math.max(0, value);
+        if (this._gap === next)
+            return;
+        this._gap = next;
+        this.markDirty();
+    }
+    get cells() {
+        return this._cells;
+    }
+    set cells(value) {
+        this._cells = value;
+        this.markDirty();
+    }
+    get palette() {
+        return this._palette;
+    }
+    set palette(value) {
+        this._palette = value;
+        this.markDirty();
+    }
+    get version() {
+        return this._version;
+    }
+    markDirty() {
+        this._version++;
+        return this;
+    }
+    index(column, row) {
+        return row * this.columns + column;
+    }
+    contains(column, row) {
+        return column >= 0 && row >= 0 && column < this.columns && row < this.rows;
+    }
+    getCell(column, row) {
+        if (!this.contains(column, row))
+            return 0;
+        return this.cells[this.index(column, row)] ?? 0;
+    }
+    setCell(column, row, value) {
+        if (this.contains(column, row)) {
+            const index = this.index(column, row);
+            if (this._cells[index] !== value) {
+                this._cells[index] = value;
+                this.markDirty();
+            }
+        }
+        return this;
+    }
+    clear(value = 0) {
+        this._cells.fill(value);
+        this.markDirty();
+        return this;
+    }
+    resize(columns, rows) {
+        const nextColumns = Math.max(1, Math.floor(columns));
+        const nextRows = Math.max(1, Math.floor(rows));
+        if (nextColumns === this.columns && nextRows === this.rows)
+            return this;
+        const next = new Int16Array(nextColumns * nextRows);
+        const copyColumns = Math.min(this.columns, nextColumns);
+        const copyRows = Math.min(this.rows, nextRows);
+        for (let row = 0; row < copyRows; row++) {
+            for (let column = 0; column < copyColumns; column++) {
+                next[row * nextColumns + column] = this.getCell(column, row);
+            }
+        }
+        this._columns = nextColumns;
+        this._rows = nextRows;
+        this._cells = next;
+        this.markDirty();
+        return this;
+    }
+    clone() {
+        return new Tilemap2DComponent({
+            columns: this.columns,
+            rows: this.rows,
+            cellWidth: this.cellWidth,
+            cellHeight: this.cellHeight,
+            originX: this.originX,
+            originY: this.originY,
+            gap: this.gap,
+            cells: this.cells,
+            palette: this.palette,
+        });
+    }
+}
+
+const TILEMAP_WGSL = tilemap2dWgsl;
+const TILEMAP_INITIAL_VERTEX_FLOATS = 36;
+const TILEMAP_INITIAL_VERTEX_BYTES = TILEMAP_INITIAL_VERTEX_FLOATS * 4;
+const tilemapSharedGpuCache = new WeakMap();
+function getTilemapSharedGpu(device) {
+    let shared = tilemapSharedGpuCache.get(device);
+    if (shared)
+        return shared;
+    const cameraLayout = createCamera2DLayout(device);
+    const objectLayout = createObject2DLayout(device);
+    const shaderModule = device.createShaderModule({ code: TILEMAP_WGSL });
+    const pipelineLayout = device.createPipelineLayout({
+        bindGroupLayouts: [cameraLayout, objectLayout],
+    });
+    shared = {
+        cameraLayout,
+        objectLayout,
+        shaderModule,
+        pipelineLayout,
+        pipelineCache: new Map(),
+    };
+    tilemapSharedGpuCache.set(device, shared);
+    return shared;
+}
+class Tilemap2DRenderer {
+    reverseZ = false;
+    msaaSamples = 1;
+    engine;
+    cameraGpu;
+    objectLayout;
+    shaderModule;
+    pipelineLayout;
+    sharedGpu;
+    entityCache = new Map();
+    signatureCache = new WeakMap();
+    initialized = false;
+    prepare(engine) {
+        if (this.initialized)
+            return;
+        this.initialized = true;
+        this.engine = engine;
+        const device = requireEngineDevice(engine);
+        this.sharedGpu = getTilemapSharedGpu(device);
+        this.cameraGpu = createCamera2DGpu(device, getExtensionGPUResourceTracker(engine), this.sharedGpu.cameraLayout);
+        this.objectLayout = this.sharedGpu.objectLayout;
+        this.shaderModule = this.sharedGpu.shaderModule;
+        this.pipelineLayout = this.sharedGpu.pipelineLayout;
+    }
+    updateCamera(viewProj) {
+        writeFloatBuffer(requireEngineDevice(this.engine).queue, this.cameraGpu.buffer, viewProj);
+    }
+    releaseEntitiesNotIn(liveEntities) {
+        for (const [entityId, entityGpu] of this.entityCache) {
+            if (!liveEntities.has(entityId)) {
+                this.destroyEntityGpu(entityGpu);
+                this.entityCache.delete(entityId);
+            }
+        }
+    }
+    render(passEncoder, entityId, tilemap, worldMatrix) {
+        const device = requireEngineDevice(this.engine);
+        const signature = this.computeSignature(tilemap);
+        let entityGpu = this.entityCache.get(entityId);
+        if (!entityGpu) {
+            entityGpu = {
+                objectGpu: createObject2DGpu(device, this.objectLayout, getExtensionGPUResourceTracker(this.engine)),
+                vertexBuffer: device.createBuffer({
+                    size: TILEMAP_INITIAL_VERTEX_BYTES,
+                    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+                }),
+                vertexBufferSize: TILEMAP_INITIAL_VERTEX_BYTES,
+                vertexData: new Float32Array(TILEMAP_INITIAL_VERTEX_FLOATS),
+                vertexByteLength: 0,
+                vertexCount: 0,
+                tilemapSignature: '',
+            };
+            getExtensionGPUResourceTracker(this.engine)?.trackBuffer(entityGpu.vertexBuffer, 'Tilemap2DRenderer.vertexBuffer', entityGpu.vertexBufferSize);
+            this.entityCache.set(entityId, entityGpu);
+        }
+        if (entityGpu.tilemapSignature !== signature) {
+            this.buildVertices(tilemap, entityGpu);
+            entityGpu.tilemapSignature = signature;
+            if (entityGpu.vertexByteLength > entityGpu.vertexBufferSize) {
+                getExtensionGPUResourceTracker(this.engine)?.untrackBuffer(entityGpu.vertexBuffer);
+                entityGpu.vertexBuffer.destroy();
+                entityGpu.vertexBufferSize = Math.max(entityGpu.vertexByteLength, entityGpu.vertexBufferSize * 2);
+                entityGpu.vertexBuffer = device.createBuffer({
+                    size: entityGpu.vertexBufferSize,
+                    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+                });
+                getExtensionGPUResourceTracker(this.engine)?.trackBuffer(entityGpu.vertexBuffer, 'Tilemap2DRenderer.vertexBuffer', entityGpu.vertexBufferSize);
+            }
+            if (entityGpu.vertexByteLength > 0) {
+                device.queue.writeBuffer(entityGpu.vertexBuffer, 0, entityGpu.vertexData.buffer, entityGpu.vertexData.byteOffset, entityGpu.vertexByteLength);
+            }
+        }
+        if (entityGpu.vertexCount === 0)
+            return;
+        writeObjectMatrixIfChanged(device.queue, entityGpu.objectGpu, worldMatrix);
+        passEncoder.setPipeline(this.getPipeline());
+        passEncoder.setBindGroup(0, this.cameraGpu.bindGroup);
+        passEncoder.setBindGroup(1, entityGpu.objectGpu.bindGroup);
+        passEncoder.setVertexBuffer(0, entityGpu.vertexBuffer);
+        passEncoder.draw(entityGpu.vertexCount);
+    }
+    computeSignature(tilemap) {
+        const cached = this.signatureCache.get(tilemap);
+        if (cached && cached.version === tilemap.version) {
+            return cached.signature;
+        }
+        const signature = String(tilemap.version);
+        this.signatureCache.set(tilemap, {
+            version: tilemap.version,
+            signature,
+        });
+        return signature;
+    }
+    buildVertices(tilemap, entityGpu) {
+        let count = 0;
+        for (const cell of tilemap.cells) {
+            if (cell > 0)
+                count++;
+        }
+        if (count === 0) {
+            entityGpu.vertexByteLength = 0;
+            entityGpu.vertexCount = 0;
+            return;
+        }
+        const requiredFloats = count * 6 * 6;
+        if (entityGpu.vertexData.length < requiredFloats) {
+            entityGpu.vertexData = new Float32Array(Math.max(requiredFloats, entityGpu.vertexData.length * 2, 36));
+        }
+        const vertices = entityGpu.vertexData;
+        let offset = 0;
+        const gap = tilemap.gap;
+        const w = Math.max(0, tilemap.cellWidth - gap);
+        const h = Math.max(0, tilemap.cellHeight - gap);
+        const push = (x, y, color) => {
+            vertices[offset++] = x;
+            vertices[offset++] = y;
+            vertices[offset++] = color[0] ?? 1;
+            vertices[offset++] = color[1] ?? 1;
+            vertices[offset++] = color[2] ?? 1;
+            vertices[offset++] = color[3] ?? 1;
+        };
+        for (let row = 0; row < tilemap.rows; row++) {
+            for (let column = 0; column < tilemap.columns; column++) {
+                const value = tilemap.getCell(column, row);
+                if (value <= 0)
+                    continue;
+                const color = tilemap.palette[value] ?? tilemap.palette[1] ?? [1, 1, 1, 1];
+                const x0 = tilemap.originX + column * tilemap.cellWidth + gap * 0.5;
+                const y0 = tilemap.originY + row * tilemap.cellHeight + gap * 0.5;
+                const x1 = x0 + w;
+                const y1 = y0 + h;
+                push(x0, y0, color);
+                push(x1, y0, color);
+                push(x1, y1, color);
+                push(x0, y0, color);
+                push(x1, y1, color);
+                push(x0, y1, color);
+            }
+        }
+        entityGpu.vertexByteLength = requiredFloats * 4;
+        entityGpu.vertexCount = count * 6;
+    }
+    getPipeline() {
+        const depthFormat = this.engine.getDepthFormat(this.reverseZ);
+        const key = (this.reverseZ ? 1 : 0) | ((this.msaaSamples > 1 ? 1 : 0) << 1);
+        let pipeline = this.sharedGpu.pipelineCache.get(key);
+        if (pipeline)
+            return pipeline;
+        const device = requireEngineDevice(this.engine);
+        const { format } = this.engine;
+        const created = device.createRenderPipeline({
+            layout: this.pipelineLayout,
+            vertex: {
+                module: this.shaderModule,
+                entryPoint: 'vs_main',
+                buffers: [{
+                        arrayStride: 24,
+                        attributes: [
+                            { shaderLocation: 0, offset: 0, format: 'float32x2' },
+                            { shaderLocation: 1, offset: 8, format: 'float32x4' },
+                        ],
+                    }],
+            },
+            fragment: {
+                module: this.shaderModule,
+                entryPoint: 'fs_main',
+                targets: [{
+                        format,
+                        blend: {
+                            color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                        },
+                    }],
+            },
+            primitive: { topology: 'triangle-list', cullMode: 'none' },
+            depthStencil: {
+                format: depthFormat,
+                depthWriteEnabled: false,
+                depthCompare: 'always',
+            },
+            multisample: { count: this.msaaSamples },
+        });
+        this.sharedGpu.pipelineCache.set(key, created);
+        return created;
+    }
+    destroy() {
+        if (this.cameraGpu)
+            destroyCamera2DGpu(this.cameraGpu);
+        for (const entity of this.entityCache.values())
+            this.destroyEntityGpu(entity);
+        this.entityCache.clear();
+    }
+    destroyEntityGpu(entity) {
+        destroyObject2DGpu(entity.objectGpu);
+        getExtensionGPUResourceTracker(this.engine)?.untrackBuffer(entity.vertexBuffer);
+        entity.vertexBuffer.destroy();
+    }
+}
+
+class Tilemap2DRenderSystem extends RenderSystem2DBase {
+    renderer = null;
+    constructor(engine, cameraEntity, options = {}) {
+        super({ all: [Tilemap2DComponent] }, engine, cameraEntity, options, 'Tilemap2DRenderSystem');
+    }
+    record(world, context) {
+        if (this.disabled)
+            return this;
+        if (!this.renderer) {
+            this.renderer = new Tilemap2DRenderer();
+            this.renderer.prepare(this.engine);
+        }
+        this.renderer.reverseZ = context.view?.reverseZ ?? this.engine.reverseZ;
+        this.renderer.msaaSamples = context.view?.sampleCount ?? this.engine.msaaSamples;
+        const liveEntities = this.beginLiveEntityTracking();
+        const camera = this.getCamera2D(context);
+        if (!camera)
+            return this;
+        this.renderer.updateCamera(this.computeCameraViewProjection(camera, context));
+        const { passEncoder, ownsPass } = beginRenderCommandPass(context);
+        const entities = this.entitySet.get(world);
+        if (entities)
+            for (const entity of entities) {
+                if (!this.isEntityRenderable(entity))
+                    continue;
+                const tilemap = entity.getComponent(Tilemap2DComponent);
+                if (!tilemap)
+                    continue;
+                this.renderer.render(passEncoder, entity.id, tilemap, this.getWorldMatrix2D(entity, context));
+                this.markEntityLive(entity);
+            }
+        if (ownsPass)
+            passEncoder.end();
+        this.renderer.releaseEntitiesNotIn(liveEntities);
+        return this;
+    }
+    destroy() {
+        this.releaseGpuResourcesForRecovery();
+        return super.destroy();
+    }
+    releaseGpuResourcesForRecovery() {
+        this.renderer?.destroy();
+        this.renderer = null;
+    }
+}
+
+function createTilemapPlugin(options = {}) {
+    let system = null;
+    return {
+        name: '@haiyue/extensions/tilemap',
+        version: EXTENSIONS_PLUGIN_VERSION,
+        installEngine(context) {
+            context.registerComponent({ type: 'Tilemap2DComponent', component: Tilemap2DComponent });
+        },
+        installScene(context) {
+            context.registerComponent({ type: 'Tilemap2DComponent', component: Tilemap2DComponent });
+            system = new Tilemap2DRenderSystem(context.engine, context.cameraEntity, options.system);
+            context.addSystem(system, options.render ?? { pass: 'shared', loadOp: system.loadOp });
+        },
+        uninstallScene(context) {
+            removeSystem(context, system);
+            system = null;
+        },
+        installEditor(context) {
+            context.registerContribution({ components: [{
+                        type: 'Tilemap2DComponent',
+                        create: () => new Tilemap2DComponent({ columns: 10, rows: 20, cellWidth: 32, cellHeight: 32, gap: 1 }),
+                        inspector: Tilemap2DComponent.editor,
+                        serialize(component) {
+                            return {
+                                type: 'Tilemap2DComponent',
+                                columns: component.columns,
+                                rows: component.rows,
+                                cellWidth: component.cellWidth,
+                                cellHeight: component.cellHeight,
+                                originX: component.originX,
+                                originY: component.originY,
+                                gap: component.gap,
+                                cells: Array.from(component.cells),
+                                palette: component.palette.map(color => [...color]),
+                            };
+                        },
+                        deserialize(data) {
+                            const value = data;
+                            return value.type === 'Tilemap2DComponent' ? new Tilemap2DComponent(value) : null;
+                        },
+                        clone: (component) => component.clone(),
+                        installViewport(viewport) {
+                            return installEditorRenderSystem(viewport, Tilemap2DRenderSystem, () => new Tilemap2DRenderSystem(viewport.engine, viewport.camera2DEntity, options.system));
+                        },
+                        runtimeExport: {
+                            imports: [{ from: '@haiyue/extensions/tilemap', names: ['Tilemap2DComponent', 'Tilemap2DRenderSystem'] }],
+                            systems: ['Tilemap2DRenderSystem'],
+                            deserializeExpression: 'new Tilemap2DComponent(data)',
+                            installSystems: `  const tilemapCamera = findCamera2DEntity(world);
+  if (tilemapCamera && hasComponentType(world, Tilemap2DComponent)) {
+    applyViewportSettingsToCamera2D(tilemapCamera, scene.globals);
+    addRenderSystem(new Tilemap2DRenderSystem(engine, tilemapCamera, { loadOp: 'load', priority: 2 }), { pass: 'shared', loadOp: 'load' });
+  }`,
+                            has2D: true,
+                        },
+                    }] });
+        },
+    };
+}
+
+export { Tilemap2DComponent, Tilemap2DRenderSystem, createTilemapPlugin };
+//# sourceMappingURL=tilemap.js.map