Static HTML + CSS + JavaScript tool that draws a room-sized canvas with optional layout guides and exports a PNG. It was created for the Maniac Mansion Mania community, with Adventure Game Studio (AGS) projects in mind—typical resolutions, bands, and layout guides you use when building rooms and assets for those games.
Open index.html (redirects to v2.html) or open v2.html directly in a browser. No build step or server required.
v1 (v1.html) is legacy and frozen—use v2 for the current UI (drawers, tileset options, etc.).
- PNG — downloads the current bitmap with an auto-generated filename.
- Ctrl+S / Cmd+S — same as PNG download.
- Open preview as PNG — link uses a blob URL so you can open or save from the preview without downloading first.
The canvas updates as you change controls (no separate “render” step).
| Feature | What it does |
|---|---|
| Room | Preset width × height (e.g. 320×200, 320×240, up to 1024×768) plus a 40×24 “inventory item” size. Band positions scale from a 320×200 reference when you change room height. |
| Fill | Base background color for the room (and for tile cells when tile fill is “same as room”). |
| Horizontal bands | Top and bottom band heights (px). Optional colored band overlay and white boundary lines at the band edges (each line can be toggled). Matches classic AGS-style top/status and bottom/verb regions. |
| Grid | Square grid: step (px) plus X/Y offsets so you can align the grid phase to your art. |
| Vertical splits | N equal-width columns → N−1 vertical guide lines, with a shared horizontal offset. Ignore top / middle / bottom skips drawing splits inside those horizontal band zones (defaults: ignore top and bottom). |
| Box | Safe-area rectangle: inset % from the shorter canvas side, inner shape aspect derived from middle band, full canvas, or top/bottom band—handy for UI-safe framing. |
| Frame | Solid border around the canvas (color + width in px), clamped so the interior stays at least 1×1 px. |
| Tileset | Builds a columns × rows atlas of repeated room thumbnails (row-major), max 32×32 cells, output capped at 4096 px per side. Options: outline tiles, cell numbers (0, 1, 2…), per-tile fill (same as room, random RGB, or 90s palette — random color per tile from a retro pool each redraw). |
| Guide toggles | Quick row of checkboxes to show or hide bands, colored bands, grid, box, vertical splits, frame, and tileset preview. All guide toggles off clears them in one click. Opening a drawer can turn on its matching guide when it was off. |
Shared logic lives in js/ags-bg-builder.js; styling in css/ags-bg-builder.css.