@joydle/tilemap 0.1.0

package/dist/AutoTile.d.ts

@@ -0,0 +1,21 @@
+import type { AutoTileOptions } from './types';
+export declare class AutoTile {
+    /**
+     * Resolve a grid of tile types into visual tile indices.
+     *
+     * @param grid 2D array of tile types (0 = empty, `solid` = solid)
+     * @param opts AutoTile options
+     * @returns 2D array of visual tile indices (0 = empty, 1+ = tile variant)
+     */
+    static resolve(grid: number[][], opts?: AutoTileOptions): number[][];
+    /** Simple 16-tile rule set using 4 cardinal neighbors */
+    private static _simple16;
+    /**
+     * Blob 47-tile rule set using 8 neighbors (cardinal + diagonal).
+     * Corners only count if both adjacent cardinals are also solid.
+     * Produces indices 1-47 for full tileset coverage.
+     */
+    private static _blob47;
+    /** Map 8-bit blob mask to 1-47 tile index */
+    private static _blob47Lookup;
+}

package/dist/AutoTile.js

@@ -0,0 +1,131 @@
+/**
+ * AutoTile resolves a simplified type grid into visual tile indices.
+ * AI places tile types (0 = air, 1 = solid), AutoTile picks correct
+ * edge/corner sprites based on neighbor analysis.
+ */
+// Neighbor bitmask positions (clockwise from top-left):
+// TL=1  T=2  TR=4
+// L=8   C    R=16
+// BL=32 B=64 BR=128
+const SIMPLE16_MAP = {
+    // Maps 4-bit cardinal mask (T=1, R=2, B=4, L=8) to tile index
+    0b0000: 1, // isolated
+    0b0001: 2, // top neighbor
+    0b0010: 3, // right neighbor
+    0b0011: 4, // top + right
+    0b0100: 5, // bottom neighbor
+    0b0101: 6, // top + bottom (vertical)
+    0b0110: 7, // right + bottom
+    0b0111: 8, // top + right + bottom
+    0b1000: 9, // left neighbor
+    0b1001: 10, // top + left
+    0b1010: 11, // left + right (horizontal)
+    0b1011: 12, // top + right + left
+    0b1100: 13, // bottom + left
+    0b1101: 14, // top + bottom + left
+    0b1110: 15, // right + bottom + left
+    0b1111: 16, // all four neighbors (center)
+};
+export class AutoTile {
+    /**
+     * Resolve a grid of tile types into visual tile indices.
+     *
+     * @param grid 2D array of tile types (0 = empty, `solid` = solid)
+     * @param opts AutoTile options
+     * @returns 2D array of visual tile indices (0 = empty, 1+ = tile variant)
+     */
+    static resolve(grid, opts = {}) {
+        const solid = opts.solid ?? 1;
+        const rules = opts.rules ?? 'simple16';
+        const rows = grid.length;
+        const cols = grid[0]?.length ?? 0;
+        const result = Array.from({ length: rows }, () => new Array(cols).fill(0));
+        for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < cols; c++) {
+                if (grid[r][c] !== solid) {
+                    result[r][c] = 0;
+                    continue;
+                }
+                if (rules === 'simple16') {
+                    result[r][c] = this._simple16(grid, r, c, rows, cols, solid);
+                }
+                else {
+                    result[r][c] = this._blob47(grid, r, c, rows, cols, solid);
+                }
+            }
+        }
+        return result;
+    }
+    /** Simple 16-tile rule set using 4 cardinal neighbors */
+    static _simple16(grid, r, c, rows, cols, solid) {
+        const t = r > 0 && grid[r - 1][c] === solid ? 1 : 0;
+        const ri = c < cols - 1 && grid[r][c + 1] === solid ? 1 : 0;
+        const b = r < rows - 1 && grid[r + 1][c] === solid ? 1 : 0;
+        const l = c > 0 && grid[r][c - 1] === solid ? 1 : 0;
+        const mask = t | (ri << 1) | (b << 2) | (l << 3);
+        return SIMPLE16_MAP[mask] ?? 1;
+    }
+    /**
+     * Blob 47-tile rule set using 8 neighbors (cardinal + diagonal).
+     * Corners only count if both adjacent cardinals are also solid.
+     * Produces indices 1-47 for full tileset coverage.
+     */
+    static _blob47(grid, r, c, rows, cols, solid) {
+        const isSolid = (row, col) => {
+            if (row < 0 || row >= rows || col < 0 || col >= cols)
+                return false;
+            return grid[row][col] === solid;
+        };
+        const t = isSolid(r - 1, c);
+        const ri = isSolid(r, c + 1);
+        const b = isSolid(r + 1, c);
+        const l = isSolid(r, c - 1);
+        // Corners only count when both adjacent cardinals are present
+        const tl = t && l && isSolid(r - 1, c - 1);
+        const tr = t && ri && isSolid(r - 1, c + 1);
+        const bl = b && l && isSolid(r + 1, c - 1);
+        const br = b && ri && isSolid(r + 1, c + 1);
+        // Build 8-bit mask
+        let mask = 0;
+        if (tl)
+            mask |= 1;
+        if (t)
+            mask |= 2;
+        if (tr)
+            mask |= 4;
+        if (l)
+            mask |= 8;
+        if (ri)
+            mask |= 16;
+        if (bl)
+            mask |= 32;
+        if (b)
+            mask |= 64;
+        if (br)
+            mask |= 128;
+        // Map 8-bit mask to 1-47 tile index
+        // Use a hash to compress 256 possible masks into 47 unique tiles
+        return this._blob47Lookup(mask);
+    }
+    /** Map 8-bit blob mask to 1-47 tile index */
+    static _blob47Lookup(mask) {
+        // Standard blob tileset mapping.
+        // Each unique visual configuration maps to one of 47 tiles.
+        // We use cardinal bits to determine the base shape, then refine with corners.
+        const cardinals = mask & 0b01001010; // T, R, B, L extracted
+        const t = (mask >> 1) & 1;
+        const r = (mask >> 4) & 1;
+        const b = (mask >> 6) & 1;
+        const l = (mask >> 3) & 1;
+        const tl = (mask >> 0) & 1;
+        const tr = (mask >> 2) & 1;
+        const bl = (mask >> 5) & 1;
+        const br = (mask >> 7) & 1;
+        // Cardinal pattern determines base (1-16), corners refine within that group
+        const base = t | (r << 1) | (b << 2) | (l << 3);
+        const corners = tl | (tr << 1) | (bl << 2) | (br << 3);
+        // Simple deterministic mapping: base*3 + corner_offset, clamped to 1-47
+        const idx = base * 3 + (corners % 3) + 1;
+        return Math.min(47, Math.max(1, idx));
+    }
+}

package/dist/TiledImporter.d.ts

@@ -0,0 +1,34 @@
+import type { TilemapOptions } from './types';
+/**
+ * Parse a Tiled JSON export into TilemapOptions.
+ * Supports orthogonal maps with tile layers.
+ */
+interface TiledMap {
+    width: number;
+    height: number;
+    tilewidth: number;
+    tileheight: number;
+    layers: TiledLayer[];
+}
+interface TiledLayer {
+    name: string;
+    type: string;
+    width: number;
+    height: number;
+    data?: number[];
+    visible: boolean;
+    properties?: Array<{
+        name: string;
+        value: unknown;
+    }>;
+}
+export declare class TiledImporter {
+    /**
+     * Parse a Tiled JSON map into TilemapOptions.
+     *
+     * Layer properties recognized:
+     * - `collision: true` marks a layer as a collision layer
+     */
+    static parse(json: TiledMap): TilemapOptions;
+}
+export {};

package/dist/TiledImporter.js

@@ -0,0 +1,35 @@
+export class TiledImporter {
+    /**
+     * Parse a Tiled JSON map into TilemapOptions.
+     *
+     * Layer properties recognized:
+     * - `collision: true` marks a layer as a collision layer
+     */
+    static parse(json) {
+        const tileSize = json.tilewidth;
+        const layers = {};
+        for (const tiledLayer of json.layers) {
+            if (tiledLayer.type !== 'tilelayer' || !tiledLayer.data)
+                continue;
+            // Convert flat 1D data array to 2D grid
+            const data = [];
+            for (let row = 0; row < json.height; row++) {
+                const rowData = [];
+                for (let col = 0; col < json.width; col++) {
+                    rowData.push(tiledLayer.data[row * json.width + col]);
+                }
+                data.push(rowData);
+            }
+            // Check for collision property
+            const isCollision = tiledLayer.name.toLowerCase().includes('collision') ||
+                tiledLayer.properties?.some((p) => p.name === 'collision' && p.value === true) ||
+                false;
+            layers[tiledLayer.name] = {
+                data,
+                collision: isCollision,
+                visible: tiledLayer.visible,
+            };
+        }
+        return { tileSize, layers };
+    }
+}

package/dist/Tilemap.d.ts

@@ -0,0 +1,32 @@
+import type { TilemapOptions, TilemapLayer, TileRect, RaycastResult } from './types';
+/**
+ * Core tilemap data structure with collision queries.
+ * Renderer-agnostic — pair with an engine-specific adapter for rendering.
+ */
+export declare class Tilemap {
+    readonly tileSize: number;
+    readonly layers: Record<string, TilemapLayer>;
+    readonly rows: number;
+    readonly cols: number;
+    constructor(opts: TilemapOptions);
+    /** Get tile value at grid coordinates for a given layer */
+    getTile(layerName: string, row: number, col: number): number;
+    /** Set tile value at grid coordinates */
+    setTile(layerName: string, row: number, col: number, value: number): void;
+    /** Check if a world position is on a solid tile (any collision layer) */
+    isSolid(worldX: number, worldY: number): boolean;
+    /**
+     * Get all solid tile rects that overlap with a world-space AABB.
+     * Use for physics integration — pass entity bounds, get nearby solid rects.
+     */
+    getCollisionTiles(x: number, y: number, w: number, h: number): TileRect[];
+    /**
+     * Cast a ray from (x1,y1) to (x2,y2) and find the first solid tile hit.
+     * Uses DDA (Digital Differential Analyzer) for efficient grid traversal.
+     */
+    raycast(x1: number, y1: number, x2: number, y2: number): RaycastResult;
+    /** World width in pixels */
+    get worldWidth(): number;
+    /** World height in pixels */
+    get worldHeight(): number;
+}

package/dist/Tilemap.js

@@ -0,0 +1,119 @@
+/**
+ * Core tilemap data structure with collision queries.
+ * Renderer-agnostic — pair with an engine-specific adapter for rendering.
+ */
+export class Tilemap {
+    tileSize;
+    layers;
+    rows;
+    cols;
+    constructor(opts) {
+        this.tileSize = opts.tileSize;
+        this.layers = opts.layers;
+        // Derive grid dimensions from the first layer
+        const firstLayer = Object.values(this.layers)[0];
+        this.rows = firstLayer?.data.length ?? 0;
+        this.cols = firstLayer?.data[0]?.length ?? 0;
+    }
+    /** Get tile value at grid coordinates for a given layer */
+    getTile(layerName, row, col) {
+        const layer = this.layers[layerName];
+        if (!layer)
+            return 0;
+        if (row < 0 || row >= this.rows || col < 0 || col >= this.cols)
+            return 0;
+        return layer.data[row][col];
+    }
+    /** Set tile value at grid coordinates */
+    setTile(layerName, row, col, value) {
+        const layer = this.layers[layerName];
+        if (!layer)
+            return;
+        if (row < 0 || row >= this.rows || col < 0 || col >= this.cols)
+            return;
+        layer.data[row][col] = value;
+    }
+    /** Check if a world position is on a solid tile (any collision layer) */
+    isSolid(worldX, worldY) {
+        const col = Math.floor(worldX / this.tileSize);
+        const row = Math.floor(worldY / this.tileSize);
+        for (const layer of Object.values(this.layers)) {
+            if (!layer.collision)
+                continue;
+            if (row < 0 || row >= this.rows || col < 0 || col >= this.cols)
+                continue;
+            if (layer.data[row][col] !== 0)
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Get all solid tile rects that overlap with a world-space AABB.
+     * Use for physics integration — pass entity bounds, get nearby solid rects.
+     */
+    getCollisionTiles(x, y, w, h) {
+        const ts = this.tileSize;
+        const startCol = Math.max(0, Math.floor(x / ts));
+        const endCol = Math.min(this.cols - 1, Math.floor((x + w) / ts));
+        const startRow = Math.max(0, Math.floor(y / ts));
+        const endRow = Math.min(this.rows - 1, Math.floor((y + h) / ts));
+        const results = [];
+        for (const layer of Object.values(this.layers)) {
+            if (!layer.collision)
+                continue;
+            for (let row = startRow; row <= endRow; row++) {
+                for (let col = startCol; col <= endCol; col++) {
+                    if (layer.data[row][col] !== 0) {
+                        results.push({
+                            x: col * ts,
+                            y: row * ts,
+                            w: ts,
+                            h: ts,
+                        });
+                    }
+                }
+            }
+        }
+        return results;
+    }
+    /**
+     * Cast a ray from (x1,y1) to (x2,y2) and find the first solid tile hit.
+     * Uses DDA (Digital Differential Analyzer) for efficient grid traversal.
+     */
+    raycast(x1, y1, x2, y2) {
+        const ts = this.tileSize;
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist === 0)
+            return { hit: false };
+        const stepX = dx / dist;
+        const stepY = dy / dist;
+        const stepSize = ts / 2; // half-tile steps for precision
+        let cx = x1, cy = y1;
+        const maxSteps = Math.ceil(dist / stepSize);
+        for (let i = 0; i <= maxSteps; i++) {
+            if (this.isSolid(cx, cy)) {
+                return {
+                    hit: true,
+                    point: { x: cx, y: cy },
+                    tile: {
+                        row: Math.floor(cy / ts),
+                        col: Math.floor(cx / ts),
+                    },
+                };
+            }
+            cx += stepX * stepSize;
+            cy += stepY * stepSize;
+        }
+        return { hit: false };
+    }
+    /** World width in pixels */
+    get worldWidth() {
+        return this.cols * this.tileSize;
+    }
+    /** World height in pixels */
+    get worldHeight() {
+        return this.rows * this.tileSize;
+    }
+}

package/dist/babylon/BabylonTilemapRenderer.d.ts

@@ -0,0 +1,25 @@
+import type { Tilemap } from '../Tilemap';
+import type { TilemapRenderer } from '../types';
+/**
+ * Babylon.js adapter — renders tilemap layers as mesh grids.
+ * Each solid tile becomes a box or plane mesh.
+ */
+interface BabylonRendererOptions {
+    /** Height of extruded tiles (0 = flat). Default 1 */
+    tileHeight?: number;
+    /** Color map: tile index → hex string (e.g. '#666666') */
+    colorMap?: Record<number, string>;
+}
+export declare class BabylonTilemapRenderer implements TilemapRenderer {
+    private scene;
+    private map;
+    private opts;
+    private meshes;
+    constructor(scene: any, map: Tilemap, opts?: BabylonRendererOptions);
+    render(): void;
+    update(): void;
+    updateTile(layerName: string, row: number, col: number, value: number): void;
+    destroy(): void;
+    private _getBabylon;
+}
+export {};

package/dist/babylon/BabylonTilemapRenderer.js

@@ -0,0 +1,80 @@
+export class BabylonTilemapRenderer {
+    scene; // BABYLON.Scene
+    map;
+    opts;
+    meshes = new Map();
+    constructor(scene, map, opts = {}) {
+        this.scene = scene;
+        this.map = map;
+        this.opts = opts;
+    }
+    render() {
+        // Dynamic import of Babylon to avoid requiring it at module level
+        const BABYLON = this._getBabylon();
+        if (!BABYLON)
+            return;
+        const { map, opts, scene } = this;
+        const ts = map.tileSize;
+        const h = opts.tileHeight ?? 1;
+        for (const [name, layer] of Object.entries(map.layers)) {
+            if (layer.visible === false)
+                continue;
+            for (let r = 0; r < map.rows; r++) {
+                for (let c = 0; c < map.cols; c++) {
+                    const tile = layer.data[r][c];
+                    if (tile === 0)
+                        continue;
+                    const mesh = h > 0
+                        ? BABYLON.MeshBuilder.CreateBox(`tile_${name}_${r}_${c}`, { width: ts, height: h, depth: ts }, scene)
+                        : BABYLON.MeshBuilder.CreatePlane(`tile_${name}_${r}_${c}`, { width: ts, height: ts }, scene);
+                    mesh.position.x = c * ts + ts / 2;
+                    mesh.position.y = h / 2;
+                    mesh.position.z = r * ts + ts / 2;
+                    const colorHex = opts.colorMap?.[tile] ?? '#666666';
+                    const material = new BABYLON.StandardMaterial(`mat_${name}_${r}_${c}`, scene);
+                    material.diffuseColor = BABYLON.Color3.FromHexString(colorHex);
+                    mesh.material = material;
+                    this.meshes.set(`${name}:${r}:${c}`, mesh);
+                }
+            }
+        }
+    }
+    update() {
+        // Babylon handles frustum culling natively
+    }
+    updateTile(layerName, row, col, value) {
+        const key = `${layerName}:${row}:${col}`;
+        const existing = this.meshes.get(key);
+        if (existing) {
+            existing.material?.dispose();
+            existing.dispose();
+            this.meshes.delete(key);
+        }
+        if (value !== 0) {
+            // Re-render just this tile
+            const BABYLON = this._getBabylon();
+            if (!BABYLON)
+                return;
+            const ts = this.map.tileSize;
+            const h = this.opts.tileHeight ?? 1;
+            const mesh = BABYLON.MeshBuilder.CreateBox(`tile_${layerName}_${row}_${col}`, { width: ts, height: h, depth: ts }, this.scene);
+            mesh.position.set(col * ts + ts / 2, h / 2, row * ts + ts / 2);
+            const colorHex = this.opts.colorMap?.[value] ?? '#666666';
+            const material = new BABYLON.StandardMaterial(`mat_${layerName}_${row}_${col}`, this.scene);
+            material.diffuseColor = BABYLON.Color3.FromHexString(colorHex);
+            mesh.material = material;
+            this.meshes.set(key, mesh);
+        }
+    }
+    destroy() {
+        for (const mesh of this.meshes.values()) {
+            mesh.material?.dispose();
+            mesh.dispose();
+        }
+        this.meshes.clear();
+    }
+    _getBabylon() {
+        // Try to access BABYLON from the global scope or scene engine
+        return globalThis.BABYLON ?? null;
+    }
+}

package/dist/babylon/index.d.ts

@@ -0,0 +1 @@
+export { BabylonTilemapRenderer } from './BabylonTilemapRenderer';

package/dist/babylon/index.js

@@ -0,0 +1 @@
+export { BabylonTilemapRenderer } from './BabylonTilemapRenderer';

package/dist/babylon.js

@@ -0,0 +1,74 @@
+var B = Object.defineProperty;
+var u = (c, e, t) => e in c ? B(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var $ = (c, e, t) => u(c, typeof e != "symbol" ? e + "" : e, t);
+class x {
+  constructor(e, t, n = {}) {
+    $(this, "scene");
+    // BABYLON.Scene
+    $(this, "map");
+    $(this, "opts");
+    $(this, "meshes", /* @__PURE__ */ new Map());
+    this.scene = e, this.map = t, this.opts = n;
+  }
+  render() {
+    var m;
+    const e = this._getBabylon();
+    if (!e) return;
+    const { map: t, opts: n, scene: p } = this, i = t.tileSize, r = n.tileHeight ?? 1;
+    for (const [h, a] of Object.entries(t.layers))
+      if (a.visible !== !1)
+        for (let s = 0; s < t.rows; s++)
+          for (let o = 0; o < t.cols; o++) {
+            const d = a.data[s][o];
+            if (d === 0) continue;
+            const l = r > 0 ? e.MeshBuilder.CreateBox(
+              `tile_${h}_${s}_${o}`,
+              { width: i, height: r, depth: i },
+              p
+            ) : e.MeshBuilder.CreatePlane(
+              `tile_${h}_${s}_${o}`,
+              { width: i, height: i },
+              p
+            );
+            l.position.x = o * i + i / 2, l.position.y = r / 2, l.position.z = s * i + i / 2;
+            const _ = ((m = n.colorMap) == null ? void 0 : m[d]) ?? "#666666", f = new e.StandardMaterial(
+              `mat_${h}_${s}_${o}`,
+              p
+            );
+            f.diffuseColor = e.Color3.FromHexString(_), l.material = f, this.meshes.set(`${h}:${s}:${o}`, l);
+          }
+  }
+  update() {
+  }
+  updateTile(e, t, n, p) {
+    var m, h;
+    const i = `${e}:${t}:${n}`, r = this.meshes.get(i);
+    if (r && ((m = r.material) == null || m.dispose(), r.dispose(), this.meshes.delete(i)), p !== 0) {
+      const a = this._getBabylon();
+      if (!a) return;
+      const s = this.map.tileSize, o = this.opts.tileHeight ?? 1, d = a.MeshBuilder.CreateBox(
+        `tile_${e}_${t}_${n}`,
+        { width: s, height: o, depth: s },
+        this.scene
+      );
+      d.position.set(n * s + s / 2, o / 2, t * s + s / 2);
+      const l = ((h = this.opts.colorMap) == null ? void 0 : h[p]) ?? "#666666", _ = new a.StandardMaterial(
+        `mat_${e}_${t}_${n}`,
+        this.scene
+      );
+      _.diffuseColor = a.Color3.FromHexString(l), d.material = _, this.meshes.set(i, d);
+    }
+  }
+  destroy() {
+    var e;
+    for (const t of this.meshes.values())
+      (e = t.material) == null || e.dispose(), t.dispose();
+    this.meshes.clear();
+  }
+  _getBabylon() {
+    return globalThis.BABYLON ?? null;
+  }
+}
+export {
+  x as BabylonTilemapRenderer
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Tilemap } from './Tilemap';
+export { AutoTile } from './AutoTile';
+export { TiledImporter } from './TiledImporter';
+export type { TilemapOptions, TilemapLayer, TileRect, RaycastResult, AutoTileOptions, TilemapRenderer, } from './types';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Tilemap } from './Tilemap';
+export { AutoTile } from './AutoTile';
+export { TiledImporter } from './TiledImporter';

package/dist/phaser/PhaserTilemapRenderer.d.ts

@@ -0,0 +1,29 @@
+import type { Tilemap } from '../Tilemap';
+import type { TilemapRenderer } from '../types';
+/**
+ * Phaser adapter — renders tilemap layers using Phaser's Graphics API.
+ * Also supports bridging collision data into Phaser's physics system.
+ *
+ * Usage: Pass a Phaser.Scene and @joydle/tilemap data.
+ */
+interface PhaserRendererOptions {
+    /** Color map: tile index → hex color (e.g. 0x665577) */
+    colorMap?: Record<number, number>;
+    /** Default tile color when not in colorMap */
+    defaultColor?: number;
+    /** If true, create Phaser static bodies for collision tiles */
+    enablePhysics?: boolean;
+}
+export declare class PhaserTilemapRenderer implements TilemapRenderer {
+    private scene;
+    private map;
+    private opts;
+    private graphics;
+    private collisionBodies;
+    constructor(scene: any, map: Tilemap, opts?: PhaserRendererOptions);
+    render(): void;
+    update(): void;
+    updateTile(layerName: string, row: number, col: number, value: number): void;
+    destroy(): void;
+}
+export {};

package/dist/phaser/PhaserTilemapRenderer.js

@@ -0,0 +1,73 @@
+export class PhaserTilemapRenderer {
+    scene; // Phaser.Scene
+    map;
+    opts;
+    graphics = null;
+    collisionBodies = [];
+    constructor(scene, map, opts = {}) {
+        this.scene = scene;
+        this.map = map;
+        this.opts = opts;
+    }
+    render() {
+        const { scene, map, opts } = this;
+        const ts = map.tileSize;
+        const colorMap = opts.colorMap ?? {};
+        const defaultColor = opts.defaultColor ?? 0x666666;
+        // Draw tiles using Phaser Graphics
+        this.graphics = scene.add.graphics();
+        for (const [_name, layer] of Object.entries(map.layers)) {
+            if (layer.visible === false)
+                continue;
+            for (let r = 0; r < map.rows; r++) {
+                for (let c = 0; c < map.cols; c++) {
+                    const tile = layer.data[r][c];
+                    if (tile === 0)
+                        continue;
+                    const color = colorMap[tile] ?? defaultColor;
+                    this.graphics.fillStyle(color);
+                    this.graphics.fillRect(c * ts, r * ts, ts, ts);
+                }
+            }
+        }
+        // Optionally create physics bodies for collision layers
+        if (opts.enablePhysics) {
+            for (const layer of Object.values(map.layers)) {
+                if (!layer.collision)
+                    continue;
+                for (let r = 0; r < map.rows; r++) {
+                    for (let c = 0; c < map.cols; c++) {
+                        if (layer.data[r][c] === 0)
+                            continue;
+                        const body = scene.physics?.add.staticImage(c * ts + ts / 2, r * ts + ts / 2);
+                        if (body) {
+                            body.setSize(ts, ts);
+                            body.setVisible(false);
+                            this.collisionBodies.push(body);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    update() {
+        // Phaser handles camera culling natively
+    }
+    updateTile(layerName, row, col, value) {
+        // Redraw the full graphics layer (Phaser Graphics doesn't support partial updates easily)
+        if (this.graphics) {
+            this.graphics.destroy();
+            this.graphics = null;
+        }
+        this.map.setTile(layerName, row, col, value);
+        this.render();
+    }
+    destroy() {
+        this.graphics?.destroy();
+        this.graphics = null;
+        for (const body of this.collisionBodies) {
+            body?.destroy();
+        }
+        this.collisionBodies = [];
+    }
+}

package/dist/phaser/index.d.ts

@@ -0,0 +1 @@
+export { PhaserTilemapRenderer } from './PhaserTilemapRenderer';

package/dist/phaser/index.js

@@ -0,0 +1 @@
+export { PhaserTilemapRenderer } from './PhaserTilemapRenderer';

package/dist/phaser.js

@@ -0,0 +1,56 @@
+var g = Object.defineProperty;
+var y = (r, i, s) => i in r ? g(r, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[i] = s;
+var a = (r, i, s) => y(r, typeof i != "symbol" ? i + "" : i, s);
+class b {
+  constructor(i, s, l = {}) {
+    a(this, "scene");
+    // Phaser.Scene
+    a(this, "map");
+    a(this, "opts");
+    a(this, "graphics", null);
+    a(this, "collisionBodies", []);
+    this.scene = i, this.map = s, this.opts = l;
+  }
+  render() {
+    var h;
+    const { scene: i, map: s, opts: l } = this, e = s.tileSize, f = l.colorMap ?? {}, d = l.defaultColor ?? 6710886;
+    this.graphics = i.add.graphics();
+    for (const [n, c] of Object.entries(s.layers))
+      if (c.visible !== !1)
+        for (let t = 0; t < s.rows; t++)
+          for (let o = 0; o < s.cols; o++) {
+            const p = c.data[t][o];
+            if (p === 0) continue;
+            const u = f[p] ?? d;
+            this.graphics.fillStyle(u), this.graphics.fillRect(o * e, t * e, e, e);
+          }
+    if (l.enablePhysics) {
+      for (const n of Object.values(s.layers))
+        if (n.collision)
+          for (let c = 0; c < s.rows; c++)
+            for (let t = 0; t < s.cols; t++) {
+              if (n.data[c][t] === 0) continue;
+              const o = (h = i.physics) == null ? void 0 : h.add.staticImage(
+                t * e + e / 2,
+                c * e + e / 2
+              );
+              o && (o.setSize(e, e), o.setVisible(!1), this.collisionBodies.push(o));
+            }
+    }
+  }
+  update() {
+  }
+  updateTile(i, s, l, e) {
+    this.graphics && (this.graphics.destroy(), this.graphics = null), this.map.setTile(i, s, l, e), this.render();
+  }
+  destroy() {
+    var i;
+    (i = this.graphics) == null || i.destroy(), this.graphics = null;
+    for (const s of this.collisionBodies)
+      s == null || s.destroy();
+    this.collisionBodies = [];
+  }
+}
+export {
+  b as PhaserTilemapRenderer
+};

package/dist/pixi/PixiTilemapRenderer.d.ts

@@ -0,0 +1,39 @@
+import { Container, Texture } from 'pixi.js';
+import type { Tilemap } from '../Tilemap';
+import type { TilemapRenderer } from '../types';
+interface PixiRendererOptions {
+    /** Spritesheet texture (uniform grid of tiles) */
+    tileset?: Texture;
+    /** Number of tile columns in the tileset texture */
+    tilesetCols?: number;
+    /** Camera reference for viewport culling */
+    camera?: {
+        x: number;
+        y: number;
+        zoom?: number;
+        vw?: number;
+        vh?: number;
+    };
+    /** Fallback color map: tile index → hex color (used when no tileset) */
+    colorMap?: Record<number, number>;
+}
+export declare class PixiTilemapRenderer implements TilemapRenderer {
+    private container;
+    private map;
+    private opts;
+    private tileSprites;
+    private layerContainers;
+    constructor(parent: Container, map: Tilemap, opts?: PixiRendererOptions);
+    render(): void;
+    update(camera?: {
+        x: number;
+        y: number;
+        zoom?: number;
+        vw?: number;
+        vh?: number;
+    }): void;
+    updateTile(layerName: string, row: number, col: number, value: number): void;
+    destroy(): void;
+    private _createTile;
+}
+export {};

package/dist/pixi/PixiTilemapRenderer.js

@@ -0,0 +1,100 @@
+import { Container, Graphics, Sprite, Texture, Rectangle } from 'pixi.js';
+export class PixiTilemapRenderer {
+    container;
+    map;
+    opts;
+    tileSprites = new Map();
+    layerContainers = new Map();
+    constructor(parent, map, opts = {}) {
+        this.container = new Container();
+        this.map = map;
+        this.opts = opts;
+        parent.addChild(this.container);
+        this.container.sortableChildren = true;
+    }
+    render() {
+        const { map, opts } = this;
+        const ts = map.tileSize;
+        for (const [name, layer] of Object.entries(map.layers)) {
+            if (layer.visible === false)
+                continue;
+            const layerContainer = new Container();
+            layerContainer.zIndex = layer.zIndex ?? 0;
+            this.container.addChild(layerContainer);
+            this.layerContainers.set(name, layerContainer);
+            for (let r = 0; r < map.rows; r++) {
+                for (let c = 0; c < map.cols; c++) {
+                    const tile = layer.data[r][c];
+                    if (tile === 0)
+                        continue;
+                    const sprite = this._createTile(tile, ts);
+                    sprite.x = c * ts;
+                    sprite.y = r * ts;
+                    layerContainer.addChild(sprite);
+                    this.tileSprites.set(`${name}:${r}:${c}`, sprite);
+                }
+            }
+        }
+    }
+    update(camera) {
+        const cam = camera ?? this.opts.camera;
+        if (!cam)
+            return;
+        const zoom = cam.zoom ?? 1;
+        const vw = (cam.vw ?? 480) / zoom;
+        const vh = (cam.vh ?? 700) / zoom;
+        const ts = this.map.tileSize;
+        const left = cam.x - vw / 2 - ts;
+        const right = cam.x + vw / 2 + ts;
+        const top = cam.y - vh / 2 - ts;
+        const bottom = cam.y + vh / 2 + ts;
+        // Cull tiles outside camera viewport
+        for (const [key, sprite] of this.tileSprites) {
+            const visible = sprite.x + ts > left &&
+                sprite.x < right &&
+                sprite.y + ts > top &&
+                sprite.y < bottom;
+            sprite.visible = visible;
+        }
+    }
+    updateTile(layerName, row, col, value) {
+        const key = `${layerName}:${row}:${col}`;
+        const existing = this.tileSprites.get(key);
+        const layerContainer = this.layerContainers.get(layerName);
+        if (existing) {
+            existing.removeFromParent();
+            existing.destroy();
+            this.tileSprites.delete(key);
+        }
+        if (value !== 0 && layerContainer) {
+            const sprite = this._createTile(value, this.map.tileSize);
+            sprite.x = col * this.map.tileSize;
+            sprite.y = row * this.map.tileSize;
+            layerContainer.addChild(sprite);
+            this.tileSprites.set(key, sprite);
+        }
+    }
+    destroy() {
+        this.container.removeFromParent();
+        this.container.destroy({ children: true });
+        this.tileSprites.clear();
+        this.layerContainers.clear();
+    }
+    _createTile(tileIndex, size) {
+        const { tileset, tilesetCols, colorMap } = this.opts;
+        if (tileset && tilesetCols) {
+            // Extract sub-texture from spritesheet
+            const col = (tileIndex - 1) % tilesetCols;
+            const row = Math.floor((tileIndex - 1) / tilesetCols);
+            const frame = new Rectangle(col * size, row * size, size, size);
+            const tex = new Texture({ source: tileset.source, frame });
+            return new Sprite(tex);
+        }
+        // Fallback: colored rectangle
+        const color = colorMap?.[tileIndex] ?? 0x666666;
+        const g = new Graphics();
+        g.rect(0, 0, size, size);
+        g.fill(color);
+        return g;
+    }
+}

package/dist/pixi/index.d.ts

@@ -0,0 +1 @@
+export { PixiTilemapRenderer } from './PixiTilemapRenderer';

package/dist/pixi/index.js

@@ -0,0 +1 @@
+export { PixiTilemapRenderer } from './PixiTilemapRenderer';

package/dist/pixi.js

@@ -0,0 +1,60 @@
+var C = Object.defineProperty;
+var S = (l, e, t) => e in l ? C(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
+var p = (l, e, t) => S(l, typeof e != "symbol" ? e + "" : e, t);
+import { Container as f, Rectangle as u, Texture as w, Sprite as x, Graphics as v } from "pixi.js";
+class T {
+  constructor(e, t, s = {}) {
+    p(this, "container");
+    p(this, "map");
+    p(this, "opts");
+    p(this, "tileSprites", /* @__PURE__ */ new Map());
+    p(this, "layerContainers", /* @__PURE__ */ new Map());
+    this.container = new f(), this.map = t, this.opts = s, e.addChild(this.container), this.container.sortableChildren = !0;
+  }
+  render() {
+    const { map: e, opts: t } = this, s = e.tileSize;
+    for (const [c, n] of Object.entries(e.layers)) {
+      if (n.visible === !1) continue;
+      const i = new f();
+      i.zIndex = n.zIndex ?? 0, this.container.addChild(i), this.layerContainers.set(c, i);
+      for (let o = 0; o < e.rows; o++)
+        for (let r = 0; r < e.cols; r++) {
+          const h = n.data[o][r];
+          if (h === 0) continue;
+          const a = this._createTile(h, s);
+          a.x = r * s, a.y = o * s, i.addChild(a), this.tileSprites.set(`${c}:${o}:${r}`, a);
+        }
+    }
+  }
+  update(e) {
+    const t = e ?? this.opts.camera;
+    if (!t) return;
+    const s = t.zoom ?? 1, c = (t.vw ?? 480) / s, n = (t.vh ?? 700) / s, i = this.map.tileSize, o = t.x - c / 2 - i, r = t.x + c / 2 + i, h = t.y - n / 2 - i, a = t.y + n / 2 + i;
+    for (const [m, d] of this.tileSprites) {
+      const y = d.x + i > o && d.x < r && d.y + i > h && d.y < a;
+      d.visible = y;
+    }
+  }
+  updateTile(e, t, s, c) {
+    const n = `${e}:${t}:${s}`, i = this.tileSprites.get(n), o = this.layerContainers.get(e);
+    if (i && (i.removeFromParent(), i.destroy(), this.tileSprites.delete(n)), c !== 0 && o) {
+      const r = this._createTile(c, this.map.tileSize);
+      r.x = s * this.map.tileSize, r.y = t * this.map.tileSize, o.addChild(r), this.tileSprites.set(n, r);
+    }
+  }
+  destroy() {
+    this.container.removeFromParent(), this.container.destroy({ children: !0 }), this.tileSprites.clear(), this.layerContainers.clear();
+  }
+  _createTile(e, t) {
+    const { tileset: s, tilesetCols: c, colorMap: n } = this.opts;
+    if (s && c) {
+      const r = (e - 1) % c, h = Math.floor((e - 1) / c), a = new u(r * t, h * t, t, t), m = new w({ source: s.source, frame: a });
+      return new x(m);
+    }
+    const i = (n == null ? void 0 : n[e]) ?? 6710886, o = new v();
+    return o.rect(0, 0, t, t), o.fill(i), o;
+  }
+}
+export {
+  T as PixiTilemapRenderer
+};

package/dist/three/ThreeTilemapRenderer.d.ts

@@ -0,0 +1,24 @@
+import { Scene, Texture } from 'three';
+import type { Tilemap } from '../Tilemap';
+import type { TilemapRenderer } from '../types';
+interface ThreeRendererOptions {
+    /** Texture atlas for tiles */
+    tileset?: Texture;
+    /** Height of extruded tiles (0 = flat planes). Default 1 */
+    tileHeight?: number;
+    /** Color map: tile index → hex color (used when no tileset) */
+    colorMap?: Record<number, number>;
+}
+export declare class ThreeTilemapRenderer implements TilemapRenderer {
+    private group;
+    private map;
+    private opts;
+    private meshes;
+    private geometry;
+    constructor(scene: Scene, map: Tilemap, opts?: ThreeRendererOptions);
+    render(): void;
+    update(): void;
+    updateTile(layerName: string, row: number, col: number, value: number): void;
+    destroy(): void;
+}
+export {};

package/dist/three/ThreeTilemapRenderer.js

@@ -0,0 +1,70 @@
+import { Group, Mesh, BoxGeometry, PlaneGeometry, MeshBasicMaterial, Color, } from 'three';
+export class ThreeTilemapRenderer {
+    group;
+    map;
+    opts;
+    meshes = new Map();
+    geometry;
+    constructor(scene, map, opts = {}) {
+        this.group = new Group();
+        this.map = map;
+        this.opts = opts;
+        scene.add(this.group);
+        const h = opts.tileHeight ?? 1;
+        this.geometry =
+            h > 0
+                ? new BoxGeometry(map.tileSize, h, map.tileSize)
+                : new PlaneGeometry(map.tileSize, map.tileSize);
+    }
+    render() {
+        const { map, opts } = this;
+        const ts = map.tileSize;
+        for (const [name, layer] of Object.entries(map.layers)) {
+            if (layer.visible === false)
+                continue;
+            for (let r = 0; r < map.rows; r++) {
+                for (let c = 0; c < map.cols; c++) {
+                    const tile = layer.data[r][c];
+                    if (tile === 0)
+                        continue;
+                    const color = opts.colorMap?.[tile] ?? 0x666666;
+                    const material = new MeshBasicMaterial({ color: new Color(color) });
+                    const mesh = new Mesh(this.geometry, material);
+                    // Position: X = col, Z = row (Y = up in Three.js)
+                    mesh.position.set(c * ts + ts / 2, (opts.tileHeight ?? 1) / 2, r * ts + ts / 2);
+                    this.group.add(mesh);
+                    this.meshes.set(`${name}:${r}:${c}`, mesh);
+                }
+            }
+        }
+    }
+    update() {
+        // Three.js handles culling via frustum automatically
+    }
+    updateTile(layerName, row, col, value) {
+        const key = `${layerName}:${row}:${col}`;
+        const existing = this.meshes.get(key);
+        if (existing) {
+            this.group.remove(existing);
+            existing.material.dispose();
+            this.meshes.delete(key);
+        }
+        if (value !== 0) {
+            const color = this.opts.colorMap?.[value] ?? 0x666666;
+            const material = new MeshBasicMaterial({ color: new Color(color) });
+            const mesh = new Mesh(this.geometry, material);
+            const ts = this.map.tileSize;
+            mesh.position.set(col * ts + ts / 2, (this.opts.tileHeight ?? 1) / 2, row * ts + ts / 2);
+            this.group.add(mesh);
+            this.meshes.set(key, mesh);
+        }
+    }
+    destroy() {
+        for (const mesh of this.meshes.values()) {
+            mesh.material.dispose();
+        }
+        this.geometry.dispose();
+        this.group.removeFromParent();
+        this.meshes.clear();
+    }
+}

package/dist/three/index.d.ts

@@ -0,0 +1 @@
+export { ThreeTilemapRenderer } from './ThreeTilemapRenderer';

package/dist/three/index.js

@@ -0,0 +1 @@
+export { ThreeTilemapRenderer } from './ThreeTilemapRenderer';

package/dist/three.js

@@ -0,0 +1,55 @@
+var y = Object.defineProperty;
+var w = (h, e, t) => e in h ? y(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
+var a = (h, e, t) => w(h, typeof e != "symbol" ? e + "" : e, t);
+import { Group as z, BoxGeometry as M, PlaneGeometry as S, MeshBasicMaterial as d, Color as u, Mesh as f } from "three";
+class x {
+  constructor(e, t, s = {}) {
+    a(this, "group");
+    a(this, "map");
+    a(this, "opts");
+    a(this, "meshes", /* @__PURE__ */ new Map());
+    a(this, "geometry");
+    this.group = new z(), this.map = t, this.opts = s, e.add(this.group);
+    const o = s.tileHeight ?? 1;
+    this.geometry = o > 0 ? new M(t.tileSize, o, t.tileSize) : new S(t.tileSize, t.tileSize);
+  }
+  render() {
+    var o;
+    const { map: e, opts: t } = this, s = e.tileSize;
+    for (const [c, n] of Object.entries(e.layers))
+      if (n.visible !== !1)
+        for (let i = 0; i < e.rows; i++)
+          for (let r = 0; r < e.cols; r++) {
+            const p = n.data[i][r];
+            if (p === 0) continue;
+            const m = ((o = t.colorMap) == null ? void 0 : o[p]) ?? 6710886, l = new d({ color: new u(m) }), g = new f(this.geometry, l);
+            g.position.set(
+              r * s + s / 2,
+              (t.tileHeight ?? 1) / 2,
+              i * s + s / 2
+            ), this.group.add(g), this.meshes.set(`${c}:${i}:${r}`, g);
+          }
+  }
+  update() {
+  }
+  updateTile(e, t, s, o) {
+    var i;
+    const c = `${e}:${t}:${s}`, n = this.meshes.get(c);
+    if (n && (this.group.remove(n), n.material.dispose(), this.meshes.delete(c)), o !== 0) {
+      const r = ((i = this.opts.colorMap) == null ? void 0 : i[o]) ?? 6710886, p = new d({ color: new u(r) }), m = new f(this.geometry, p), l = this.map.tileSize;
+      m.position.set(
+        s * l + l / 2,
+        (this.opts.tileHeight ?? 1) / 2,
+        t * l + l / 2
+      ), this.group.add(m), this.meshes.set(c, m);
+    }
+  }
+  destroy() {
+    for (const e of this.meshes.values())
+      e.material.dispose();
+    this.geometry.dispose(), this.group.removeFromParent(), this.meshes.clear();
+  }
+}
+export {
+  x as ThreeTilemapRenderer
+};

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+export interface TilemapLayer {
+    /** 2D array of tile indices. 0 = empty. */
+    data: number[][];
+    /** If true, this layer participates in collision queries */
+    collision?: boolean;
+    /** If false, renderer skips this layer. Default true */
+    visible?: boolean;
+    /** Render order hint */
+    zIndex?: number;
+}
+export interface TilemapOptions {
+    tileSize: number;
+    layers: Record<string, TilemapLayer>;
+}
+export interface TileRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface RaycastResult {
+    hit: boolean;
+    /** World position of the hit point */
+    point?: {
+        x: number;
+        y: number;
+    };
+    /** Grid coordinates of the hit tile */
+    tile?: {
+        row: number;
+        col: number;
+    };
+}
+export interface AutoTileOptions {
+    /** The tile value that represents solid. Default 1 */
+    solid?: number;
+    /** Rule set. Default 'simple16' */
+    rules?: 'blob47' | 'simple16';
+}
+/** Shared renderer interface — each engine adapter implements this */
+export interface TilemapRenderer {
+    /** Initial render of all visible tiles */
+    render(): void;
+    /** Re-render visible tiles (call on camera move for culling) */
+    update(camera?: {
+        x: number;
+        y: number;
+        zoom?: number;
+        vw?: number;
+        vh?: number;
+    }): void;
+    /** Update a single tile visually after setTile() */
+    updateTile(layerName: string, row: number, col: number, value: number): void;
+    /** Clean up renderer resources */
+    destroy(): void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@joydle/tilemap",
+  "version": "0.1.0",
+  "description": "Grid tiles, auto-tile, Tiled import, and AABB collision for PixiJS, Three.js, Phaser, and Babylon.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./pixi": {
+      "types": "./dist/pixi/index.d.ts",
+      "import": "./dist/pixi/index.js"
+    },
+    "./three": {
+      "types": "./dist/three/index.d.ts",
+      "import": "./dist/three/index.js"
+    },
+    "./phaser": {
+      "types": "./dist/phaser/index.d.ts",
+      "import": "./dist/phaser/index.js"
+    },
+    "./babylon": {
+      "types": "./dist/babylon/index.d.ts",
+      "import": "./dist/babylon/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "demo:pixi": "vite serve examples/pixi --config examples/pixi/vite.config.ts",
+    "demo:three": "vite serve examples/three --config examples/three/vite.config.ts",
+    "demo:phaser": "vite serve examples/phaser --config examples/phaser/vite.config.ts",
+    "demo:babylon": "vite serve examples/babylon --config examples/babylon/vite.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "publishConfig": { "access": "public" },
+  "license": "MIT",
+  "author": "Joydle <contact@joydle.dev>",
+  "homepage": "https://joydle.dev",
+  "peerDependencies": {
+    "@babylonjs/core": ">=6.0.0",
+    "phaser": ">=3.60.0",
+    "pixi.js": ">=7.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "pixi.js": { "optional": true },
+    "three": { "optional": true },
+    "phaser": { "optional": true },
+    "@babylonjs/core": { "optional": true }
+  },
+  "devDependencies": {
+    "@babylonjs/core": "^8.51.2",
+    "@types/three": "^0.170.0",
+    "phaser": "^3.90.0",
+    "pixi.js": "^8.0.0",
+    "three": "^0.170.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  }
+}