Map Editor Tool

Design Babylon.js maps with a visual grid editor for tiles and spawn points.

1|Updated Oct 8, 2025
One-click install
npx skills add https://github.com/gigi-f/babylon_fp --skill map-editor-tool
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Map Editor Tool
Source: https://github.com/gigi-f/babylon_fp/tree/main/.claude/skills/map-editor
Command: npx skills add https://github.com/gigi-f/babylon_fp --skill map-editor-tool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual map design for Babylon.js games, letting designers place walls, floors, doors, windows, and spawn points on a grid without editing JSON manually.

Core Features & Use Cases

  • Visual map editor with grid-based placement for walls, floors, doors, windows, and spawn points (NPC and Player).
  • Rotation-aware placement and coordinate mapping to world space.
  • Import/Export workflow to save and load maps as JSON for project pipelines.

Quick Start

Open tools/map-editor.html in your browser and start placing walls, floors, doors, and spawns on the grid.

Frequently Asked Questions about Map Editor Tool

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design Babylon.js game maps without manually editing JSON files?

You can design Babylon.js maps visually using a grid editor to place walls, floors, doors, and windows. This visual map editor eliminates manual JSON editing by letting you configure grids, tiles, and spawn points directly through a browser-based UI workflow.

Can I place NPC and player spawn points using a visual grid editor?

Yes, the visual grid editor supports placing both NPC and player spawn points on the map. It provides rotation-aware placement and coordinate mapping to accurately translate your grid-based spawn point configurations into Babylon.js world space coordinates.

How do I export and import map configurations for my game project pipeline?

You can export and import map configurations using the built-in JSON save and load workflow. This allows you to easily integrate your visually designed grids, tiles, and spawn points into your existing Babylon.js game project pipelines.

What is the best way to manage grid-based level design for Babylon.js applications?

The best way to manage grid-based level design is through a visual map editor that supports rotation-aware placement and coordinate mapping. It allows you to configure grids, tiles, and spawn points for walls, floors, doors, and windows visually, avoiding manual JSON editing.

Does the map editor support rotation logic for placing doors and windows?

Yes, the map editor includes rotation-aware placement and coordinate guidance for configuring elements like doors and windows. This rotation logic ensures that your grid-based placements are accurately mapped to the correct orientation in Babylon.js world space.

How do I get started with the visual map editor for game level design?

To get started with visual map design, simply open the map editor HTML file in your browser. You can immediately begin placing walls, floors, doors, and spawn points on the grid without any complex environment setup or dependencies.