---
description: How to design maps in Tiled Map Editor
---

# 🗺️ TILED MAP EDITOR - COMPLETE WORKFLOW

## ✅ Prerequisites (DONE!)
- ✅ Tiled installed (winget install Tiled.Tiled)
- ✅ Tilesets created (assets/tilesets/)
- ✅ Maps directory (assets/maps/)

---

## 📋 STEP-BY-STEP GUIDE

### **1. Launch Tiled**
// turbo
```powershell
# Open Tiled from Start Menu or:
tiled
```

### **2. Create New Map**
1. File → New → New Map
2. Settings:
   - **Orientation:** Orthogonal
   - **Tile layer format:** Base64 (zlib compressed)
   - **Tile render order:** Right Down
   - **Map size:** 100 x 100 tiles
   - **Tile size:** 48 x 48 pixels
3. Click "Save As" → `assets/maps/farm_map.tmx`

### **3. Import Tilesets**
1. Map → New Tileset
2. For **Grass:**
   - Name: `grass_tileset`
   - Type: Based on Tileset Image
   - Image: `../tilesets/tileset_grass_clean.png`
   - Tile width/height: 48px
   - Click OK
3. Repeat for:
   - `water_tileset` → `tileset_water_pond.png`
   - `dirt_tileset` → `tileset_dirt_paths.png`
   - `decorations_tileset` → `tileset_decorations.png`

### **4. Create Layers (in this order!)**
1. Layer → Add Tile Layer → "Ground" (grass base)
2. Layer → Add Tile Layer → "Paths" (dirt & water)
3. Layer → Add Tile Layer → "Decorations" (trees, flowers)
4. Layer → Add Object Layer → "SpawnPoints"

### **5. Design Map**
**Ground Layer:**
- Fill entire map with grass tiles
- Use Paint Bucket tool (hotkey: K)

**Paths Layer:**
- Add circular pond (center: 60, 45)
- Use water tiles in circular pattern
- Add dirt paths if desired

**Decorations Layer:**
- Place cherry blossom trees
- Add flowers scattered
- Add bushes near trees

**SpawnPoints Layer:**
- Add Rectangle object
- Name: "PlayerSpawn"
- Position: x=50 * 48, y=50 * 48 (center)

### **6. Set Tile Properties (for collision)**
1. Select water tiles in tileset panel
2. Right-click → Tile Properties
3. Add Custom Property:
   - Name: `collides`
   - Type: bool
   - Value: true

### **7. Export Map**
1. File → Export As → JSON
2. Save to: `assets/maps/farm_map.json`
3. ✅ This is the file Phaser will load!

---

## 🎨 DESIGN TIPS

**Circular Pond:**
- Use Ellipse Selection tool
- Center at grid (60, 45)
- Radius: ~9 tiles
- Fill with water tiles

**Cherry Trees:**
- Scatter in clusters of 3-5
- Leave space between clusters
- Place on Decorations layer

**Paths:**
- Use Freehand tool for organic paths
- 1-2 tiles wide
- Connect different areas

---

## 🔧 PHASER INTEGRATION (Auto-handled!)

Map will load in `GameScene.js`:
```javascript
this.load.tilemapTiledJSON('farm_map', 'assets/maps/farm_map.json');
this.map = this.make.tilemap({ key: 'farm_map' });
```

**No code changes needed if you follow this workflow!**

---

## 🎯 FINAL CHECKLIST

- [ ] Map created (100x100 tiles)
- [ ] 4 tilesets imported
- [ ] 4 layers created (Ground, Paths, Decorations, SpawnPoints)
- [ ] Pond designed (circular, ~9 tile radius)
- [ ] Trees placed (cherry blossom clusters)
- [ ] Player spawn point set
- [ ] Water tiles have `collides: true` property
- [ ] Map exported to `assets/maps/farm_map.json`

---

## 📚 Resources
- Tiled Docs: https://doc.mapeditor.org/
- Phaser Tilemap Tutorial: https://phaser.io/tutorials/making-your-first-phaser-3-game