323 lines
7.4 KiB
Markdown
323 lines
7.4 KiB
Markdown
# ☕ 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! ☕🗺️✨**
|