Files
novafarma/docs/TILED_TESTIRANJE_PLAN.md
NovaFarma Dev 7eb1a5874a Avtomatska obdelava tileset slik - 3877 ločenih objektov in TSX datotek
- Ustvarjen skript za ločevanje objektov iz tileset slik (obdelaj_tilesete.py)
- Odstranjevanje zelenega ozadja (#00FF00) iz vseh slik
- Ločevanje posameznih objektov iz multi-object slik
- Pomanjševanje na 50% originalne velikosti
- Obdelanih 234 slik  3877 ločenih objektov

- Ustvarjen skript za generiranje TSX datotek (generiraj_tsx_datoteke.py)
- Avtomatsko generiranje 3877 TSX datotek za Tiled Map Editor
- Pravilna XML struktura za vsak tileset
- Avtomatska detekcija velikosti objektov
- Relativne poti do slik

Rezultati:
- assets/narezano_loceno/ - 3877 ločenih PNG objektov
- assets/tilesets_auto/ - 3877 TSX datotek za Tiled
- Dokumentacija in navodila za uporabo

Vse pripravljeno za uporabo v Tiled Map Editor!
2025-12-21 15:36:42 +01:00

4.5 KiB

🗺️ TESTIRANJE TILED MAPE V IGRI

Cilj: Naložiti micro_farm_128x128.tmx mapo v Phaser igro za testiranje


📋 KORAKI:

1. EXPORT MAPE V JSON

Da lahko Phaser naloži mapo, moraš:

Tiled → File → Open → micro_farm_128x128.tmx
File → Export As... → micro_farm_128x128.json
Lokacija: assets/maps/micro_farm_128x128.json

2. DODAJ V PRELOAD SCENE

Uredi src/scenes/PreloadScene.js:

// Dodaj pod linijo 35 (farm_map):
this.load.tilemapTiledJSON('micro_farm_128x128', 'assets/maps/micro_farm_128x128.json');

3. MOŽNOST A: Testna Scena (Najhitrejše)

Ustvari novo sceno src/scenes/TiledTestScene.js:

class TiledTestScene extends Phaser.Scene {
    constructor() {
        super({ key: 'TiledTestScene' });
    }

    create() {
        console.log('🗺️ Tiled Test Scene: Loading micro farm...');

        // Set background color
        this.cameras.main.setBackgroundColor('#87CEEB');

        // Load the tilemap
        const map = this.make.tilemap({ key: 'micro_farm_128x128' });

        // Add tilesets (imena morajo biti ENAKA kot v .tmx!)
        const grassTileset = map.addTilesetImage('grass', 'tileset_grass');
        const dirtTileset = map.addTilesetImage('dirt', 'tileset_dirt');
        const waterTileset = map.addTilesetImage('water', 'tileset_water');
        // Dodaj ostale tilesets po potrebi...

        // Create tile layers
        const groundLayer = map.createLayer('Ground', [grassTileset, dirtTileset, waterTileset], 0, 0);
        
        // Dodaj ostale layerje...
        // const fenceLayer = map.createLayer('Fences', [...tilesets], 0, 0);

        // Set camera bounds
        this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
        this.cameras.main.setZoom(0.5); // Zoom out za 128x128

        // Camera controls
        const cursors = this.input.keyboard.createCursorKeys();
        this.cursors = cursors;

        console.log('✅ Micro Farm loaded!');
    }

    update() {
        // Camera movement
        const speed = 8;
        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;
        }
    }
}

Dodaj v src/game.js:

const config = {
    // ...
    scene: [
        PreloadScene,
        TiledTestScene,  // ← DODAJ TO
        StoryScene,
        GameScene,
        UIScene
    ]
};

Začasno spremeni PreloadScene.create():

create() {
    console.log('✅ PreloadScene: Assets loaded!');
    window.gameState.currentScene = 'PreloadScene';

    // ZAČASNO: Gre naravnost v TiledTestScene
    this.time.delayedCall(500, () => {
        console.log('🗺️ Starting TiledTestScene...');
        this.scene.start('TiledTestScene');  // ← SPREMENI TO
    });
}

4. MOŽNOST B: Debug Način v GameScene

Dodaj gumb za toggle v GameScene.create():

// Debug: Load Tiled map instead of procedural terrain
this.input.keyboard.on('keydown-M', () => {
    this.loadTiledMap();
});

Dodaj metodo v GameScene:

loadTiledMap() {
    console.log('🗺️ Loading Tiled Map: micro_farm_128x128...');
    
    // Hide procedural terrain
    if (this.terrainSystem && this.terrainSystem.container) {
        this.terrainSystem.container.setVisible(false);
    }

    // Load tilemap
    const map = this.make.tilemap({ key: 'micro_farm_128x128' });
    
    // Add tilesets
    const grassTileset = map.addTilesetImage('grass', 'tileset_grass');
    
    // Create layers
    const groundLayer = map.createLayer('Ground', grassTileset, 0, 0);
    
    // Set camera
    this.cameras.main.setZoom(0.5);
    
    console.log('✅ Tiled map loaded! Press M again to toggle.');
}

🎯 PRIPOROČILO:

Uporabi MOŽNOST A (Testna scena) - najhitrejše in najčistejše za testiranje!

  1. Exportaj JSON iz Tiled
  2. Ustvari TiledTestScene.js
  3. Dodaj v game.js
  4. Zaženi igro

Takrat boš videl samo svojo micro farm mapo brez ostalih sistemov! 🎉


KO DELUJE:

Ko vidiš mapo:

  • Premakni kamero s puščicami
  • Preveri, da se prikazujejo vsi tilesets
  • Preveri layerje (ograda, tla, player, etc.)

Potem lahko nazaj preklopiš na GameScene ali integriraš Tiled v glavni game!