A comprehensive placement tools system has been implemented for the Archipelago Editor, allowing visual placement and configuration of game entities including NPCs, enemies, vendors, spawn points, warp points, and more.
-
src/editor/MarkerDefinitions.js(150 lines)- Defines 9 marker types with configurations
- Visual marker creation with icons and colors
- Default data structures for each marker type
- Marker types: NPC, Enemy, Vendor, Player Spawn, Warp Point, Respawn Point, Quest Giver, Treasure, Trigger
-
src/editor/PlacementTools.js(377 lines)- Core placement logic and marker management
- Mouse-based placement with preview
- Property editing UI with dynamic forms
- Import/Export functionality
- Marker filtering and querying
-
src/editor/PlacementToolsUI.js(200 lines)- Visual UI panel for placement tools
- Buttons for each marker type
- Export/Import controls
- Active mode highlighting
-
src/utils/markerLoader.js(350 lines)- Runtime marker loading system
- Integration with EnemyManager and CharacterManager
- Spawns entities from marker data
- Handles all 9 marker types
- Player spawn and respawn point registration
docs/PLACEMENT_TOOLS_GUIDE.md(200+ lines)- Complete user guide
- Marker type descriptions
- Usage instructions
- Integration examples
- Best practices
Added Imports:
import { PlacementTools } from '../../editor/PlacementTools.js';
import { PlacementToolsUI } from '../../editor/PlacementToolsUI.js';Initialization:
editorState.placementTools = new PlacementTools(scene, editorState);
editorState.placementToolsUI = new PlacementToolsUI(editorState.placementTools);Save/Load Integration:
- Scene save now includes marker data
- Scene load restores markers with full properties
- Timestamped exports with version metadata
Added Imports:
import { MarkerLoader } from '../../utils/markerLoader.js';
import { getAssetLibrary } from '../../assets/index.js';Runtime Loading:
const assetSystems = getAssetLibrary(scene);
const markerLoader = new MarkerLoader(scene, assetSystems);
await markerLoader.loadFromFile('./config/archipelago_scene.json');{
npcId: '',
name: 'Unnamed NPC',
dialogue: [],
questIds: [],
shopItems: [],
behavior: 'idle'
}{
enemyId: '',
level: 1,
health: 100,
damage: 10,
respawnTime: 60,
patrolRadius: 10,
aggressive: true
}{
vendorId: '',
name: 'Merchant',
shopType: 'general',
inventory: [],
buyMultiplier: 1.0,
sellMultiplier: 0.5
}{
spawnId: '',
team: 'player',
priority: 0,
respawnPoint: true
}{
warpId: '',
targetScene: '',
targetPosition: { x: 0, y: 0, z: 0 },
requiresItem: null,
requiresQuest: null
}{
respawnId: '',
team: 'player',
checkpoint: false
}{
questGiverId: '',
name: 'Quest Giver',
quests: [],
dialogue: []
}{
treasureId: '',
loot: [],
respawnTime: 300,
requiresKey: null
}{
triggerId: '',
triggerType: 'enter',
action: '',
radius: 5,
oneTime: false
}- Open Editor: Select "🎨 Game Editor" from lobby
- Open Placement Tools: Click "🎯 Toggle Placement Tools"
- Select Marker Type: Click desired marker button (e.g., "👹 Enemy Spawn")
- Place Marker: Click on terrain to place
- Edit Properties: Modify in auto-opened properties panel
- Save: Click "💾 Save" in properties panel
- Export Scene: Click "💾 Save Scene" to export JSON
- Create Scene: Scene loads normally
- Load Markers: MarkerLoader automatically loads from JSON
- Spawn Entities: Enemies, NPCs, vendors spawn automatically
- Register Points: Spawn/respawn points registered globally
- Create Visuals: Warp points, treasures, triggers created
- Click "👹 Enemy Spawn" button
- Click on island terrain
- Set properties:
- enemyId: "slime_basic"
- level: 5
- health: 150
- damage: 15
- Save marker
- Export scene
// MarkerLoader automatically:
const enemy = await enemyManager.spawn(
'slime_basic',
position,
{ level: 5, health: 150, damage: 15 }
);{
"islands": [
{
"name": "Pirate Island",
"position": [0, 0, 800],
"rotation": [0, 0, 0],
"scaling": [30, 30, 30]
}
],
"markers": [
{
"type": "enemy",
"position": { "x": 100, "y": 5, "z": 200 },
"rotation": { "x": 0, "y": 0, "z": 0 },
"data": {
"enemyId": "slime_basic",
"level": 5,
"health": 150,
"damage": 15,
"respawnTime": 60,
"patrolRadius": 10,
"aggressive": true
},
"createdAt": "2024-12-24T18:00:00.000Z",
"lastModified": "2024-12-24T18:05:00.000Z"
}
],
"metadata": {
"savedAt": "2024-12-24T18:10:00.000Z",
"version": "1.0"
}
}- ✅ Color-coded markers (red=enemy, blue=NPC, gold=vendor, etc.)
- ✅ Icon billboards (always face camera)
- ✅ Semi-transparent preview during placement
- ✅ Highlight on selection
- ✅ Dynamic form generation based on marker type
- ✅ Support for strings, numbers, booleans, arrays, objects
- ✅ JSON editing for complex properties
- ✅ Validation and error handling
- ✅ JSON format for easy editing
- ✅ Timestamped exports
- ✅ Version metadata
- ✅ Preserves all marker properties
- ✅ Automatic entity spawning
- ✅ EnemyManager integration
- ✅ CharacterManager integration
- ✅ Global spawn point registration
- ✅ Visual warp point creation
Potential improvements for future development:
- Snap to Grid - Align markers to grid for precise placement
- Marker Grouping - Organize markers into layers/groups
- Copy/Paste - Duplicate markers quickly
- Search/Filter - Find markers by type or properties
- Undo/Redo - Revert placement actions
- Multi-Select - Edit multiple markers at once
- Templates - Save marker presets
- Validation - Check for missing required properties
- Preview Mode - Test spawns without saving
- Patrol Paths - Visual path editing for enemies
- Marker placement works in editor
- Properties panel opens and saves
- Export creates valid JSON
- Import loads markers correctly
- Runtime spawning works for enemies
- Player spawn points register
- Warp points create visuals
- Hierarchy panel updates
- Gizmos work with markers
- Delete removes markers
The placement tools system provides a complete workflow for designing game levels visually in the editor and loading them at runtime. It integrates seamlessly with existing systems (EnemyManager, CharacterManager) and follows established patterns in the codebase.
The system is extensible - new marker types can be added by:
- Adding to
MarkerTypesenum - Adding config to
MarkerConfig - Adding spawn handler in
MarkerLoader
This foundation supports continued development of the game's content pipeline.