# ☕ TONIGHT'S TILED SESSION - QUICK START

**Session Time:** ~2 hours  
**Goal:** Build 8×8 demo map ready for Phaser.js  
**Coffee:** Recommended! ☕

---

## ⚡ SUPER QUICK CHECKLIST

### 🚀 **STEP 1: OPEN TILED** (2 min)

```bash
# Check if installed
which tiled

# If not installed:
brew install tiled

# Launch
tiled &
```

---

### 🗺️ **STEP 2: CREATE MAP** (5 min)

**In Tiled:**
1. `File → New → New Map`
2. **Settings:**
   - Orientation: `Orthogonal`
   - Tile layer format: `CSV`
   - Map size: `8 × 8` tiles
   - Tile size: `64 × 64` pixels
3. `Save As...` → `/Users/davidkotnik/repos/novafarma/maps/demo_micro_farm.tmx`

**✅ You have:** Empty 512×512px map

---

### 🎨 **STEP 3: ADD TERRAIN TILESET** (10 min)

1. `Map → New Tileset...`
2. Name: `terrain_demo`
3. Type: `Collection of Images`
4. Click `+` to add tiles:
   - Browse to: `/Users/davidkotnik/repos/novafarma/assets/images/demo/terrain/`
   - Select:
     - `grass_tile_styleA.png`
     - `dirt_tile_styleA.png`
     - `tilled_dry_styleA.png`
     - `tilled_watered_styleA.png`
5. Save tileset: `/Users/davidkotnik/repos/novafarma/maps/tilesets/terrain_demo.tsx`

**✅ You have:** Terrain tileset with 4 tiles

---

### 🌾 **STEP 4: ADD CROPS TILESET** (10 min)

1. `Map → New Tileset...`
2. Name: `crops_demo`
3. Add tiles from: `/Users/davidkotnik/repos/novafarma/assets/images/demo/crops/`
   - `wheat_stage0_styleA.png` through `wheat_stage4_styleA.png`
4. Save: `/Users/davidkotnik/repos/novafarma/maps/tilesets/crops_demo.tsx`

**✅ You have:** 5 wheat growth stages

---

### 🏕️ **STEP 5: ADD OBJECTS TILESET** (10 min)

1. `Map → New Tileset...`
2. Name: `objects_demo`
3. Add from various folders:
   - `buildings/tent_styleA.png`
   - `environment/campfire_styleA.png`
   - `environment/dead_tree_styleA.png`
   - `environment/rock_styleA.png`
4. Save: `/Users/davidkotnik/repos/novafarma/maps/tilesets/objects_demo.tsx`

**✅ You have:** Buildings & decorations ready

---

### 📚 **STEP 6: CREATE LAYERS** (5 min)

**In Layers panel (bottom-right), create these layers:**

Right-click → `Add Layer` → choose type:

1. **"Collision"** (Object Layer)
2. **"Spawns"** (Object Layer)
3. **"Decorations"** (Object Layer)
4. **"Buildings"** (Object Layer)
5. **"Crops"** (Tile Layer)
6. **"Tilled Soil"** (Tile Layer)
7. **"Base Terrain"** (Tile Layer) ← **START HERE!**

**✅ You have:** 7 organized layers

---

### 🌱 **STEP 7: PAINT GRASS** (10 min)

1. **Select layer:** `Base Terrain` (click on it in Layers panel)
2. **Select tile:** Click `grass_tile_styleA` in Tilesets panel
3. **Tool:** Press `G` (Bucket Fill)
4. **Click map:** Fill entire 8×8 with grass

**Optional:** Paint a few `dirt_tile_styleA` for variety

**✅ You have:** Green grassy world!

---

### 🟫 **STEP 8: PAINT TILLED SOIL** (10 min)

1. **Select layer:** `Tilled Soil`
2. **Select tile:** `tilled_dry_styleA`
3. **Tool:** Press `B` (Brush)
4. **Paint 2×2 patch:**
   - Row 1, Columns 1-2
   - Row 2, Columns 1-2

**Coordinates in pixels:** (64,64) to (192,192)

**✅ You have:** Farmable area!

---

### ⛺ **STEP 9: PLACE TENT** (10 min)

1. **Select layer:** `Buildings` (Object Layer!)
2. **Tool:** Press `T` (Insert Tile)
3. **Select tile:** Click `tent_styleA` in objects tileset
4. **Click on map** at position **Column 6, Row 1**
   - Pixel position: (384, 64)
5. **Right-click tent → Object Properties:**
   - Name: `tent`
   - Type: `building`
   - Add custom property:
     - Name: `collision`
     - Type: `bool`
     - Value: `true`

**✅ You have:** Player's base tent!

---

### 🔥 **STEP 10: PLACE DECORATIONS** (15 min)

**Select layer:** `Decorations`

**Place these (with Insert Tile tool, press T):**

1. **Campfire** at (6,5) - pixel (384, 320)
   - Type: `decoration`

2. **Dead tree** at (0,0) - pixel (0, 0)
   - Type: `decoration`

3. **Rock** at (4,0) - pixel (256, 0)
   - Type: `decoration`

**✅ You have:** Atmospheric details!

---

### 👤 **STEP 11: ADD KAI SPAWN** (10 min)

1. **Select layer:** `Spawns`
2. **Tool:** Press `R` (Insert Rectangle)
3. **Draw:** 32×32 box at position **(2, 5)**
   - Pixel: (128, 320) width=32, height=32
4. **Object Properties:**
   - Name: `kai_spawn`
   - Type: `player`
   - Add custom property:
     - Name: `facing`
     - Type: `string`
     - Value: `south`

**✅ You have:** Player spawn point!

---

### 🧟 **STEP 12: ADD ZOMBIE SPAWN** (10 min)

1. **Select layer:** `Spawns`
2. **Tool:** Press `R` (Rectangle)
3. **Draw:** 32×32 box at **(4, 4)**
   - Pixel: (256, 256)
4. **Properties:**
   - Name: `zombie_1`
   - Type: `npc_zombie`
   - Custom:
     - Name: `ai`
     - Type: `string`
     - Value: `idle_dig_loop`

**✅ You have:** Zombie NPC spawn!

---

### 🚧 **STEP 13: ADD COLLISION** (15 min)

1. **Select layer:** `Collision`
2. **Tool:** Press `R` (Rectangle)
3. **Draw collision boxes around:**
   - **Tent:** 64×64 box at tent position (6,1)
   - **Tree:** 48×64 box at tree position (0,0)
   - **Rock:** 40×32 box at rock position (4,0)
4. **For each:** Set Type = `collision`

**✅ You have:** Collision system!

---

### 💾 **STEP 14: SAVE & EXPORT** (10 min)

1. **Save map:** `Ctrl+S` or `File → Save`
2. **Export JSON:**
   - `File → Export As...`
   - Format: `JSON map files (*.json)`
   - Save to: `/Users/davidkotnik/repos/novafarma/maps/demo_micro_farm.json`

3. **Verify:**
   ```bash
   ls -lh maps/demo_micro_farm.*
   # Should see both .tmx and .json
   ```

**✅ YOU'RE DONE!** 🎉

---

## 🎯 **FINAL CHECKLIST**

- [ ] Maps folder has `demo_micro_farm.tmx`
- [ ] Maps folder has `demo_micro_farm.json`
- [ ] Tilesets folder has 3 .tsx files
- [ ] Map has 7 layers
- [ ] Grass fills entire map
- [ ] 2×2 tilled soil at (1,1)
- [ ] Tent at (6,1)
- [ ] Decorations placed (campfire, tree, rock)
- [ ] Kai spawn at (2,5)
- [ ] Zombie spawn at (4,4)
- [ ] Collision boxes created

**IF ALL CHECKED:** Map ready for Phaser.js! 🚀

---

## 📸 **WHAT IT SHOULD LOOK LIKE:**

```
   0  1  2  3  4  5  6  7
0 [🌳][🌱][🌱][🌱][🪨][🌱][🌱][🌱]
1 [🌱][🟫][🟫][🌱][🌱][🌱][⛺][🌱]
2 [🌱][🟫][🟫][🌱][🌱][🌱][🌱][🌱]
3 [🌱][🌱][🌱][🌱][🌱][🌱][🌱][🌱]
4 [🌱][🌱][🌱][🌱][🧟][🌱][🌱][🌱]
5 [🌱][🌱][👤][🌱][🌱][🌱][🔥][🌱]
6 [🌱][🌱][🌱][🌱][🌱][🌱][🌱][🌱]
7 [🌱][🌱][🌱][🌱][🌱][🌱][🌱][🌱]
```

---

## ⏱️ **TIME BREAKDOWN**

| Task | Time |
|------|------|
| Open Tiled | 2 min |
| Create map | 5 min |
| Add tilesets (3) | 30 min |
| Create layers | 5 min |
| Paint terrain | 10 min |
| Paint tilled soil | 10 min |
| Place buildings | 10 min |
| Place decorations | 15 min |
| Add spawns | 20 min |
| Add collision | 15 min |
| Save & export | 10 min |
| **TOTAL** | **~2 hours** |

---

## 🆘 **TROUBLESHOOTING**

**Can't find images?**
- Make sure you browse to full path: `/Users/davidkotnik/repos/novafarma/assets/images/demo/...`

**Tiles not showing in tileset?**
- Check if PNGs have transparency (they should!)
- Try re-adding the tile

**Can't export JSON?**
- Make sure `maps/` folder exists
- Try `File → Export` instead of `Export As`

**Map looks wrong?**
- Check layer order (Base Terrain at bottom!)
- Make sure correct layer is selected when painting

---

## 🚀 **AFTER THIS SESSION:**

**Tomorrow you can:**
1. Open full implementation guide
2. Start Phaser.js integration (Task 2)
3. Load this map in game! (1 hour)

**In 3 days:**
- Full playable demo! 🎮

---

**HAVE FUN BUILDING! ☕🗺️✨**