PRIORITY TRACKER: 100% COMPLETE (41 assets x 2 styles = 82 PNGs) P1 CRITICAL (46 PNGs): Kai walk south, actions, idle breathing, wheat cycle, tilled soil, zombie, tools P2 HIGH (12 PNGs): Inventory items, UI elements P3 MEDIUM (10 PNGs): Dialogue system, water effects P4 LOW (6 PNGs): Environment decorations BACKGROUND REMOVAL: 99/99 PNGs with perfect RGBA transparency! BACKUP: Original white-bg versions saved to demo_originals_with_white_bg/ DOCUMENTATION: - KICKSTARTER_DEMO_IMPLEMENTATION_GUIDE.md (complete 10hr roadmap) - TONIGHT_TILED_QUICKSTART.md (2hr map building guide) - DEMO_MAP_PLAN.md (8x8 layout spec) - DEV_JOURNAL updated with evening session API: Turtle Mode, 100% success rate, 0 errors, 120 minutes generation ASSETS: 99 total transparent PNGs ready for Phaser.js integration STATUS: READY FOR IMPLEMENTATION PHASE! Session: 2.5 hours | Project total: 128 hours | Cost: 0 EUR
241 lines
6.6 KiB
Markdown
241 lines
6.6 KiB
Markdown
# 🗺️ KICKSTARTER DEMO MAP - "MICRO FARM 8x8"
|
||
|
||
**Map Name:** `demo_micro_farm.tmx`
|
||
**Size:** 8×8 tiles (64 tiles total)
|
||
**Tile Size:** 64×64 pixels
|
||
**Total Map Size:** 512×512 pixels
|
||
**Style:** Dual (can switch Style A ↔ Style B)
|
||
|
||
---
|
||
|
||
## 📐 LAYOUT DESIGN
|
||
|
||
```
|
||
0 1 2 3 4 5 6 7
|
||
┌──┬──┬──┬──┬──┬──┬──┬──┐
|
||
0 │🌳│🌱│🌱│🌱│🪨│🌱│🌱│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
1 │🌱│🟫│🟫│🟫│🌱│🌱│⛺│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
2 │🌱│🟫│🌾│🌾│🌱│🌱│🌱│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
3 │🌱│🟫│🌾│🌾│🌱│🌱│🌱│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
4 │🌱│🌱│🌱│🌱│🧟│🌱│🌱│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
5 │🌱│🌱│👤│🌱│🌱│🌱│🔥│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
6 │🌱│🌱│🌱│🌱│🌱│🌱│🌱│🌱│
|
||
├──┼──┼──┼──┼──┼──┼──┼──┤
|
||
7 │🌱│🌱│🌱│🌱│🌱│🌱│🌱│🌱│
|
||
└──┴──┴──┴──┴──┴──┴──┴──┘
|
||
```
|
||
|
||
**Legend:**
|
||
- 🌱 = Grass terrain tile
|
||
- 🟫 = Tilled soil (dry/watered)
|
||
- 🌾 = Wheat crops (various growth stages)
|
||
- 👤 = Kai spawn point (2,5)
|
||
- 🧟 = Zombie worker spawn (4,4)
|
||
- ⛺ = Tent (player base) (6,1)
|
||
- 🔥 = Campfire (6,5)
|
||
- 🌳 = Dead tree decoration (0,0)
|
||
- 🪨 = Rock decoration (0,4)
|
||
|
||
---
|
||
|
||
## 🎯 GAMEPLAY FLOW (Demo Script)
|
||
|
||
### **Act 1: TUTORIAL (30 seconds)**
|
||
1. **Kai spawns** at (2,5) - center left
|
||
2. **Text appears:** "Use WASD to move"
|
||
3. **Kai walks around** - shows 4-directional idle + walk animations
|
||
4. **Camera follows** Kai smoothly
|
||
|
||
### **Act 2: FARMING (60 seconds)**
|
||
5. **Text:** "Press E near tilled soil to plant wheat"
|
||
6. **Kai walks to** (1,2) - tilled soil patch
|
||
7. **Kai uses hoe** - hoe action animation plays
|
||
8. **Plant seeds** - wheat_stage0 appears
|
||
9. **Text:** "Press W to water crops"
|
||
10. **Kai waters** - watering animation + water effect
|
||
11. **Wheat grows!** - stage0 → stage1 → stage2 → stage3 → stage4 (timelapse 10 seconds)
|
||
12. **Text:** "Press H to harvest"
|
||
13. **Kai harvests** - wheat disappears, inventory +1 wheat bundle
|
||
14. **UI shows:** Inventory slot with wheat bundle icon
|
||
|
||
### **Act 3: WORLD ALIVE (30 seconds)**
|
||
15. **Camera pans to** zombie at (4,4)
|
||
16. **Zombie idle** animation loops
|
||
17. **Text:** "Workers till the fields while you're away..."
|
||
18. **Zombie starts digging** - dig animation
|
||
19. **Camera pans back** to Kai
|
||
20. **Style switch!** - A→B or B→A (show dual art system)
|
||
21. **Campfire flickers** in background
|
||
22. **Fade to black**
|
||
|
||
### **Act 4: TEASER (15 seconds)**
|
||
23. **Text overlay:** "This is just the beginning..."
|
||
24. **Text:** "Explore 18 biomes"
|
||
25. **Text:** "Meet 50+ NPCs"
|
||
26. **Text:** "Solve Ana's mystery"
|
||
27. **Logo:** DOLINASMRTI
|
||
28. **Text:** "Coming 2025 - Support us on Kickstarter!"
|
||
|
||
**Total Demo Length:** ~2.5 minutes
|
||
|
||
---
|
||
|
||
## 🎨 TILED PROJECT SETUP
|
||
|
||
### **Tilesets to Create:**
|
||
|
||
**1. Terrain Tileset** (`terrain_demo.tsx`)
|
||
- grass_tile_styleA.png
|
||
- grass_tile_styleB.png
|
||
- dirt_tile_styleA.png
|
||
- dirt_tile_styleB.png
|
||
- tilled_dry_styleA.png
|
||
- tilled_dry_styleB.png
|
||
- tilled_watered_styleA.png
|
||
- tilled_watered_styleB.png
|
||
|
||
**2. Crops Tileset** (`crops_demo.tsx`)
|
||
- wheat_stage0_styleA.png → wheat_stage4_styleA.png
|
||
- wheat_stage0_styleB.png → wheat_stage4_styleB.png
|
||
|
||
**3. Buildings Tileset** (`buildings_demo.tsx`)
|
||
- tent_styleA.png
|
||
- tent_styleB.png
|
||
|
||
**4. Environment Tileset** (`environment_demo.tsx`)
|
||
- dead_tree_styleA.png
|
||
- dead_tree_styleB.png
|
||
- rock_styleA.png
|
||
- rock_styleB.png
|
||
- campfire_styleA.png
|
||
- campfire_styleB.png
|
||
|
||
**5. Characters Tileset** (`characters_demo.tsx`)
|
||
- All Kai frames (idle north/south/east/west, walk south, actions)
|
||
- Zombie idle + dig frames
|
||
|
||
---
|
||
|
||
## 🔧 TILED LAYERS STRUCTURE
|
||
|
||
### **Layer Order (bottom to top):**
|
||
|
||
1. **Base Terrain** (Tile Layer)
|
||
- Grass tiles fill
|
||
- Dirt patches
|
||
|
||
2. **Tilled Soil** (Tile Layer)
|
||
- Farmable areas
|
||
- Can swap dry/watered
|
||
|
||
3. **Crops** (Tile Layer)
|
||
- Wheat growth stages
|
||
- Dynamic (changes during gameplay)
|
||
|
||
4. **Buildings** (Object Layer)
|
||
- Tent (collision object)
|
||
- Campfire (decoration)
|
||
|
||
5. **Decorations** (Object Layer)
|
||
- Tree, rocks
|
||
- No collision
|
||
|
||
6. **NPCs** (Object Layer)
|
||
- Zombie spawn point
|
||
- Custom properties: `type: "zombie_worker"`
|
||
|
||
7. **Player Spawn** (Object Layer)
|
||
- Kai start position (2,5)
|
||
- Custom properties: `type: "player_spawn"`
|
||
|
||
8. **Collision** (Object Layer)
|
||
- Invisible collision boxes
|
||
- Tent, tree, rocks
|
||
|
||
---
|
||
|
||
## 📝 CUSTOM PROPERTIES
|
||
|
||
### **Map Properties:**
|
||
- `style` (string): "A" or "B" - current art style
|
||
- `can_switch_style` (bool): true
|
||
- `demo_version` (string): "1.0"
|
||
|
||
### **Object Properties:**
|
||
|
||
**Kai Spawn:**
|
||
- `name`: "kai_spawn"
|
||
- `type`: "player"
|
||
- `facing`: "south"
|
||
|
||
**Zombie Spawn:**
|
||
- `name`: "zombie_1"
|
||
- `type`: "zombie_worker"
|
||
- `ai`: "idle_dig_loop"
|
||
|
||
**Tent:**
|
||
- `name`: "tent"
|
||
- `type`: "building"
|
||
- `collision`: true
|
||
- `interactable`: false
|
||
|
||
**Tilled Soil Tiles:**
|
||
- `farmable`: true
|
||
- `watered`: false (default)
|
||
|
||
---
|
||
|
||
## 🎮 PHASER.JS INTEGRATION NOTES
|
||
|
||
### **Loading Map:**
|
||
```javascript
|
||
this.load.tilemapTiledJSON('demo_map', 'maps/demo_micro_farm.json');
|
||
```
|
||
|
||
### **Creating Layers:**
|
||
```javascript
|
||
const map = this.make.tilemap({ key: 'demo_map' });
|
||
const terrainTileset = map.addTilesetImage('terrain_demo', 'terrain_tiles');
|
||
const baseTerrain = map.createLayer('Base Terrain', terrainTileset, 0, 0);
|
||
```
|
||
|
||
### **Spawning Player:**
|
||
```javascript
|
||
const spawnPoint = map.findObject('Player Spawn', obj => obj.name === 'kai_spawn');
|
||
player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, 'kai_idle_south_1_A');
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 ESTIMATED TIME TO BUILD
|
||
|
||
**Tiled Editor Work:**
|
||
- Create tilesets: 30 min
|
||
- Place tiles: 20 min
|
||
- Add objects: 15 min
|
||
- Set properties: 10 min
|
||
- Test export: 5 min
|
||
|
||
**Total:** ~80 minutes (1.5 hours)
|
||
|
||
---
|
||
|
||
## ✅ NEXT STEPS
|
||
|
||
1. ⏳ Wait for background removal to finish (~5 more min)
|
||
2. ✅ Open Tiled Editor (already installed?)
|
||
3. ✅ Create new map: 8×8, tile size 64×64
|
||
4. ✅ Add tilesets (link PNG files)
|
||
5. ✅ Paint terrain layer
|
||
6. ✅ Place objects
|
||
7. ✅ Export as JSON
|
||
8. ✅ Test in Phaser.js
|
||
|
||
**Map ready for integration in ~2 hours!** 🎯
|