Skip to content

Latest commit

 

History

History
328 lines (275 loc) · 8.1 KB

PLACEMENT_TOOLS_IMPLEMENTATION.md

File metadata and controls

328 lines (275 loc) · 8.1 KB

Placement Tools Implementation Summary

Overview

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.

Files Created

Core System Files

  1. 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
  2. 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
  3. src/editor/PlacementToolsUI.js (200 lines)

    • Visual UI panel for placement tools
    • Buttons for each marker type
    • Export/Import controls
    • Active mode highlighting
  4. 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

Documentation

  1. docs/PLACEMENT_TOOLS_GUIDE.md (200+ lines)
    • Complete user guide
    • Marker type descriptions
    • Usage instructions
    • Integration examples
    • Best practices

Integration Points

Archipelago Editor (src/scene/scenes/archipelagoEditor.js)

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

Archipelago Scene (src/scene/scenes/archipelago.js)

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');

Marker Types and Properties

1. 👤 NPC (Non-Player Character)

{
    npcId: '',
    name: 'Unnamed NPC',
    dialogue: [],
    questIds: [],
    shopItems: [],
    behavior: 'idle'
}

2. 👹 Enemy Spawn

{
    enemyId: '',
    level: 1,
    health: 100,
    damage: 10,
    respawnTime: 60,
    patrolRadius: 10,
    aggressive: true
}

3. 🏪 Vendor

{
    vendorId: '',
    name: 'Merchant',
    shopType: 'general',
    inventory: [],
    buyMultiplier: 1.0,
    sellMultiplier: 0.5
}

4. 🎯 Player Spawn

{
    spawnId: '',
    team: 'player',
    priority: 0,
    respawnPoint: true
}

5. 🌀 Warp Point

{
    warpId: '',
    targetScene: '',
    targetPosition: { x: 0, y: 0, z: 0 },
    requiresItem: null,
    requiresQuest: null
}

6. ⚡ Respawn Point

{
    respawnId: '',
    team: 'player',
    checkpoint: false
}

7. 📜 Quest Giver

{
    questGiverId: '',
    name: 'Quest Giver',
    quests: [],
    dialogue: []
}

8. 💎 Treasure

{
    treasureId: '',
    loot: [],
    respawnTime: 300,
    requiresKey: null
}

9. ⚙️ Trigger Zone

{
    triggerId: '',
    triggerType: 'enter',
    action: '',
    radius: 5,
    oneTime: false
}

Usage Workflow

In Editor

  1. Open Editor: Select "🎨 Game Editor" from lobby
  2. Open Placement Tools: Click "🎯 Toggle Placement Tools"
  3. Select Marker Type: Click desired marker button (e.g., "👹 Enemy Spawn")
  4. Place Marker: Click on terrain to place
  5. Edit Properties: Modify in auto-opened properties panel
  6. Save: Click "💾 Save" in properties panel
  7. Export Scene: Click "💾 Save Scene" to export JSON

At Runtime

  1. Create Scene: Scene loads normally
  2. Load Markers: MarkerLoader automatically loads from JSON
  3. Spawn Entities: Enemies, NPCs, vendors spawn automatically
  4. Register Points: Spawn/respawn points registered globally
  5. Create Visuals: Warp points, treasures, triggers created

Example: Spawning Enemies

In Editor:

  1. Click "👹 Enemy Spawn" button
  2. Click on island terrain
  3. Set properties:
    • enemyId: "slime_basic"
    • level: 5
    • health: 150
    • damage: 15
  4. Save marker
  5. Export scene

At Runtime:

// MarkerLoader automatically:
const enemy = await enemyManager.spawn(
    'slime_basic',
    position,
    { level: 5, health: 150, damage: 15 }
);

File Format

Exported Scene JSON

{
    "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"
    }
}

Key Features

Visual Feedback

  • ✅ Color-coded markers (red=enemy, blue=NPC, gold=vendor, etc.)
  • ✅ Icon billboards (always face camera)
  • ✅ Semi-transparent preview during placement
  • ✅ Highlight on selection

Property Editing

  • ✅ Dynamic form generation based on marker type
  • ✅ Support for strings, numbers, booleans, arrays, objects
  • ✅ JSON editing for complex properties
  • ✅ Validation and error handling

Import/Export

  • ✅ JSON format for easy editing
  • ✅ Timestamped exports
  • ✅ Version metadata
  • ✅ Preserves all marker properties

Runtime Integration

  • ✅ Automatic entity spawning
  • ✅ EnemyManager integration
  • ✅ CharacterManager integration
  • ✅ Global spawn point registration
  • ✅ Visual warp point creation

Future Enhancements

Potential improvements for future development:

  1. Snap to Grid - Align markers to grid for precise placement
  2. Marker Grouping - Organize markers into layers/groups
  3. Copy/Paste - Duplicate markers quickly
  4. Search/Filter - Find markers by type or properties
  5. Undo/Redo - Revert placement actions
  6. Multi-Select - Edit multiple markers at once
  7. Templates - Save marker presets
  8. Validation - Check for missing required properties
  9. Preview Mode - Test spawns without saving
  10. Patrol Paths - Visual path editing for enemies

Testing Checklist

  • 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

Conclusion

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:

  1. Adding to MarkerTypes enum
  2. Adding config to MarkerConfig
  3. Adding spawn handler in MarkerLoader

This foundation supports continued development of the game's content pipeline.