davidkotnik/novafarma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
novafarma/docs/TONIGHT_TILED_QUICKSTART.md
David Kotnik cbb2b64f92 ok
2026-01-20 01:05:17 +01:00

7.4 KiB
Raw Permalink Blame History

☕ 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)

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

    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! ☕🗺️✨

Reference in New Issue View Git Blame Copy Permalink