// 🗺️ Tiled Test Scene - Za testiranje Tiled map v igri class TiledTestScene extends Phaser.Scene { constructor() { super({ key: 'TiledTestScene' }); this.map = null; this.layers = []; } create() { console.log('🗺️ Tiled Test Scene: Initializing...'); // Set light blue sky background this.cameras.main.setBackgroundColor('#87CEEB'); // Try to load the tilemap try { // Load the micro farm tilemap this.map = this.make.tilemap({ key: 'micro_farm_128x128' }); console.log(`📐 Map size: ${this.map.width}x${this.map.height} tiles`); console.log(`📐 Tile size: ${this.map.tileWidth}x${this.map.tileHeight}px`); console.log(`📐 Map dimensions: ${this.map.widthInPixels}x${this.map.heightInPixels}px`); // List all tilesets in the map console.log('📦 Tilesets in map:'); this.map.tilesets.forEach((tileset, i) => { console.log(` ${i + 1}. ${tileset.name} (${tileset.total} tiles)`); }); // List all layers in the map console.log('📚 Layers in map:'); this.map.layers.forEach((layer, i) => { console.log(` ${i + 1}. ${layer.name} (${layer.width}x${layer.height})`); }); // Add tilesets - mora biti enako kot v .tmx! // BELEŽKA: Ta imena morajo biti enaka kot v micro_farm_128x128.tmx const tilesets = {}; // Poskusi dodati tilesets this.map.tilesets.forEach(tilesetData => { console.log(`🔧 Adding tileset: ${tilesetData.name}`); // Map tileset names to Phaser texture keys const textureKey = this.getTilesetTextureKey(tilesetData.name); if (this.textures.exists(textureKey)) { try { tilesets[tilesetData.name] = this.map.addTilesetImage(tilesetData.name, textureKey); console.log(` ✅ Tileset "${tilesetData.name}" added (using texture: ${textureKey})`); } catch (e) { console.error(` ❌ Failed to add tileset "${tilesetData.name}":`, e.message); } } else { console.warn(` ⚠️ Texture "${textureKey}" not found for tileset "${tilesetData.name}"`); } }); // Create layers console.log('🎨 Creating layers...'); this.map.layers.forEach(layerData => { try { // Get tilesets for this layer const layerTilesets = Object.values(tilesets); const layer = this.map.createLayer(layerData.name, layerTilesets, 0, 0); if (layer) { this.layers.push(layer); console.log(` ✅ Layer "${layerData.name}" created`); } else { console.warn(` ⚠️ Failed to create layer "${layerData.name}"`); } } catch (e) { console.error(` ❌ Error creating layer "${layerData.name}":`, e.message); } }); // Set camera bounds const mapWidth = this.map.widthInPixels; const mapHeight = this.map.heightInPixels; this.cameras.main.setBounds(0, 0, mapWidth, mapHeight); // Zoom out to see the whole 128x128 map // 128 tiles * 48px = 6144px // Typical screen is ~1920x1080 // Zoom = 1920 / 6144 ≈ 0.3 (adjust for comfort) const zoomLevel = 0.4; this.cameras.main.setZoom(zoomLevel); console.log(`📷 Camera zoom set to ${zoomLevel}`); // Center camera on middle of map this.cameras.main.centerOn(mapWidth / 2, mapHeight / 2); // Enable camera controls this.setupControls(); console.log('✅ Tiled Test Scene: Map loaded successfully!'); console.log('🎮 Controls:'); console.log(' Arrow Keys: Move camera'); console.log(' Q/E: Zoom in/out'); console.log(' R: Reset camera'); console.log(' ESC: Return to main game'); // Add UI text this.addInfoText(); } catch (e) { console.error('❌ Failed to load tilemap:', e); // Show error message this.add.text(100, 100, 'ERROR: Failed to load micro farm map!\nCheck console for details.', { fontSize: '32px', fill: '#ff0000', backgroundColor: '#ffffff', padding: { x: 20, y: 20 } }); } } /** * Map Tiled tileset names to Phaser texture keys */ getTilesetTextureKey(tilesetName) { // Map tileset names to loaded texture keys in PreloadScene const mapping = { 'grass': 'tileset_grass', 'dirt': 'tileset_dirt', 'water': 'tileset_water', 'decorations': 'tileset_decorations', // Add more mappings as needed }; return mapping[tilesetName] || `tileset_${tilesetName}`; } setupControls() { // Cursor keys for camera movement this.cursors = this.input.keyboard.createCursorKeys(); // Zoom controls this.input.keyboard.on('keydown-Q', () => { const newZoom = this.cameras.main.zoom + 0.1; this.cameras.main.setZoom(Math.min(newZoom, 2.0)); this.updateInfoText(); }); this.input.keyboard.on('keydown-E', () => { const newZoom = this.cameras.main.zoom - 0.1; this.cameras.main.setZoom(Math.max(newZoom, 0.1)); this.updateInfoText(); }); // Reset camera this.input.keyboard.on('keydown-R', () => { if (this.map) { this.cameras.main.setZoom(0.4); this.cameras.main.centerOn(this.map.widthInPixels / 2, this.map.heightInPixels / 2); this.updateInfoText(); } }); // Return to main menu this.input.keyboard.on('keydown-ESC', () => { console.log('🔙 Returning to StoryScene...'); this.scene.start('StoryScene'); }); } addInfoText() { const style = { fontSize: '16px', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 10 } }; this.infoText = this.add.text(10, 10, '', style).setScrollFactor(0).setDepth(1000); this.updateInfoText(); } updateInfoText() { if (!this.infoText || !this.map) return; const zoom = this.cameras.main.zoom.toFixed(2); const camX = Math.round(this.cameras.main.scrollX); const camY = Math.round(this.cameras.main.scrollY); this.infoText.setText([ '🗺️ TILED TEST MODE', `Map: ${this.map.width}x${this.map.height} tiles`, `Zoom: ${zoom}x (Q/E to adjust)`, `Camera: (${camX}, ${camY})`, `Layers: ${this.layers.length}`, '', 'Controls:', ' Arrow Keys - Move', ' Q/E - Zoom', ' R - Reset', ' ESC - Exit' ]); } update(time, delta) { // Safety check - only run if cursors are initialized if (!this.cursors) return; // Camera movement with arrow keys const speed = 10 / this.cameras.main.zoom; // Adjust speed based on zoom if (this.cursors.left.isDown) { this.cameras.main.scrollX -= speed; } else if (this.cursors.right.isDown) { this.cameras.main.scrollX += speed; } if (this.cursors.up.isDown) { this.cameras.main.scrollY -= speed; } else if (this.cursors.down.isDown) { this.cameras.main.scrollY += speed; } // Update info text periodically if (time % 500 < delta) { this.updateInfoText(); } } }