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

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:

   // 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:

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:

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:

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! 🗺️✨