novafarma/.agent/workflows/tiled-map-setup.md

description

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

# 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:

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