4.5 KiB
4.5 KiB
🗺️ 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:
# 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 = 160health = 100
🧟 NPC SPAWN
Location: Tile (4,4) = Pixel (256, 256)
Layer: Spawns
Name: zombie_1
Type: npc_zombie
Properties:
ai = "idle_dig_loop"speed = 0health = 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
- Open map in Tiled
File → Export As...- Format:
JSON map files (*.json) - Save as:
demo_micro_farm.json(same folder) - Done! Ready for Phaser.js
🛠️ CUSTOMIZE
Change Grass to Dirt:
- Select "Base Terrain" layer
- Select dirt tile (id=2) from terrain tileset
- Press
B(Brush) and paint
Add More Crops:
- Select "Crops" layer
- Select wheat stage (0-4) from crops tileset
- Paint on tilled soil tiles
Move Objects:
- Select object's layer (Buildings/Decorations)
- Click object to select
- Drag to new position
Add New Spawn:
- Select "Spawns" layer
- Press
R(Insert Rectangle) - Draw 32×32 box
- Right-click → Object Properties
- Set name, type, custom properties
🎮 PHASER.JS LOADING
// 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! 🎮