nalaganje tiled mape. ozadje ni OK.

2025-12-27 04:04:24 +01:00
parent 875eb0516a
commit f8d533465b
11 changed files with 1891 additions and 1081 deletions
--- a/src/systems/Flat2DTerrainSystem.js
+++ b/src/systems/Flat2DTerrainSystem.js
@@ -69,6 +69,91 @@ class Flat2DTerrainSystem {
        console.log('✅ Flat 2D map ready!');
    }

+    // 🗺️ Load map directly from Tiled JSON (User Created)
+    loadFromTiled(map) {
+        this.tiledMap = map;
+        console.log('🗺️ Loading terrain from Tiled map:', map.key);
+
+        // Update system dimensions
+        this.width = map.width;
+        this.height = map.height;
+        this.tileSize = map.tileWidth;
+
+        // Prepare tilesets array
+        const tilesets = [];
+
+        // Helper to map tileset names to Phaser keys (similar to TiledTestScene)
+        const getTilesetKey = (name) => {
+            const mapping = {
+                'grass': 'tileset_grass',
+                'dirt': 'tileset_dirt',
+                'water': 'tileset_water',
+                'decorations': 'tileset_decorations',
+                '01_Ground': 'tileset_01_Ground',
+                '02_Obstacles': 'tileset_02_Obstacles',
+                '03_Fences': 'tileset_03_Fences',
+                '04_Buildings': 'tileset_04_Buildings',
+                '05_Tools_Items': 'tileset_05_Tools_Items'
+            };
+            return mapping[name] || `tileset_${name}`;
+        };
+
+        // Load tilesets
+        map.tilesets.forEach(tilesetData => {
+            let textureKey = getTilesetKey(tilesetData.name);
+
+            // 🕵️ Try to find texture (Prefix matched OR Exact name)
+            if (!this.scene.textures.exists(textureKey)) {
+                // Fallback: Try the raw tileset name as key
+                if (this.scene.textures.exists(tilesetData.name)) {
+                    textureKey = tilesetData.name;
+                }
+            }
+
+            if (this.scene.textures.exists(textureKey)) {
+                try {
+                    const tileset = map.addTilesetImage(tilesetData.name, textureKey);
+                    if (tileset) {
+                        tilesets.push(tileset);
+                        console.log(`  ✅ Tileset mapped: "${tilesetData.name}" -> Key: "${textureKey}"`);
+                    }
+                } catch (e) {
+                    console.error(`  ❌ Failed to add tileset: ${tilesetData.name}`, e);
+                }
+            } else {
+                console.warn(`  ⚠️ Texture not found for tileset: "${tilesetData.name}". Tried keys: "tileset_${tilesetData.name}", "${tilesetData.name}"`);
+            }
+        });
+
+        // Create layers
+        console.log(`  Found ${map.layers.length} layers in map.`);
+        map.layers.forEach((layerData, index) => {
+            console.log(`  Processing Layer ${index}: Name="${layerData.name}", Type="${layerData.type}", Visible=${layerData.visible}`);
+
+            if (layerData.visible && layerData.type === 'tilelayer') {
+                const layer = map.createLayer(layerData.name, tilesets, 0, 0);
+                if (layer) {
+                    console.log(`  ✅ Layer created: ${layerData.name}`);
+
+                    // Depth sorting
+                    if (layerData.name.toLowerCase().includes('ground')) layer.setDepth(1);
+                    else if (layerData.name.toLowerCase().includes('path')) layer.setDepth(2);
+                    else if (layerData.name.toLowerCase().includes('decor') || layerData.name.toLowerCase().includes('obstacle')) layer.setDepth(3);
+                    else if (layerData.name.toLowerCase().includes('buidling') || layerData.name.toLowerCase().includes('fence') || layerData.name.toLowerCase().includes('player')) layer.setDepth(4);
+                    else layer.setDepth(2);
+
+                    // Scale if needed (usually 1 for Tiled maps if assets match)
+                }
+            }
+        });
+
+        // Setup camera bounds
+        this.scene.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
+        this.scene.cameras.main.centerOn(map.widthInPixels / 2, map.heightInPixels / 2);
+
+        console.log('✅ Tiled map loaded and rendered!');
+    }
+
    // 🌍 PHASE 28: Create simple biome-aware background
    createBiomeBackground() {
        const size = this.tileSize;