495 lines
12 KiB
Markdown
495 lines
12 KiB
Markdown
# 🗺️ 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:**
|
||
```javascript
|
||
// 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):**
|
||
```javascript
|
||
// 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:**
|
||
```json
|
||
{
|
||
"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! 🗺️✨**
|