novafarma/TILED_WORKFLOW_GUIDE.md

# 🗺️ TILED WORKFLOW GUIDE
**Kako začeti z Tiled mapami v Mrtva Dolina**

---

## 📁 STRUKTURA

```
/tiled/
├── maps/          → .tmx files (your maps)
├── tilesets/      → .tsx files (tileset definitions)
└── README.md      → Ta guide
```

---

## 🚀 QUICK START

### 1. **Install Tiled Editor**
```bash
brew install tiled
# OR download from: https://www.mapeditor.org/
```

### 2. **Create New Map**
1. Open Tiled
2. File → New → New Map
3. Settings:
   - Orientation: **Orthogonal** (top-down)
   - Tile Size: **32x32** pixels
   - Map Size: **20x20** tiles (640x640px) - starter size
   - Save to: `tiled/maps/starter_map.tmx`

### 3. **Add Tileset**
1. Map → New Tileset
2. Settings:
   - Name: `grass_tiles`
   - Image: Select your grass tile PNG
   - Tile Size: **32x32**
   - Save to: `tiled/tilesets/grass_tiles.tsx`

### 4. **Paint Tiles**
1. Select tileset in Tilesets panel
2. Select Stamp tool (B)
3. Click on tile
4. Paint on map!

### 5. **Add Objects**
1. Create Object Layer (Layer → New → Object Layer)
2. Name it: `spawns` or `items`
3. Insert objects:
   - **Point** = Player spawn, NPC spawn
   - **Rectangle** = Interactive zone
   - **Polygon** = Custom collision

### 6. **Export & Load in Game**
1. Save map (Ctrl+S)
2. Map is auto-saved as `.tmx` (XML format)
3. Load in game:
   ```javascript
   // In GameScene.js preload()
   this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
   
   // In GameScene.js create()
   const map = this.make.tilemap({ key: 'myMap' });
   const tileset = map.addTilesetImage('grass_tiles', 'grass_tileset_key');
   const layer = map.createLayer('Ground', tileset, 0, 0);
   ```

---

## 🎨 RECOMMENDED ASSETS

**Use assets from `assets/slike 🟢/`:**

### **Ground Tiles:**
- `demo 🔴/tiles/grass_tile.png` (64x64 Style 30)
- `demo 🔴/tiles/dirt_tile.png` (64x64 Style 30)

### **Objects:**
- `demo 🔴/items 🔴/` (tools, locket, etc.)
- `demo 🔴/biomi 🔴/buildings/tent.png`

### **Characters:**
- `animations 🟢/kai/` (player sprites)
- `animations 🟢/gronk/` (NPC)
- `animations 🟢/zombies/base/` (enemies)

---

## 🔧 GAME INTEGRATION

### **Method 1: Replace GameScene Map**
Edit `src/scenes/GameScene.js`:
```javascript
preload() {
    // Load your Tiled map
    this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
    
    // Load tilesets used in map
    this.load.image('grass_tileset', 'assets/slike 🟢/demo 🔴/tiles/grass_tile.png');
}

create() {
    // Create map
    const map = this.make.tilemap({ key: 'myMap' });
    const tileset = map.addTilesetImage('grass_tiles', 'grass_tileset');
    
    // Create layers
    const groundLayer = map.createLayer('Ground', tileset, 0, 0);
    const objectsLayer = map.createLayer('Objects', tileset, 0, 0);
    
    // Enable collision
    groundLayer.setCollisionByProperty({ collides: true });
}
```

### **Method 2: New Tiled Scene**
Create `src/scenes/TiledGameScene.js`:
```javascript
class TiledGameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'TiledGameScene' });
    }
    
    preload() {
        this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
        this.load.image('tiles', 'assets/slike 🟢/demo 🔴/tiles/grass_tile.png');
    }
    
    create() {
        const map = this.make.tilemap({ key: 'myMap' });
        const tileset = map.addTilesetImage('tiles');
        const layer = map.createLayer(0, tileset, 0, 0);
        
        // Find player spawn from object layer
        const spawns = map.getObjectLayer('spawns');
        const playerSpawn = spawns.objects.find(o => o.name === 'player');
        
        // Create player at spawn point
        this.player = this.physics.add.sprite(playerSpawn.x, playerSpawn.y, 'kai_idle');
    }
}
```

Then register in `src/game.js`:
```javascript
scene: [BootScene, PreloadScene, StoryScene, PrologueScene, TiledGameScene]
```

---

## 💡 TIPS

### **Tile Sizes:**
- All tiles MUST be **32x32** or multiples (64x64, 96x96)
- Phaser works best with power-of-2 sizes

### **Layers:**
1. **Ground** - Base terrain (grass, dirt, water)
2. **Objects** - Buildings, trees, decorations
3. **Collision** - Invisible collision areas
4. **Spawns** - Object layer for spawn points

### **Object Properties:**
In Tiled, select object → Add Custom Property:
- `type: "player_spawn"` → Player start position
- `type: "zombie_spawn"` → Enemy spawn
- `type: "item"` + `item_id: "locket"` → Collectible item
- `collides: true` → Enable physics collision

### **Naming Convention:**
- Map files: `starter_map.tmx`, `farm_map.tmx`, `town_map.tmx`
- Tileset files: `grass_tiles.tsx`, `building_tiles.tsx`
- Use lowercase with underscores!

---

## 🎮 TESTING WORKFLOW

1. **Edit in Tiled** → Save map
2. **Refresh browser** (F5) → Phaser reloads .tmx
3. **Test in game** → See changes immediately
4. **Iterate!**

**No build step needed - Tiled maps are loaded dynamically!** 🚀

---

## 📚 RESOURCES

- **Tiled Docs:** https://doc.mapeditor.org/
- **Phaser Tilemap Docs:** https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html
- **Tutorial:** https://www.youtube.com/watch?v=XATr_jdh-44

---

## 🔥 QUICK EXAMPLE MAP

I'll create a starter map for you in next step! Check `tiled/maps/starter_map.tmx`

---

**Happy Mapping! 🗺️✨**