@haiyue/extensions 0.1.0

package/src/tilemap/Tilemap2DComponent.ts

@@ -0,0 +1,232 @@
+import { Component } from '@haiyue/engine';
+import { UniqueCheckType } from '@haiyue/engine/ecs';
+
+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 class Tilemap2DComponent extends Component {
+  static override UniqueCheckType = UniqueCheckType.SYMBOL | UniqueCheckType.REPLACE;
+  static override 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 },
+    },
+  };
+
+  private _columns: number;
+  private _rows: number;
+  private _cellWidth: number;
+  private _cellHeight: number;
+  private _originX: number;
+  private _originY: number;
+  private _gap: number;
+  private _cells: Int16Array;
+  private _palette: TilemapPaletteColor[];
+  private _version = 0;
+
+  constructor(options: Tilemap2DComponentOptions = {}) {
+    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] as TilemapPaletteColor)
+      : [
+          [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(): number {
+    return this._columns;
+  }
+
+  set columns(value: number) {
+    const next = Math.max(1, Math.floor(value));
+    if (this._columns === next) return;
+    this._columns = next;
+    this.markDirty();
+  }
+
+  get rows(): number {
+    return this._rows;
+  }
+
+  set rows(value: number) {
+    const next = Math.max(1, Math.floor(value));
+    if (this._rows === next) return;
+    this._rows = next;
+    this.markDirty();
+  }
+
+  get cellWidth(): number {
+    return this._cellWidth;
+  }
+
+  set cellWidth(value: number) {
+    if (this._cellWidth === value) return;
+    this._cellWidth = value;
+    this.markDirty();
+  }
+
+  get cellHeight(): number {
+    return this._cellHeight;
+  }
+
+  set cellHeight(value: number) {
+    if (this._cellHeight === value) return;
+    this._cellHeight = value;
+    this.markDirty();
+  }
+
+  get originX(): number {
+    return this._originX;
+  }
+
+  set originX(value: number) {
+    if (this._originX === value) return;
+    this._originX = value;
+    this.markDirty();
+  }
+
+  get originY(): number {
+    return this._originY;
+  }
+
+  set originY(value: number) {
+    if (this._originY === value) return;
+    this._originY = value;
+    this.markDirty();
+  }
+
+  get gap(): number {
+    return this._gap;
+  }
+
+  set gap(value: number) {
+    const next = Math.max(0, value);
+    if (this._gap === next) return;
+    this._gap = next;
+    this.markDirty();
+  }
+
+  get cells(): Int16Array {
+    return this._cells;
+  }
+
+  set cells(value: Int16Array) {
+    this._cells = value;
+    this.markDirty();
+  }
+
+  get palette(): TilemapPaletteColor[] {
+    return this._palette;
+  }
+
+  set palette(value: TilemapPaletteColor[]) {
+    this._palette = value;
+    this.markDirty();
+  }
+
+  get version(): number {
+    return this._version;
+  }
+
+  markDirty(): this {
+    this._version++;
+    return this;
+  }
+
+  index(column: number, row: number): number {
+    return row * this.columns + column;
+  }
+
+  contains(column: number, row: number): boolean {
+    return column >= 0 && row >= 0 && column < this.columns && row < this.rows;
+  }
+
+  getCell(column: number, row: number): TilemapCellValue {
+    if (!this.contains(column, row)) return 0;
+    return this.cells[this.index(column, row)] ?? 0;
+  }
+
+  setCell(column: number, row: number, value: TilemapCellValue): this {
+    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 {
+    this._cells.fill(value);
+    this.markDirty();
+    return this;
+  }
+
+  resize(columns: number, rows: number): this {
+    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;
+  }
+
+  override clone(): Tilemap2DComponent {
+    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,
+    });
+  }
+}

package/src/tilemap/Tilemap2DRenderSystem.ts

@@ -0,0 +1,58 @@
+import {
+  beginRenderCommandPass,
+  type IEngine,
+  type RenderCommandContext,
+} from '@haiyue/engine/extension-authoring';
+import { Entity, World } from '@haiyue/engine/ecs';
+import { Tilemap2DComponent } from './Tilemap2DComponent';
+import { Tilemap2DRenderer } from './Tilemap2DRenderer';
+import { RenderSystem2DBase, type RenderSystem2DBaseOptions } from '../utils/RenderSystem2DBase';
+
+export type Tilemap2DRenderSystemOptions = RenderSystem2DBaseOptions;
+
+export class Tilemap2DRenderSystem extends RenderSystem2DBase {
+  private renderer: Tilemap2DRenderer | null = null;
+
+  constructor(engine: IEngine, cameraEntity: Entity, options: Tilemap2DRenderSystemOptions = {}) {
+    super({ all: [Tilemap2DComponent] }, engine, cameraEntity, options, 'Tilemap2DRenderSystem');
+  }
+
+  record(world: World, context: RenderCommandContext): this {
+    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;
+  }
+
+  override destroy(): this {
+    this.releaseGpuResourcesForRecovery();
+    return super.destroy();
+  }
+
+  protected releaseGpuResourcesForRecovery(): void {
+    this.renderer?.destroy();
+    this.renderer = null;
+  }
+
+}

package/src/tilemap/Tilemap2DRenderer.ts

@@ -0,0 +1,289 @@
+import { getExtensionGPUResourceTracker, requireEngineDevice, type IEngine } from '@haiyue/engine/extension-authoring';
+import type { Tilemap2DComponent } from './Tilemap2DComponent';
+import {
+  createCamera2DGpu,
+  createCamera2DLayout,
+  createObject2DGpu,
+  createObject2DLayout,
+  destroyCamera2DGpu,
+  destroyObject2DGpu,
+  writeFloatBuffer,
+  writeObjectMatrixIfChanged,
+  type Camera2DGpu,
+  type Object2DGpu,
+} from '../utils/render2dGpu';
+import tilemap2dWgsl from '../shaders/generated/2d-ui-tilemap2d.generated.wgsl';
+
+const TILEMAP_WGSL = tilemap2dWgsl;
+
+const TILEMAP_INITIAL_VERTEX_FLOATS = 36;
+const TILEMAP_INITIAL_VERTEX_BYTES = TILEMAP_INITIAL_VERTEX_FLOATS * 4;
+
+interface EntityGpu {
+  objectGpu: Object2DGpu;
+  vertexBuffer: GPUBuffer;
+  vertexBufferSize: number;
+  vertexData: Float32Array;
+  vertexByteLength: number;
+  vertexCount: number;
+  tilemapSignature: string;
+}
+
+interface TilemapSignatureCache {
+  version: number;
+  signature: string;
+}
+
+interface TilemapSharedGpu {
+  cameraLayout: GPUBindGroupLayout;
+  objectLayout: GPUBindGroupLayout;
+  shaderModule: GPUShaderModule;
+  pipelineLayout: GPUPipelineLayout;
+  pipelineCache: Map<number, GPURenderPipeline>;
+}
+
+const tilemapSharedGpuCache = new WeakMap<GPUDevice, TilemapSharedGpu>();
+
+function getTilemapSharedGpu(device: GPUDevice): TilemapSharedGpu {
+  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;
+}
+
+export class Tilemap2DRenderer {
+  reverseZ = false;
+  msaaSamples: 1 | 4 = 1;
+
+  private engine!: IEngine;
+  private cameraGpu!: Camera2DGpu;
+  private objectLayout!: GPUBindGroupLayout;
+  private shaderModule!: GPUShaderModule;
+  private pipelineLayout!: GPUPipelineLayout;
+  private sharedGpu!: TilemapSharedGpu;
+  private entityCache = new Map<number, EntityGpu>();
+  private signatureCache = new WeakMap<Tilemap2DComponent, TilemapSignatureCache>();
+  private initialized = false;
+
+  prepare(engine: IEngine): void {
+    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: Float32Array): void {
+    writeFloatBuffer(requireEngineDevice(this.engine).queue, this.cameraGpu.buffer, viewProj);
+  }
+
+  releaseEntitiesNotIn(liveEntities: ReadonlySet<number>): void {
+    for (const [entityId, entityGpu] of this.entityCache) {
+      if (!liveEntities.has(entityId)) {
+        this.destroyEntityGpu(entityGpu);
+        this.entityCache.delete(entityId);
+      }
+    }
+  }
+
+  render(
+    passEncoder: GPURenderPassEncoder,
+    entityId: number,
+    tilemap: Tilemap2DComponent,
+    worldMatrix: Float32Array,
+  ): void {
+    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 as ArrayBuffer,
+          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);
+  }
+
+  private computeSignature(tilemap: Tilemap2DComponent): string {
+    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;
+  }
+
+  private buildVertices(tilemap: Tilemap2DComponent, entityGpu: EntityGpu): void {
+    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: number, y: number, color: readonly number[]) => {
+      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;
+  }
+
+  private getPipeline(): GPURenderPipeline {
+    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(): void {
+    if (this.cameraGpu) destroyCamera2DGpu(this.cameraGpu);
+    for (const entity of this.entityCache.values()) this.destroyEntityGpu(entity);
+    this.entityCache.clear();
+  }
+
+  private destroyEntityGpu(entity: EntityGpu): void {
+    destroyObject2DGpu(entity.objectGpu);
+    getExtensionGPUResourceTracker(this.engine)?.untrackBuffer(entity.vertexBuffer);
+    entity.vertexBuffer.destroy();
+  }
+}

package/src/tilemap/TilemapPlugin.ts

@@ -0,0 +1,75 @@
+import type { EnginePlugin } from '@haiyue/engine/core';
+import type { RenderPipelineEntryOptions } from '@haiyue/engine/extension-authoring';
+import { Tilemap2DComponent } from './Tilemap2DComponent';
+import { Tilemap2DRenderSystem, type Tilemap2DRenderSystemOptions } from './Tilemap2DRenderSystem';
+import {
+  EXTENSIONS_PLUGIN_VERSION,
+  installEditorRenderSystem,
+  removeSystem,
+  type EditorViewportContributionContext,
+} from '../plugins/pluginUtils';
+
+export interface TilemapPluginOptions {
+  system?: Tilemap2DRenderSystemOptions;
+  render?: RenderPipelineEntryOptions | false | null;
+}
+
+export function createTilemapPlugin(options: TilemapPluginOptions = {}): EnginePlugin {
+  let system: Tilemap2DRenderSystem | null = 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: Tilemap2DComponent) {
+          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: unknown) {
+          const value = data as ConstructorParameters<typeof Tilemap2DComponent>[0] & { type?: unknown };
+          return value.type === 'Tilemap2DComponent' ? new Tilemap2DComponent(value) : null;
+        },
+        clone: (component: Tilemap2DComponent) => component.clone(),
+        installViewport(viewport: EditorViewportContributionContext) {
+          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,
+        },
+      }] });
+    },
+  };
+}

package/src/tilemap.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';