Helbreath Map Editor

A modern web-based map editor for Helbreath .amd map files. Replaces the legacy Windows-only AnMap tool with a cross-platform browser-based editor. Built with Vue 3, TypeScript, PixiJS 8, and Vite.

Prerequisites

• Node.js 18+
• npm
• Helbreath client .pak sprite files (placed where the converter expects them)

Building

1. Install dependencies

npm install
cd tools/pak-converter && npm install && cd ../..

2. Convert sprite assets

The editor needs sprites extracted from Helbreath .pak files. This step converts them into PNG spritesheets and an atlas JSON file used at runtime.

npm run convert-assets

This generates files in public/assets/ (gitignored). Without this step, the editor has no sprites to display.

3. Run the development server

npm run dev

The editor will be available at http://localhost:5173.

4. Production build

npm run build

Output goes to dist/. You can preview the production build with:

npm run preview

Usage

Opening a map

Use Ctrl+O or the toolbar to open a .amd map file from the original Helbreath client data/ directory (e.g. default.amd, aresden.amd, elvine.amd).

Creating a new map

Use Ctrl+N to create a blank map with custom dimensions.

Editing tools

Tool	Shortcut	Description
Paint Tile	B	Paint base terrain tiles
Paint Object	O	Place objects on the map
Erase Object	E	Remove objects from tiles
Bucket Fill	F	Flood fill terrain (10,000 tile limit)
Eyedropper	I	Pick a tile/object from the map

• Use [ / ] to decrease/increase brush size.
• Select tiles and objects from the Tile Palette panel on the side.
• Edit tile properties (blocked, teleport, farming, buildable) in the Properties Panel.

Navigation

• Scroll wheel to zoom in/out
• Space + drag to pan the viewport
• Minimap panel for quick overview navigation
• G to toggle the grid overlay

Saving

Use Ctrl+S to save the map back to a .amd file (downloaded via browser).

Undo/Redo

• Ctrl+Z to undo
• Ctrl+Y or Ctrl+Shift+Z to redo
• Supports up to 50 operations in history

Keyboard Shortcuts

Shortcut	Action
Ctrl+N	New map
Ctrl+O	Open map
Ctrl+S	Save map
Ctrl+Z	Undo
Ctrl+Y / Ctrl+Shift+Z	Redo
G	Toggle grid
B	Paint tile tool
O	Paint object tool
E	Erase object tool
F	Bucket fill tool
I	Eyedropper tool
[ / ]	Decrease/increase brush size
Space+drag	Pan viewport
Scroll wheel	Zoom in/out

Project Structure

map-editor/
├── tools/
│   └── pak-converter/     # Node.js tool: converts .pak archives to PNG spritesheets
├── src/
│   ├── components/        # Vue UI components (toolbar, palette, panels)
│   ├── pixi/              # PixiJS map renderer
│   ├── formats/           # File format parsers/writers (AMD)
│   ├── stores/            # Pinia state stores (map, editor, assets)
│   └── composables/       # Vue composables (tools, renderer lifecycle)
├── public/
│   └── assets/            # Generated spritesheets (gitignored)
└── package.json