shrani
This commit is contained in:
213
maps/demo_project/QUICK_REFERENCE.md
Normal file
213
maps/demo_project/QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,213 @@
|
||||
# 🗺️ 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:**
|
||||
```bash
|
||||
# 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 = 160`
|
||||
- `health = 100`
|
||||
|
||||
---
|
||||
|
||||
## 🧟 NPC SPAWN
|
||||
|
||||
**Location:** Tile (4,4) = Pixel (256, 256)
|
||||
**Layer:** Spawns
|
||||
**Name:** `zombie_1`
|
||||
**Type:** `npc_zombie`
|
||||
|
||||
**Properties:**
|
||||
- `ai = "idle_dig_loop"`
|
||||
- `speed = 0`
|
||||
- `health = 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
|
||||
|
||||
1. Open map in Tiled
|
||||
2. `File → Export As...`
|
||||
3. Format: `JSON map files (*.json)`
|
||||
4. Save as: `demo_micro_farm.json` (same folder)
|
||||
5. Done! Ready for Phaser.js
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ CUSTOMIZE
|
||||
|
||||
### **Change Grass to Dirt:**
|
||||
1. Select "Base Terrain" layer
|
||||
2. Select dirt tile (id=2) from terrain tileset
|
||||
3. Press `B` (Brush) and paint
|
||||
|
||||
### **Add More Crops:**
|
||||
1. Select "Crops" layer
|
||||
2. Select wheat stage (0-4) from crops tileset
|
||||
3. Paint on tilled soil tiles
|
||||
|
||||
### **Move Objects:**
|
||||
1. Select object's layer (Buildings/Decorations)
|
||||
2. Click object to select
|
||||
3. Drag to new position
|
||||
|
||||
### **Add New Spawn:**
|
||||
1. Select "Spawns" layer
|
||||
2. Press `R` (Insert Rectangle)
|
||||
3. Draw 32×32 box
|
||||
4. Right-click → Object Properties
|
||||
5. Set name, type, custom properties
|
||||
|
||||
---
|
||||
|
||||
## 🎮 PHASER.JS LOADING
|
||||
|
||||
```javascript
|
||||
// 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! 🎮**
|
||||
494
maps/demo_project/README.md
Normal file
494
maps/demo_project/README.md
Normal file
@@ -0,0 +1,494 @@
|
||||
# 🗺️ 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! 🗺️✨**
|
||||
4
maps/demo_project/campfire.tsx
Normal file
4
maps/demo_project/campfire.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<tileset version="1.11" tiledversion="1.11.2" name="campfire" tilewidth="64" tileheight="64" tilecount="256" columns="16">
|
||||
<image source="../../assets/images/environment/campfire.png" width="1024" height="1024"/>
|
||||
</tileset>
|
||||
123
maps/demo_project/demo_micro_farm.tmx
Normal file
123
maps/demo_project/demo_micro_farm.tmx
Normal file
@@ -0,0 +1,123 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<map version="1.10" tiledversion="1.10.2" orientation="orthogonal" renderorder="right-down" width="8" height="8" tilewidth="64" tileheight="64" infinite="0" nextlayerid="8" nextobjectid="10">
|
||||
<properties>
|
||||
<property name="demo_version" value="1.0"/>
|
||||
<property name="style" value="A"/>
|
||||
<property name="can_switch_style" type="bool" value="true"/>
|
||||
</properties>
|
||||
|
||||
<tileset firstgid="1" source="tilesets/terrain_demo.tsx"/>
|
||||
<tileset firstgid="5" source="tilesets/crops_demo.tsx"/>
|
||||
<tileset firstgid="10" source="tilesets/objects_demo.tsx"/>
|
||||
|
||||
<!-- Base Terrain Layer - Fill with grass (tile id 1) -->
|
||||
<layer id="1" name="Base Terrain" width="8" height="8">
|
||||
<data encoding="csv">
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1,
|
||||
1,1,1,1,1,1,1,1
|
||||
</data>
|
||||
</layer>
|
||||
|
||||
<!-- Tilled Soil Layer - 2x2 patch at (1,1) -->
|
||||
<layer id="2" name="Tilled Soil" width="8" height="8">
|
||||
<data encoding="csv">
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,3,3,0,0,0,0,0,
|
||||
0,3,3,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0
|
||||
</data>
|
||||
</layer>
|
||||
|
||||
<!-- Crops Layer - Empty initially, populated during gameplay -->
|
||||
<layer id="3" name="Crops" width="8" height="8">
|
||||
<data encoding="csv">
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0,
|
||||
0,0,0,0,0,0,0,0
|
||||
</data>
|
||||
</layer>
|
||||
|
||||
<!-- Buildings Layer - Object layer for tent -->
|
||||
<objectgroup id="4" name="Buildings">
|
||||
<object id="1" name="tent" type="building" gid="10" x="384" y="128" width="64" height="64">
|
||||
<properties>
|
||||
<property name="collision" type="bool" value="true"/>
|
||||
<property name="interactable" type="bool" value="false"/>
|
||||
<property name="description" value="Your base camp. A place to rest."/>
|
||||
</properties>
|
||||
</object>
|
||||
</objectgroup>
|
||||
|
||||
<!-- Decorations Layer - Campfire, tree, rock -->
|
||||
<objectgroup id="5" name="Decorations">
|
||||
<object id="2" name="campfire" type="decoration" gid="11" x="384" y="384" width="64" height="64">
|
||||
<properties>
|
||||
<property name="animated" type="bool" value="true"/>
|
||||
<property name="light_radius" type="int" value="128"/>
|
||||
</properties>
|
||||
</object>
|
||||
<object id="3" name="dead_tree" type="decoration" gid="12" x="0" y="96" width="64" height="96">
|
||||
<properties>
|
||||
<property name="collision" type="bool" value="true"/>
|
||||
<property name="height" type="int" value="96"/>
|
||||
</properties>
|
||||
</object>
|
||||
<object id="4" name="rock" type="decoration" gid="13" x="256" y="32" width="48" height="32">
|
||||
<properties>
|
||||
<property name="collision" type="bool" value="true"/>
|
||||
</properties>
|
||||
</object>
|
||||
</objectgroup>
|
||||
|
||||
<!-- Spawns Layer - Player and NPC spawn points -->
|
||||
<objectgroup id="6" name="Spawns">
|
||||
<object id="5" name="kai_spawn" type="player" x="128" y="320" width="32" height="32">
|
||||
<properties>
|
||||
<property name="facing" value="south"/>
|
||||
<property name="speed" type="int" value="160"/>
|
||||
<property name="health" type="int" value="100"/>
|
||||
</properties>
|
||||
</object>
|
||||
<object id="6" name="zombie_1" type="npc_zombie" x="256" y="256" width="32" height="32">
|
||||
<properties>
|
||||
<property name="ai" value="idle_dig_loop"/>
|
||||
<property name="speed" type="int" value="0"/>
|
||||
<property name="health" type="int" value="50"/>
|
||||
</properties>
|
||||
</object>
|
||||
</objectgroup>
|
||||
|
||||
<!-- Collision Layer - Invisible collision boxes -->
|
||||
<objectgroup id="7" name="Collision">
|
||||
<object id="7" type="collision" x="384" y="64" width="64" height="64">
|
||||
<properties>
|
||||
<property name="source" value="tent"/>
|
||||
</properties>
|
||||
</object>
|
||||
<object id="8" type="collision" x="8" y="0" width="48" height="64">
|
||||
<properties>
|
||||
<property name="source" value="tree"/>
|
||||
</properties>
|
||||
</object>
|
||||
<object id="9" type="collision" x="260" y="2" width="40" height="28">
|
||||
<properties>
|
||||
<property name="source" value="rock"/>
|
||||
</properties>
|
||||
</object>
|
||||
</objectgroup>
|
||||
</map>
|
||||
4
maps/demo_project/kai_survivor.tsx
Normal file
4
maps/demo_project/kai_survivor.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<tileset version="1.11" tiledversion="1.11.2" name="kai_survivor" tilewidth="64" tileheight="64" tilecount="256" columns="16">
|
||||
<image source="../../assets/images/npcs/kai_survivor.png" width="1024" height="1024"/>
|
||||
</tileset>
|
||||
4
maps/demo_project/sign_warning.tsx
Normal file
4
maps/demo_project/sign_warning.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<tileset version="1.11" tiledversion="1.11.2" name="sign_warning" tilewidth="64" tileheight="64" tilecount="256" columns="16">
|
||||
<image source="../../assets/images/environment/sign_warning.png" width="1024" height="1024"/>
|
||||
</tileset>
|
||||
41
maps/demo_project/tilesets/crops_demo.tsx
Normal file
41
maps/demo_project/tilesets/crops_demo.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
<? xml version = "1.0" encoding = "UTF-8" ?>
|
||||
<tileset version="1.10" tiledversion="1.10.2" name="crops_demo" tilewidth="64" tileheight="64" tilecount="5" columns="0">
|
||||
<grid orientation="orthogonal" width="1" height="1" />
|
||||
<tile id="0">
|
||||
<image width="64" height="64" source="../../assets/images/demo/crops/wheat_stage0_styleA.png" />
|
||||
<properties>
|
||||
<property name="crop_type" value="wheat" />
|
||||
<property name="growth_stage" type="int" value="0" />
|
||||
<property name="growth_time" type="int" value="2000" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="1">
|
||||
<image width="64" height="64" source="../../assets/images/demo/crops/wheat_stage1_styleA.png" />
|
||||
<properties>
|
||||
<property name="crop_type" value="wheat" />
|
||||
<property name="growth_stage" type="int" value="1" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="2">
|
||||
<image width="64" height="64" source="../../assets/images/demo/crops/wheat_stage2_styleA.png" />
|
||||
<properties>
|
||||
<property name="crop_type" value="wheat" />
|
||||
<property name="growth_stage" type="int" value="2" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="3">
|
||||
<image width="64" height="64" source="../../assets/images/demo/crops/wheat_stage3_styleA.png" />
|
||||
<properties>
|
||||
<property name="crop_type" value="wheat" />
|
||||
<property name="growth_stage" type="int" value="3" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="4">
|
||||
<image width="64" height="64" source="../../assets/images/demo/crops/wheat_stage4_styleA.png" />
|
||||
<properties>
|
||||
<property name="crop_type" value="wheat" />
|
||||
<property name="growth_stage" type="int" value="4" />
|
||||
<property name="harvestable" type="bool" value="true" />
|
||||
</properties>
|
||||
</tile>
|
||||
</tileset>
|
||||
35
maps/demo_project/tilesets/objects_demo.tsx
Normal file
35
maps/demo_project/tilesets/objects_demo.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
<? xml version = "1.0" encoding = "UTF-8" ?>
|
||||
<tileset version="1.10" tiledversion="1.10.2" name="objects_demo" tilewidth="64" tileheight="96" tilecount="4" columns="0">
|
||||
<grid orientation="orthogonal" width="1" height="1" />
|
||||
<tile id="0">
|
||||
<image width="64" height="64" source="../../assets/images/demo/buildings/tent_styleA.png" />
|
||||
<properties>
|
||||
<property name="building_type" value="tent" />
|
||||
<property name="collision" type="bool" value="true" />
|
||||
<property name="interactable" type="bool" value="false" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="1">
|
||||
<image width="64" height="64" source="../../assets/images/demo/environment/campfire_styleA.png" />
|
||||
<properties>
|
||||
<property name="decoration_type" value="campfire" />
|
||||
<property name="animated" type="bool" value="true" />
|
||||
<property name="light_radius" type="int" value="128" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="2">
|
||||
<image width="64" height="96" source="../../assets/images/demo/environment/dead_tree_styleA.png" />
|
||||
<properties>
|
||||
<property name="decoration_type" value="tree" />
|
||||
<property name="collision" type="bool" value="true" />
|
||||
<property name="height" type="int" value="96" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="3">
|
||||
<image width="48" height="32" source="../../assets/images/demo/environment/rock_styleA.png" />
|
||||
<properties>
|
||||
<property name="decoration_type" value="rock" />
|
||||
<property name="collision" type="bool" value="true" />
|
||||
</properties>
|
||||
</tile>
|
||||
</tileset>
|
||||
24
maps/demo_project/tilesets/terrain_demo.tsx
Normal file
24
maps/demo_project/tilesets/terrain_demo.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
<? xml version = "1.0" encoding = "UTF-8" ?>
|
||||
<tileset version="1.10" tiledversion="1.10.2" name="terrain_demo" tilewidth="64" tileheight="64" tilecount="4" columns="0">
|
||||
<grid orientation="orthogonal" width="1" height="1" />
|
||||
<tile id="0">
|
||||
<image width="64" height="64" source="../../assets/images/demo/terrain/grass_tile_styleA.png" />
|
||||
</tile>
|
||||
<tile id="1">
|
||||
<image width="64" height="64" source="../../assets/images/demo/terrain/dirt_tile_styleA.png" />
|
||||
</tile>
|
||||
<tile id="2">
|
||||
<image width="64" height="64" source="../../assets/images/demo/terrain/tilled_dry_styleA.png" />
|
||||
<properties>
|
||||
<property name="farmable" type="bool" value="true" />
|
||||
<property name="watered" type="bool" value="false" />
|
||||
</properties>
|
||||
</tile>
|
||||
<tile id="3">
|
||||
<image width="64" height="64" source="../../assets/images/demo/terrain/tilled_watered_styleA.png" />
|
||||
<properties>
|
||||
<property name="farmable" type="bool" value="true" />
|
||||
<property name="watered" type="bool" value="true" />
|
||||
</properties>
|
||||
</tile>
|
||||
</tileset>
|
||||
Reference in New Issue
Block a user