NovaFarma Dev
a4d2d137ec
Tiled Setup: - Installed Tiled v1.11.2 (winget) - Created workflow documentation (.agent/workflows/tiled-map-setup.md) - Generated demo Tiled map files (farm_map.tmx, .json, .tsx) - Created TILED_INTEGRATION_STATUS.md documentation Bug Fixes: - SaveSystem.js: Fixed compatibility with Flat2DTerrainSystem - InteractionSystem.js: Added null checks for terrainSystem - PreloadScene.js: Tiled asset loading (currently not used) Documentation: - Created DNEVNIK.md (development diary) - Updated QUICK_TASK_REFERENCE.md with recent work Note: Tiled integration incomplete (tileset size issues) - Reverted to procedural Flat2DTerrainSystem (working) - Future work: Create proper 192x192 tileset PNGs Session: 2h (20:00-22:00) Date: 14.12.2024
135 lines
3.2 KiB
Markdown
135 lines
3.2 KiB
Markdown
---
|
|
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
|