@mertdogar/phaser-procedural-walls 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mert Dogar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,80 @@
+# @mertdogar/phaser-procedural-walls
+
+A Phaser 4 scene plugin that draws top-down floorplan walls from a few lines of data. You describe wall centerlines and window positions; the plugin draws thick wall bodies, a front face, see-through windows with sills, and optional Arcade Physics colliders, and it depth-sorts each wall so characters walk in front of and behind walls correctly.
+
+![Full floorplan rendered by the demo](docs/images/overview.jpg)
+
+## Features
+
+- Axis-aligned wall segments with automatic corner and T-junction filling
+- Per-wall style presets: flat colors or tiled textures for the wall top and its face
+- Windows cut into the face with translucent glass and an opaque sill
+- One depth-sorted Container per wall, so `sprite.setDepth(sprite.y)` is all a character needs
+- Optional Arcade static bodies: a thin plane under horizontal walls, a full rectangle for vertical ones
+- Pure geometry module with unit tests, no Phaser needed to test it
+
+## Install
+
+```bash
+pnpm add @mertdogar/phaser-procedural-walls phaser
+```
+
+Register the scene plugin in your game config:
+
+```ts
+import Phaser from "phaser";
+import { WallMapPlugin } from "@mertdogar/phaser-procedural-walls";
+
+new Phaser.Game({
+  physics: { default: "arcade" },
+  plugins: { scene: [{ key: "WallMapPlugin", plugin: WallMapPlugin, mapping: "wallMapPlugin" }] },
+  scene: MyScene,
+});
+```
+
+## Minimal example
+
+```ts
+const wallMap = this.add.wallMap({
+  presets: {
+    brick: { fill: 0xb59a8c, edge: 0x4a3830, lipHeight: 88, lipFill: 0x8f7a70, windowFill: 0x3b7d86 },
+  },
+  walls: [
+    { x1: 0, y1: 0, x2: 400, y2: 0, thickness: 22, preset: "brick", windows: [{ offset: 60, width: 60 }] },
+    { x1: 0, y1: 0, x2: 0, y2: 300, thickness: 22, preset: "brick" },
+    { x1: 400, y1: 0, x2: 400, y2: 300, thickness: 22, preset: "brick" },
+    { x1: 0, y1: 300, x2: 400, y2: 300, thickness: 22, preset: "brick", windows: [{ offset: 170, width: 60 }] },
+  ],
+  collide: true,
+});
+
+const player = this.physics.add.sprite(200, 150, "player").setOrigin(0.5, 1);
+this.physics.add.collider(player, wallMap.bodies!);
+
+// in update()
+player.setDepth(player.y);
+```
+
+<p>
+  <img src="docs/images/player-in-front.jpg" width="48%" alt="Player standing in front of a wall face">
+  <img src="docs/images/player-behind-window.jpg" width="48%" alt="Player behind the wall, visible through the window">
+</p>
+
+## Documentation
+
+- [Quick start](docs/quickstart.md). Build a walkable room with a window from an empty folder.
+- [API reference](docs/api.md). Every config field, preset option, and method.
+- [How it works](docs/how-it-works.md). Corner filling, depth sorting, the collision plane, and window holes.
+
+## Develop
+
+```bash
+pnpm install
+pnpm dev     # demo: full floorplan, arrow keys move the player
+pnpm test    # geometry unit tests
+pnpm build   # library build to dist/
+```
+
+## License
+
+MIT

package/dist/WallMap.d.ts

@@ -0,0 +1,17 @@
+import Phaser from "phaser";
+import type { WallMapConfig } from "./types";
+export declare class WallMap {
+    readonly scene: Phaser.Scene;
+    containers: Phaser.GameObjects.Container[];
+    bodies: Phaser.Physics.Arcade.StaticGroup | null;
+    private config;
+    constructor(scene: Phaser.Scene, config: WallMapConfig);
+    setWalls(walls: WallMapConfig["walls"]): this;
+    redraw(): this;
+    destroy(): void;
+    private clear;
+    private build;
+    private drawWall;
+    private fillRect;
+    private addBody;
+}

package/dist/WallMapPlugin.d.ts

@@ -0,0 +1,13 @@
+import Phaser from "phaser";
+import { WallMap } from "./WallMap";
+import type { WallMapConfig } from "./types";
+declare module "phaser" {
+    namespace GameObjects {
+        interface GameObjectFactory {
+            wallMap(config: WallMapConfig): WallMap;
+        }
+    }
+}
+export declare class WallMapPlugin extends Phaser.Plugins.ScenePlugin {
+    constructor(scene: Phaser.Scene, pluginManager: Phaser.Plugins.PluginManager, pluginKey: string);
+}

package/dist/geometry.d.ts

@@ -0,0 +1,4 @@
+import type { Rect, ResolvedWall, WallPreset, WallSpec } from "./types";
+export declare function endExtension(px: number, py: number, self: WallSpec, all: WallSpec[]): number;
+export declare function cutRects(rect: Rect, holes: Rect[], horizontal: boolean): Rect[];
+export declare function resolveWalls(walls: WallSpec[], presets: Record<string, WallPreset>): ResolvedWall[];

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { WallMapPlugin } from "./WallMapPlugin";
+export { WallMap } from "./WallMap";
+export { resolveWalls } from "./geometry";
+export type * from "./types";

package/dist/index.js

@@ -0,0 +1,131 @@
+var F = Object.defineProperty;
+var z = (i, n, s) => n in i ? F(i, n, { enumerable: !0, configurable: !0, writable: !0, value: s }) : i[n] = s;
+var g = (i, n, s) => z(i, typeof n != "symbol" ? n + "" : n, s);
+import I from "phaser";
+const M = { lipHeight: 0, windowInset: 0.6, sillHeight: 8 }, S = 8;
+function $(i) {
+  var t;
+  if (i.x1 !== i.x2 && i.y1 !== i.y2)
+    throw new Error(`Wall is not axis-aligned: (${i.x1},${i.y1})-(${i.x2},${i.y2})`);
+  if (!(i.x1 > i.x2 || i.y1 > i.y2)) return i;
+  const s = Math.abs(i.x2 - i.x1) + Math.abs(i.y2 - i.y1);
+  return {
+    ...i,
+    x1: i.x2,
+    y1: i.y2,
+    x2: i.x1,
+    y2: i.y1,
+    windows: (t = i.windows) == null ? void 0 : t.map((e) => ({ ...e, offset: s - e.offset - e.width }))
+  };
+}
+function T(i, n, s) {
+  const t = i >= Math.min(s.x1, s.x2) && i <= Math.max(s.x1, s.x2), e = n >= Math.min(s.y1, s.y2) && n <= Math.max(s.y1, s.y2);
+  return t && e;
+}
+function P(i, n, s, t) {
+  let e = 0;
+  for (const h of t)
+    h !== s && T(i, n, h) && (e = Math.max(e, h.thickness / 2));
+  return e;
+}
+function R(i, n, s) {
+  if (n.length === 0) return [i];
+  const t = [], e = i.x + i.w, h = i.y + i.h;
+  if (s) {
+    const l = Math.min(...n.map((d) => d.y)), a = Math.max(...n.map((d) => d.y + d.h));
+    l > i.y && t.push({ x: i.x, y: i.y, w: i.w, h: l - i.y }), a < h && t.push({ x: i.x, y: a, w: i.w, h: h - a });
+    let c = i.x;
+    for (const d of [...n].sort((f, o) => f.x - o.x))
+      d.x > c && t.push({ x: c, y: l, w: d.x - c, h: a - l }), c = d.x + d.w;
+    return c < e && t.push({ x: c, y: l, w: e - c, h: a - l }), t;
+  }
+  const y = Math.min(...n.map((l) => l.x)), r = Math.max(...n.map((l) => l.x + l.w));
+  y > i.x && t.push({ x: i.x, y: i.y, w: y - i.x, h: i.h }), r < e && t.push({ x: r, y: i.y, w: e - r, h: i.h });
+  let x = i.y;
+  for (const l of [...n].sort((a, c) => a.y - c.y))
+    l.y > x && t.push({ x: y, y: x, w: r - y, h: l.y - x }), x = l.y + l.h;
+  return x < h && t.push({ x: y, y: x, w: r - y, h: h - x }), t;
+}
+function v(i, n) {
+  const s = i.map($);
+  return s.map((t) => {
+    const e = n[t.preset];
+    if (!e) throw new Error(`Unknown wall preset "${t.preset}"`);
+    const h = e.lipHeight ?? M.lipHeight, y = e.windowInset ?? M.windowInset, r = e.sillHeight ?? M.sillHeight, x = t.thickness, l = x / 2, a = P(t.x1, t.y1, t, s), c = P(t.x2, t.y2, t, s), d = t.y1 === t.y2, f = d ? { x: t.x1 - a, y: t.y1 - l, w: t.x2 - t.x1 + a + c, h: x } : { x: t.x1 - l, y: t.y1 - a, w: x, h: t.y2 - t.y1 + a + c }, o = h <= 0 ? null : { x: f.x, y: f.y + f.h, w: f.w, h }, m = (t.windows ?? []).map((u) => {
+      if (!d) return { x: t.x1 - l * y, y: t.y1 + u.offset, w: x * y, h: u.width };
+      const p = t.x1 + u.offset;
+      return o ? { x: p, y: Math.round(o.y + o.h * (1 - y) / 2), w: u.width, h: Math.round(o.h * y) } : { x: p, y: t.y1 - l * y, w: u.width, h: x * y };
+    }), w = d && o !== null, W = w && r > 0 ? m.map((u) => {
+      const p = Math.min(r, u.h);
+      return { x: u.x, y: u.y + u.h - p, w: u.w, h: p };
+    }) : [], H = R(f, w ? [] : m, d), E = o ? R(o, w ? m : [], !0) : [], b = f.y + f.h + (o ? o.h : 0), k = d ? { x: f.x, y: b - S, w: f.w, h: S } : { x: f.x, y: f.y, w: f.w, h: b - f.y };
+    return { spec: t, horizontal: d, body: f, lip: o, bodyPieces: H, lipPieces: E, windows: m, sills: W, collider: k, depth: b };
+  });
+}
+class A {
+  constructor(n, s) {
+    g(this, "scene");
+    g(this, "containers", []);
+    g(this, "bodies", null);
+    g(this, "config");
+    this.scene = n, this.config = s, this.build();
+  }
+  setWalls(n) {
+    return this.config = { ...this.config, walls: n }, this.clear(), this.build(), this;
+  }
+  redraw() {
+    return this.clear(), this.build(), this;
+  }
+  destroy() {
+    this.clear();
+  }
+  clear() {
+    var n;
+    for (const s of this.containers) s.destroy();
+    this.containers = [], (n = this.bodies) == null || n.destroy(!0), this.bodies = null;
+  }
+  build() {
+    const { presets: n, walls: s, collide: t } = this.config, e = v(s, n);
+    t && (this.bodies = this.scene.physics.add.staticGroup());
+    for (const h of e)
+      this.containers.push(this.drawWall(h, n[h.spec.preset])), this.bodies && this.addBody(h);
+  }
+  drawWall(n, s) {
+    const { body: t, lip: e, bodyPieces: h, lipPieces: y, windows: r, sills: x } = n, l = this.scene.add.container(0, 0), a = this.scene.add.graphics(), c = this.scene.add.graphics(), d = s.edgeWidth ?? 2;
+    for (const o of h) this.fillRect(l, a, o, s.fill, s.texture);
+    for (const o of y) this.fillRect(l, a, o, s.lipFill ?? s.fill, s.lipTexture);
+    const f = s.windowFill ?? 4030344;
+    for (const o of r)
+      a.fillStyle(f, s.windowAlpha ?? 0.5), a.fillRect(o.x, o.y, o.w, o.h);
+    l.add(a);
+    for (const o of x) this.fillRect(l, c, o, s.fill, s.texture);
+    for (const o of x) c.lineStyle(1, s.edge).lineBetween(o.x, o.y, o.x + o.w, o.y);
+    if (s.windowFrame !== void 0)
+      for (const o of r) c.lineStyle(1, s.windowFrame).strokeRect(o.x, o.y, o.w, o.h);
+    return c.lineStyle(d, s.edge), c.strokeRect(t.x, t.y, t.w, t.h), e && c.lineStyle(d, s.edge).strokeRect(e.x, e.y, e.w, e.h), l.add(c), l.setDepth(n.depth), l;
+  }
+  fillRect(n, s, t, e, h) {
+    if (!h) {
+      s.fillStyle(e).fillRect(t.x, t.y, t.w, t.h);
+      return;
+    }
+    const y = this.scene.add.tileSprite(t.x + t.w / 2, t.y + t.h / 2, t.w, t.h, h);
+    y.setTilePosition(t.x, t.y), n.add(y);
+  }
+  addBody(n) {
+    const { collider: s } = n, t = this.scene.add.zone(s.x + s.w / 2, s.y + s.h / 2, s.w, s.h);
+    this.scene.physics.add.existing(t, !0), this.bodies.add(t);
+  }
+}
+class D extends I.Plugins.ScenePlugin {
+  constructor(n, s, t) {
+    super(n, s, t), typeof n.add.wallMap != "function" && s.registerGameObject("wallMap", function(e) {
+      return new A(this.scene, e);
+    });
+  }
+}
+export {
+  A as WallMap,
+  D as WallMapPlugin,
+  v as resolveWalls
+};

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+export interface WallPreset {
+    fill: number;
+    edge: number;
+    edgeWidth?: number;
+    lipHeight?: number;
+    lipFill?: number;
+    windowFill?: number;
+    windowFrame?: number;
+    windowInset?: number;
+    windowAlpha?: number;
+    sillHeight?: number;
+    texture?: string;
+    lipTexture?: string;
+}
+export interface WindowSpec {
+    offset: number;
+    width: number;
+}
+export interface WallSpec {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    thickness: number;
+    preset: string;
+    windows?: WindowSpec[];
+}
+export interface WallMapConfig {
+    presets: Record<string, WallPreset>;
+    walls: WallSpec[];
+    collide?: boolean;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface ResolvedWall {
+    spec: WallSpec;
+    horizontal: boolean;
+    body: Rect;
+    lip: Rect | null;
+    bodyPieces: Rect[];
+    lipPieces: Rect[];
+    windows: Rect[];
+    sills: Rect[];
+    collider: Rect;
+    depth: number;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@mertdogar/phaser-procedural-walls",
+  "version": "0.1.0",
+  "description": "Phaser 4 scene plugin that renders procedural top-down walls with faces, see-through windows, depth sorting and Arcade colliders from wall centerline data.",
+  "keywords": [
+    "phaser",
+    "phaser4",
+    "phaser-plugin",
+    "procedural",
+    "walls",
+    "floorplan",
+    "top-down",
+    "tilemap",
+    "game"
+  ],
+  "author": "Mert Dogar <mertdogar@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/mertdogar/phaser-procedural-walls#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mertdogar/phaser-procedural-walls.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mertdogar/phaser-procedural-walls/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.lib.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint src demo tests",
+    "prepublishOnly": "pnpm typecheck && pnpm lint && pnpm test && pnpm build"
+  },
+  "peerDependencies": {
+    "phaser": "^4.0.0"
+  },
+  "devDependencies": {
+    "oxlint": "^1.0.0",
+    "phaser": "^4.2.1",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  }
+}