novafarma/maps/demo_project

🗺️ DOLINASMRTI DEMO PROJECT - TILED

Project Name: Demo Project
Map Name: Micro Farm 8×8
Tile Size: 64×64 pixels
Map Size: 512×512 pixels (8×8 tiles)
Format: Orthogonal
Created: Dec 30, 2025

---

📁 PROJECT STRUCTURE

maps/demo_project/
├── README.md                    ← This file
├── demo_micro_farm.tmx         ← Main map file (Tiled native)
├── demo_micro_farm.json        ← Exported JSON (for Phaser.js)
├── tilesets/                   ← All tileset definitions
│   ├── terrain_demo.tsx        ← Grass, dirt, tilled soil
│   ├── crops_demo.tsx          ← Wheat growth stages
│   └── objects_demo.tsx        ← Buildings, decorations
├── templates/                  ← Object templates
│   ├── player_spawn.tx         ← Kai spawn template
│   ├── npc_spawn.tx            ← NPC spawn template
│   └── collision_box.tx        ← Collision template
└── objects/                    ← Custom object types
    └── object_types.json       ← Object type definitions

---

🎨 TILESETS

1. TERRAIN (terrain_demo.tsx)

Type: Collection of Images
Tile Size: 64×64
Count: 4 tiles

Tiles:

1. grass_tile_styleA.png - Base terrain
2. dirt_tile_styleA.png - Path variation
3. tilled_dry_styleA.png - Farmable dry soil
4. tilled_watered_styleA.png - Farmable wet soil

Usage: Base terrain layer, tilled soil layer

---

2. CROPS (crops_demo.tsx)

Type: Collection of Images
Tile Size: 64×64
Count: 5 tiles

Tiles:

1. wheat_stage0_styleA.png - Just planted (brown mound)
2. wheat_stage1_styleA.png - Seedling (tiny sprout)
3. wheat_stage2_styleA.png - Young plant (4-5 leaves)
4. wheat_stage3_styleA.png - Mature plant (full stalks)
5. wheat_stage4_styleA.png - Ready to harvest (golden)

Usage: Crops layer (changes during gameplay)

---

3. OBJECTS (objects_demo.tsx)

Type: Collection of Images
Variable Sizes

Buildings:

1. tent_styleA.png (64×64) - Player base

Decorations: 2. campfire_styleA.png (64×64) - Fire animation point 3. dead_tree_styleA.png (64×96) - Tall tree 4. rock_styleA.png (48×32) - Small rock

Usage: Buildings layer, Decorations layer

---

📚 LAYERS (Bottom to Top)

1. Base Terrain (Tile Layer)

• Purpose: Ground tiles (grass, dirt)
• Tileset: terrain_demo
• Fill: Entire 8×8 with grass
• Properties: None
• Opacity: 100%

2. Tilled Soil (Tile Layer)

• Purpose: Farmable areas
• Tileset: terrain_demo
• Location: 2×2 patch at (1,1)
• Properties:
  • farmable = true
  • watered = false (default)

3. Crops (Tile Layer)

• Purpose: Growing plants
• Tileset: crops_demo
• Dynamic: Yes (changes via code)
• Initial: Empty (or stage 0 for demo)

4. Buildings (Object Layer)

• Purpose: Structures with collision
• Objects:
  • Tent at (6,1) - Type: building
• Properties:
  • collision = true
  • interactable = false/true

5. Decorations (Object Layer)

• Purpose: Visual elements
• Objects:
  • Campfire at (6,5) - Type: decoration
  • Dead tree at (0,0) - Type: decoration
  • Rock at (4,0) - Type: decoration
• Properties:
  • collision = false (most)

6. Spawns (Object Layer)

• Purpose: Entity spawn points
• Objects:
  • Kai spawn at (2,5) - Type: player
  • Zombie spawn at (4,4) - Type: npc_zombie
• Properties (Kai):
  • name = "kai_spawn"
  • type = "player"
  • facing = "south"
• Properties (Zombie):
  • name = "zombie_1"
  • type = "npc_zombie"
  • ai = "idle_dig_loop"

7. Collision (Object Layer)

• Purpose: Invisible collision boundaries
• Objects:
  • Rectangle around tent
  • Rectangle around tree
  • Rectangle around rock
• Properties:
  • type = "collision"
• Visible: No (for debugging only)

---

👤 PLAYER (Kai)

Spawn Point

• Layer: Spawns (Object Layer)
• Type: Rectangle (32×32)
• Position: Tile (2,5) = Pixel (128, 320)
• Name: kai_spawn

Custom Properties:

type (string):      "player"
facing (string):    "south"
speed (int):        160
health (int):       100

Gameplay:

• Spawns facing south (toward camera)
• Can move in 4 directions (WASD)
• Interacts with farmable tiles (E key)
• Waters crops (SPACE key)
• Harvests mature crops (H key)

---

🧟 NPC - ZOMBIE WORKER

Spawn Point

• Layer: Spawns
• Type: Rectangle (32×32)
• Position: Tile (4,4) = Pixel (256, 256)
• Name: zombie_1

Custom Properties:

type (string):      "npc_zombie"
ai (string):        "idle_dig_loop"
speed (int):        0    (stationary)
health (int):       50

AI Behavior:

• Idle for 5 seconds
• Play dig animation (1 second)
• Return to idle
• Loop forever

---

🏕️ BUILDINGS

TENT (Player Base)

• Layer: Buildings
• Position: Tile (6,1) = Pixel (384, 64)
• Size: 64×64
• Type: building

Properties:

name (string):      "tent"
type (string):      "building"
collision (bool):   true
interactable (bool): false
description (string): "Your base camp. A place to rest."

Collision: Yes (player cannot walk through)

---

🎨 DECORATIONS

1. CAMPFIRE

• Position: Tile (6,5) = Pixel (384, 320)
• Size: 64×64
• Type: decoration

Properties:

name (string):      "campfire"
animated (bool):    true  (future: flickering)
light_radius (int): 128   (future: lighting)

2. DEAD TREE

• Position: Tile (0,0) = Pixel (0, 0)
• Size: 64×96 (tall)
• Type: decoration

Properties:

name (string):      "dead_tree"
collision (bool):   true
height (int):       96

3. ROCK

• Position: Tile (4,0) = Pixel (256, 0)
• Size: 48×32
• Type: decoration

Properties:

name (string):      "rock"
collision (bool):   true

---

🚧 COLLISION SYSTEM

Collision Boxes

All on Collision layer (Object Layer)

1. Tent Collision

• Rectangle at (384, 64)
• Size: 64×64
• Type: collision

2. Tree Collision

• Rectangle at (0, 0)
• Size: 48×64 (narrower than sprite)
• Type: collision

3. Rock Collision

• Rectangle at (256, 0)
• Size: 40×28 (slightly smaller)
• Type: collision

In Phaser.js:

// Add all collision objects to static group
const collisionLayer = map.getObjectLayer('Collision');
this.collisionGroup = this.physics.add.staticGroup();

collisionLayer.objects.forEach(obj => {
  const rect = this.add.rectangle(
    obj.x + obj.width/2,
    obj.y + obj.height/2,
    obj.width, obj.height,
    0xff0000, 0  // Invisible
  );
  this.physics.add.existing(rect, true);
  this.collisionGroup.add(rect);
});

// Collide player with group
this.physics.add.collider(this.player, this.collisionGroup);

---

🌾 FARMABLE TILES

Tilled Soil Patch

• Layer: Tilled Soil
• Tiles: 2×2 = 4 tiles
• Position: Rows 1-2, Columns 1-2
• Pixels: (64,64) to (192,192)

Tile Properties:

Each tilled soil tile has:

farmable (bool):    true
watered (bool):     false  (default)
planted (bool):     false  (default)
crop_type (string): ""     (empty until planted)
growth_stage (int): -1     (not planted)

Farming Code (Phaser.js):

// Track farmable tiles
this.farmTiles = [
  { x: 1, y: 1, worldX: 96, worldY: 96, planted: false },
  { x: 2, y: 1, worldX: 160, worldY: 96, planted: false },
  { x: 1, y: 2, worldX: 96, worldY: 160, planted: false },
  { x: 2, y: 2, worldX: 160, worldY: 160, planted: false }
];

---

🎮 GAMEPLAY FLOW

Demo Script Sequence:

0:00 - Tutorial Start

• Text: "Use WASD to move!"
• Kai can walk around

0:05 - Show Zombie

• Camera pans to zombie at (4,4)
• Text: "Workers till the fields..."
• Zombie plays dig animation

0:10 - Back to Player

• Camera pans back to Kai
• Text: "Press E near soil to plant seeds!"

0:15 - Farming Tutorial

• Player plants wheat (manual or auto)
• Text: "Press SPACE to water!"
• Player waters crop

0:20 - Growth Timelapse

• Wheat grows: stage 0 → 1 → 2 → 3 → 4
• 2 seconds per stage (10 seconds total)
• Text: "Watch it grow!"

0:30 - Harvest

• Text: "Press H to harvest!"
• Wheat disappears
• Inventory UI shows +1 wheat bundle

0:35 - Style Switch

• Everything switches Style A → Style B
• Text: "Two art styles in one game!"

0:40 - Ending

• Fade to black
• Text: "This is just 1% of DolinaSmrti..."
• Text: "Support us on Kickstarter!"

Total Length: 45 seconds (repeatable)

---

📐 MAP LAYOUT REFERENCE

   0  1  2  3  4  5  6  7
  ┌──┬──┬──┬──┬──┬──┬──┬──┐
0 │🌳│🌱│🌱│🌱│🪨│🌱│🌱│🌱│ Tree at (0,0), Rock at (4,0)
  ├──┼──┼──┼──┼──┼──┼──┼──┤
1 │🌱│🟫│🟫│🌱│🌱│🌱│⛺│🌱│ Tilled soil, Tent at (6,1)
  ├──┼──┼──┼──┼──┼──┼──┼──┤
2 │🌱│🟫│🟫│🌱│🌱│🌱│🌱│🌱│ Tilled soil
  ├──┼──┼──┼──┼──┼──┼──┼──┤
3 │🌱│🌱│🌱│🌱│🌱│🌱│🌱│🌱│ Open grass
  ├──┼──┼──┼──┼──┼──┼──┼──┤
4 │🌱│🌱│🌱│🌱│🧟│🌱│🌱│🌱│ Zombie at (4,4)
  ├──┼──┼──┼──┼──┼──┼──┼──┤
5 │🌱│🌱│👤│🌱│🌱│🌱│🔥│🌱│ Kai at (2,5), Campfire (6,5)
  ├──┼──┼──┼──┼──┼──┼──┼──┤
6 │🌱│🌱│🌱│🌱│🌱│🌱│🌱│🌱│ Open grass
  ├──┼──┼──┼──┼──┼──┼──┼──┤
7 │🌱│🌱│🌱│🌱│🌱│🌱│🌱│🌱│ Open grass
  └──┴──┴──┴──┴──┴──┴──┴──┘

Legend:

• 🌱 = Grass tile
• 🟫 = Tilled soil (farmable)
• 👤 = Kai spawn point
• 🧟 = Zombie spawn
• ⛺ = Tent (building)
• 🔥 = Campfire (decoration)
• 🌳 = Dead tree (decoration)
• 🪨 = Rock (decoration)

---

🔧 EXPORT SETTINGS

For Phaser.js:

1. File → Export As...
2. Format: JSON map files (*.json)
3. Settings:
   • Embed tilesets: No (external)
   • Resolve object types: Yes
   • Detach templates: No
4. Save to: maps/demo_project/demo_micro_farm.json

JSON Structure:

{
  "compressionlevel": -1,
  "height": 8,
  "width": 8,
  "tileheight": 64,
  "tilewidth": 64,
  "layers": [...],
  "tilesets": [...],
  "type": "map",
  "version": "1.10"
}

---

📋 QUICK BUILD CHECKLIST

• Create new map (8×8, 64×64 tiles)
• Add terrain tileset (4 tiles)
• Add crops tileset (5 tiles)
• Add objects tileset (4 objects)
• Create 7 layers (correct order!)
• Fill Base Terrain with grass
• Paint 2×2 tilled soil
• Place tent building
• Place 3 decorations
• Add Kai spawn point
• Add zombie spawn point
• Create collision boxes
• Set all custom properties
• Save as .tmx
• Export as .json
• Test in Phaser.js

Time: ~2 hours ☕

---

🎯 SUCCESS CRITERIA

Map is ready when:

1. ✅ All tilesets load without errors
2. ✅ Layers in correct order (terrain at bottom)
3. ✅ All spawns have custom properties
4. ✅ Collision objects properly placed
5. ✅ JSON exports successfully
6. ✅ File size < 50KB (lightweight)
7. ✅ No missing tile references

---

🚀 NEXT STEPS AFTER MAP

1. Open Phaser.js project
2. Load demo_micro_farm.json
3. Create tilesets in Phaser
4. Spawn player at kai_spawn
5. Add NPC at zombie spawn
6. Test collision
7. Implement farming mechanics
8. Add UI overlay

See: docs/KICKSTARTER_DEMO_IMPLEMENTATION_GUIDE.md

---

HAPPY MAPPING! 🗺️✨