214 lines
4.5 KiB
Markdown
214 lines
4.5 KiB
Markdown
# 🗺️ TILED DEMO PROJECT - QUICK REFERENCE
|
||
|
||
**Location:** `maps/demo_project/`
|
||
**Main File:** `demo_micro_farm.tmx`
|
||
**Status:** ✅ Template Ready!
|
||
|
||
---
|
||
|
||
## ⚡ QUICK START (5 MINUTES!)
|
||
|
||
### **1. OPEN IN TILED:**
|
||
```bash
|
||
# Launch Tiled and open the map
|
||
tiled maps/demo_project/demo_micro_farm.tmx
|
||
```
|
||
|
||
**What you'll see:**
|
||
- ✅ 8×8 map filled with grass
|
||
- ✅ 2×2 tilled soil patch (rows 1-2, cols 1-2)
|
||
- ✅ Tent at top-right (6,1)
|
||
- ✅ Decorations placed (tree, rock, campfire)
|
||
- ✅ Spawn points configured
|
||
- ✅ Collision boxes ready
|
||
|
||
---
|
||
|
||
## 📚 LAYERS (7 Total)
|
||
|
||
| # | Layer Name | Type | Purpose |
|
||
|---|------------|------|---------|
|
||
| 7 | **Collision** | Object | Invisible collision boxes |
|
||
| 6 | **Spawns** | Object | Player & NPC spawn points |
|
||
| 5 | **Decorations** | Object | Campfire, tree, rock |
|
||
| 4 | **Buildings** | Object | Tent |
|
||
| 3 | **Crops** | Tile | Wheat growth (dynamic) |
|
||
| 2 | **Tilled Soil** | Tile | Farmable 2×2 area |
|
||
| 1 | **Base Terrain** | Tile | Grass background |
|
||
|
||
**Order:** 1 is at bottom, 7 at top!
|
||
|
||
---
|
||
|
||
## 🎨 TILESETS (3 Total)
|
||
|
||
### **1. terrain_demo.tsx**
|
||
- Grass, dirt, tilled soil (dry/wet)
|
||
- **4 tiles**, 64×64 each
|
||
|
||
### **2. crops_demo.tsx**
|
||
- Wheat stages 0-4
|
||
- **5 tiles**, 64×64 each
|
||
- Has growth properties!
|
||
|
||
### **3. objects_demo.tsx**
|
||
- Tent, campfire, tree, rock
|
||
- **4 objects**, variable sizes
|
||
- Has collision properties!
|
||
|
||
---
|
||
|
||
## 👤 PLAYER SPAWN
|
||
|
||
**Location:** Tile (2,5) = Pixel (128, 320)
|
||
**Layer:** Spawns
|
||
**Name:** `kai_spawn`
|
||
**Type:** `player`
|
||
|
||
**Properties:**
|
||
- `facing = "south"`
|
||
- `speed = 160`
|
||
- `health = 100`
|
||
|
||
---
|
||
|
||
## 🧟 NPC SPAWN
|
||
|
||
**Location:** Tile (4,4) = Pixel (256, 256)
|
||
**Layer:** Spawns
|
||
**Name:** `zombie_1`
|
||
**Type:** `npc_zombie`
|
||
|
||
**Properties:**
|
||
- `ai = "idle_dig_loop"`
|
||
- `speed = 0`
|
||
- `health = 50`
|
||
|
||
---
|
||
|
||
## 🏕️ OBJECTS QUICK REF
|
||
|
||
| Object | Layer | Tile | Pixel | Collision |
|
||
|--------|-------|------|-------|-----------|
|
||
| **Tent** | Buildings | (6,1) | (384,64) | ✅ Yes |
|
||
| **Campfire** | Decorations | (6,5) | (384,320) | ❌ No |
|
||
| **Tree** | Decorations | (0,0) | (0,0) | ✅ Yes |
|
||
| **Rock** | Decorations | (4,0) | (256,0) | ✅ Yes |
|
||
|
||
---
|
||
|
||
## 🌾 FARMABLE AREA
|
||
|
||
**Tiles:** 2×2 = 4 tiles
|
||
**Positions:**
|
||
- (1,1) = Pixel (64, 64)
|
||
- (2,1) = Pixel (128, 64)
|
||
- (1,2) = Pixel (64, 128)
|
||
- (2,2) = Pixel (128, 128)
|
||
|
||
**All have:** `farmable = true`
|
||
|
||
---
|
||
|
||
## 💾 EXPORT TO JSON
|
||
|
||
1. Open map in Tiled
|
||
2. `File → Export As...`
|
||
3. Format: `JSON map files (*.json)`
|
||
4. Save as: `demo_micro_farm.json` (same folder)
|
||
5. Done! Ready for Phaser.js
|
||
|
||
---
|
||
|
||
## 🛠️ CUSTOMIZE
|
||
|
||
### **Change Grass to Dirt:**
|
||
1. Select "Base Terrain" layer
|
||
2. Select dirt tile (id=2) from terrain tileset
|
||
3. Press `B` (Brush) and paint
|
||
|
||
### **Add More Crops:**
|
||
1. Select "Crops" layer
|
||
2. Select wheat stage (0-4) from crops tileset
|
||
3. Paint on tilled soil tiles
|
||
|
||
### **Move Objects:**
|
||
1. Select object's layer (Buildings/Decorations)
|
||
2. Click object to select
|
||
3. Drag to new position
|
||
|
||
### **Add New Spawn:**
|
||
1. Select "Spawns" layer
|
||
2. Press `R` (Insert Rectangle)
|
||
3. Draw 32×32 box
|
||
4. Right-click → Object Properties
|
||
5. Set name, type, custom properties
|
||
|
||
---
|
||
|
||
## 🎮 PHASER.JS LOADING
|
||
|
||
```javascript
|
||
// In preload():
|
||
this.load.tilemapTiledJSON(
|
||
'demo_map',
|
||
'maps/demo_project/demo_micro_farm.json'
|
||
);
|
||
|
||
// In create():
|
||
const map = this.make.tilemap({ key: 'demo_map' });
|
||
const terrain = map.addTilesetImage('terrain_demo');
|
||
const baseLayer = map.createLayer('Base Terrain', terrain);
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ VERIFY CHECKLIST
|
||
|
||
- [ ] Map opens in Tiled without errors
|
||
- [ ] All 3 tilesets load correctly
|
||
- [ ] All images display (no red X's)
|
||
- [ ] Spawn points have properties
|
||
- [ ] Collision layer has 3 boxes
|
||
- [ ] Can export to JSON successfully
|
||
- [ ] JSON file < 50KB
|
||
|
||
**If all checked:** Ready for Phaser! 🎮
|
||
|
||
---
|
||
|
||
## 🆘 TROUBLESHOOTING
|
||
|
||
**Tilesets not loading?**
|
||
- Check image paths in .tsx files
|
||
- Make sure paths are relative: `../../assets/`
|
||
|
||
**Can't see objects?**
|
||
- Check if correct layer is selected
|
||
- Objects only show on Object layers
|
||
|
||
**Export fails?**
|
||
- Make sure map is saved first (Ctrl+S)
|
||
- Check for missing tileset references
|
||
|
||
**Collision not working in game?**
|
||
- Verify collision layer exists
|
||
- Check object type = "collision"
|
||
|
||
---
|
||
|
||
## 📖 FULL DOCS
|
||
|
||
**Complete guide:** `/maps/demo_project/README.md`
|
||
**Implementation:** `/docs/KICKSTARTER_DEMO_IMPLEMENTATION_GUIDE.md`
|
||
|
||
---
|
||
|
||
**MAP READY TO USE! 🗺️✨**
|
||
|
||
**Time to edit:** 0 min (already complete!)
|
||
**Time to export:** 30 seconds
|
||
**Time to integrate:** ~1 hour in Phaser
|
||
|
||
**ENJOY BUILDING! 🎮**
|