🎬 A+B COMPLETE: Extended Prologue + Tiled Guide!
═══════════════════════════════════════════════════════════════ A) EXTENDED PROLOGUE (12 scenes instead of 6) ═══════════════════════════════════════════════════════════════ ✅ More detailed story ✅ Ana dialogue added ✅ Lab breach scene with alarms ✅ Explosion and discovery of Ana's lab coat ✅ More emotional depth ✅ Flash + shake effects on key moments NEW DIALOGUE: 1. World intro (longer) 2. Virus apocalypse (with flash) 3. Kai introduction (scientist) 4. Ana excited about Alpha strain 5. Kai being cautious 6. ALARM - BREACH IN SECTOR 7! (shake + flash) 7. Kai warning Ana to run (shake) 8. Ana protecting samples 9. Explosion aftermath (flash) 10. Finding Ana's coat and blood 11. No body = hope she's alive 12. Journey begins ═══════════════════════════════════════════════════════════════ B) TILED WORKFLOW GUIDE ═══════════════════════════════════════════════════════════════ ✅ Created: TILED_WORKFLOW_GUIDE.md ✅ Complete tutorial for Tiled integration ✅ QuickStart with brew install ✅ Map creation steps ✅ Tileset setup (32x32) ✅ Object layers (spawns, items) ✅ Game integration (2 methods) ✅ Asset recommendations from slike 🟢 ✅ Tips & best practices ✅ Testing workflow READY FOR TILED! 🗺️
This commit is contained in:
204
TILED_WORKFLOW_GUIDE.md
Normal file
204
TILED_WORKFLOW_GUIDE.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# 🗺️ TILED WORKFLOW GUIDE
|
||||
**Kako začeti z Tiled mapami v Mrtva Dolina**
|
||||
|
||||
---
|
||||
|
||||
## 📁 STRUKTURA
|
||||
|
||||
```
|
||||
/tiled/
|
||||
├── maps/ → .tmx files (your maps)
|
||||
├── tilesets/ → .tsx files (tileset definitions)
|
||||
└── README.md → Ta guide
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 QUICK START
|
||||
|
||||
### 1. **Install Tiled Editor**
|
||||
```bash
|
||||
brew install tiled
|
||||
# OR download from: https://www.mapeditor.org/
|
||||
```
|
||||
|
||||
### 2. **Create New Map**
|
||||
1. Open Tiled
|
||||
2. File → New → New Map
|
||||
3. Settings:
|
||||
- Orientation: **Orthogonal** (top-down)
|
||||
- Tile Size: **32x32** pixels
|
||||
- Map Size: **20x20** tiles (640x640px) - starter size
|
||||
- Save to: `tiled/maps/starter_map.tmx`
|
||||
|
||||
### 3. **Add Tileset**
|
||||
1. Map → New Tileset
|
||||
2. Settings:
|
||||
- Name: `grass_tiles`
|
||||
- Image: Select your grass tile PNG
|
||||
- Tile Size: **32x32**
|
||||
- Save to: `tiled/tilesets/grass_tiles.tsx`
|
||||
|
||||
### 4. **Paint Tiles**
|
||||
1. Select tileset in Tilesets panel
|
||||
2. Select Stamp tool (B)
|
||||
3. Click on tile
|
||||
4. Paint on map!
|
||||
|
||||
### 5. **Add Objects**
|
||||
1. Create Object Layer (Layer → New → Object Layer)
|
||||
2. Name it: `spawns` or `items`
|
||||
3. Insert objects:
|
||||
- **Point** = Player spawn, NPC spawn
|
||||
- **Rectangle** = Interactive zone
|
||||
- **Polygon** = Custom collision
|
||||
|
||||
### 6. **Export & Load in Game**
|
||||
1. Save map (Ctrl+S)
|
||||
2. Map is auto-saved as `.tmx` (XML format)
|
||||
3. Load in game:
|
||||
```javascript
|
||||
// In GameScene.js preload()
|
||||
this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
|
||||
|
||||
// In GameScene.js create()
|
||||
const map = this.make.tilemap({ key: 'myMap' });
|
||||
const tileset = map.addTilesetImage('grass_tiles', 'grass_tileset_key');
|
||||
const layer = map.createLayer('Ground', tileset, 0, 0);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 RECOMMENDED ASSETS
|
||||
|
||||
**Use assets from `assets/slike 🟢/`:**
|
||||
|
||||
### **Ground Tiles:**
|
||||
- `demo 🔴/tiles/grass_tile.png` (64x64 Style 30)
|
||||
- `demo 🔴/tiles/dirt_tile.png` (64x64 Style 30)
|
||||
|
||||
### **Objects:**
|
||||
- `demo 🔴/items 🔴/` (tools, locket, etc.)
|
||||
- `demo 🔴/biomi 🔴/buildings/tent.png`
|
||||
|
||||
### **Characters:**
|
||||
- `animations 🟢/kai/` (player sprites)
|
||||
- `animations 🟢/gronk/` (NPC)
|
||||
- `animations 🟢/zombies/base/` (enemies)
|
||||
|
||||
---
|
||||
|
||||
## 🔧 GAME INTEGRATION
|
||||
|
||||
### **Method 1: Replace GameScene Map**
|
||||
Edit `src/scenes/GameScene.js`:
|
||||
```javascript
|
||||
preload() {
|
||||
// Load your Tiled map
|
||||
this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
|
||||
|
||||
// Load tilesets used in map
|
||||
this.load.image('grass_tileset', 'assets/slike 🟢/demo 🔴/tiles/grass_tile.png');
|
||||
}
|
||||
|
||||
create() {
|
||||
// Create map
|
||||
const map = this.make.tilemap({ key: 'myMap' });
|
||||
const tileset = map.addTilesetImage('grass_tiles', 'grass_tileset');
|
||||
|
||||
// Create layers
|
||||
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
|
||||
const objectsLayer = map.createLayer('Objects', tileset, 0, 0);
|
||||
|
||||
// Enable collision
|
||||
groundLayer.setCollisionByProperty({ collides: true });
|
||||
}
|
||||
```
|
||||
|
||||
### **Method 2: New Tiled Scene**
|
||||
Create `src/scenes/TiledGameScene.js`:
|
||||
```javascript
|
||||
class TiledGameScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'TiledGameScene' });
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.tilemapTiledJSON('myMap', 'tiled/maps/starter_map.tmx');
|
||||
this.load.image('tiles', 'assets/slike 🟢/demo 🔴/tiles/grass_tile.png');
|
||||
}
|
||||
|
||||
create() {
|
||||
const map = this.make.tilemap({ key: 'myMap' });
|
||||
const tileset = map.addTilesetImage('tiles');
|
||||
const layer = map.createLayer(0, tileset, 0, 0);
|
||||
|
||||
// Find player spawn from object layer
|
||||
const spawns = map.getObjectLayer('spawns');
|
||||
const playerSpawn = spawns.objects.find(o => o.name === 'player');
|
||||
|
||||
// Create player at spawn point
|
||||
this.player = this.physics.add.sprite(playerSpawn.x, playerSpawn.y, 'kai_idle');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then register in `src/game.js`:
|
||||
```javascript
|
||||
scene: [BootScene, PreloadScene, StoryScene, PrologueScene, TiledGameScene]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 TIPS
|
||||
|
||||
### **Tile Sizes:**
|
||||
- All tiles MUST be **32x32** or multiples (64x64, 96x96)
|
||||
- Phaser works best with power-of-2 sizes
|
||||
|
||||
### **Layers:**
|
||||
1. **Ground** - Base terrain (grass, dirt, water)
|
||||
2. **Objects** - Buildings, trees, decorations
|
||||
3. **Collision** - Invisible collision areas
|
||||
4. **Spawns** - Object layer for spawn points
|
||||
|
||||
### **Object Properties:**
|
||||
In Tiled, select object → Add Custom Property:
|
||||
- `type: "player_spawn"` → Player start position
|
||||
- `type: "zombie_spawn"` → Enemy spawn
|
||||
- `type: "item"` + `item_id: "locket"` → Collectible item
|
||||
- `collides: true` → Enable physics collision
|
||||
|
||||
### **Naming Convention:**
|
||||
- Map files: `starter_map.tmx`, `farm_map.tmx`, `town_map.tmx`
|
||||
- Tileset files: `grass_tiles.tsx`, `building_tiles.tsx`
|
||||
- Use lowercase with underscores!
|
||||
|
||||
---
|
||||
|
||||
## 🎮 TESTING WORKFLOW
|
||||
|
||||
1. **Edit in Tiled** → Save map
|
||||
2. **Refresh browser** (F5) → Phaser reloads .tmx
|
||||
3. **Test in game** → See changes immediately
|
||||
4. **Iterate!**
|
||||
|
||||
**No build step needed - Tiled maps are loaded dynamically!** 🚀
|
||||
|
||||
---
|
||||
|
||||
## 📚 RESOURCES
|
||||
|
||||
- **Tiled Docs:** https://doc.mapeditor.org/
|
||||
- **Phaser Tilemap Docs:** https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html
|
||||
- **Tutorial:** https://www.youtube.com/watch?v=XATr_jdh-44
|
||||
|
||||
---
|
||||
|
||||
## 🔥 QUICK EXAMPLE MAP
|
||||
|
||||
I'll create a starter map for you in next step! Check `tiled/maps/starter_map.tmx`
|
||||
|
||||
---
|
||||
|
||||
**Happy Mapping! 🗺️✨**
|
||||
@@ -56,11 +56,11 @@ class PrologueScene extends Phaser.Scene {
|
||||
|
||||
if (!this.dialogueData) {
|
||||
console.warn('⚠️ Using fallback hardcoded dialogue!');
|
||||
// FALLBACK: Hardcoded Slovenian dialogue
|
||||
// FALLBACK: Extended Slovenian dialogue (12 scenes)
|
||||
this.dialogueData = [
|
||||
{
|
||||
speaker: "NARRATOR",
|
||||
text: "Leto 2084. Svet je padel.",
|
||||
text: "Leto 2084. Svet, kot smo ga poznali, je padel.",
|
||||
background: "lab",
|
||||
bgColor: 0x1a1a2e,
|
||||
portrait: null
|
||||
@@ -70,33 +70,79 @@ class PrologueScene extends Phaser.Scene {
|
||||
text: "Zombi virus je uničil civilizacijo. Preživeli se borijo za vsak nov dan.",
|
||||
background: "ruins",
|
||||
bgColor: 0x2d1b00,
|
||||
portrait: null
|
||||
portrait: null,
|
||||
flash: true
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Ime mi je Kai. Z sestro Ano sva raziskovala virus... potem se je vse spremenilo.",
|
||||
text: "Ime mi je Kai. Z dvojno sestro Ano sva bila najboljša znanstvenika na področju virusologije.",
|
||||
background: "lab",
|
||||
bgColor: 0x1a1a2e,
|
||||
portrait: "kai_neutral"
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Zombiji so vdrli v laboratorij. Ana... Ana je izginila.",
|
||||
background: "lab_chaos",
|
||||
bgColor: 0x3d0000,
|
||||
portrait: "kai_worried",
|
||||
shake: true
|
||||
speaker: "ANA",
|
||||
text: "Kai, poglejva! Uspelo nama je izolirati Alfa strain! To bi lahko bila rešitev!",
|
||||
background: "lab",
|
||||
bgColor: 0x1a1a2e,
|
||||
portrait: "ana_excited"
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Moram jo najti. Karkoli se je zgodilo... ostajam njen brat.",
|
||||
text: "Ana je vedno bila optimistična. Jaz? Bil sem previdnejši.",
|
||||
background: "lab",
|
||||
bgColor: 0x1a1a2e,
|
||||
portrait: "kai_worried"
|
||||
},
|
||||
{
|
||||
speaker: "NARRATOR",
|
||||
text: "⚠️ ALARM! BREACH IN SECTOR 7! ⚠️",
|
||||
background: "lab_alarm",
|
||||
bgColor: 0x660000,
|
||||
portrait: null,
|
||||
shake: true,
|
||||
flash: true
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Zombiji! So vdrli v laboratorij! Ana, BEŽI!",
|
||||
background: "lab_chaos",
|
||||
bgColor: 0x3d0000,
|
||||
portrait: "kai_shocked",
|
||||
shake: true
|
||||
},
|
||||
{
|
||||
speaker: "ANA",
|
||||
text: "Vzorci! Moram jih zaščititi! Ti beži, Kai! BEŽI!",
|
||||
background: "lab_chaos",
|
||||
bgColor: 0x3d0000,
|
||||
portrait: "ana_determined"
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Nato je sledila eksplozija. Ko sem se zbudil... Ana je bila izginila.",
|
||||
background: "ruins",
|
||||
bgColor: 0x1a1a1a,
|
||||
portrait: "kai_pain",
|
||||
flash: true
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Našel sem le njen laboratorijski plašč. In kri. Njeno kri...",
|
||||
background: "ruins",
|
||||
bgColor: 0x1a1a1a,
|
||||
portrait: "kai_confused"
|
||||
},
|
||||
{
|
||||
speaker: "KAI",
|
||||
text: "Ampak trupla ni bilo. To pomeni... mogoče živi. Moram jo najti!",
|
||||
background: "farm",
|
||||
bgColor: 0x2d4a1e,
|
||||
portrait: "kai_determined"
|
||||
},
|
||||
{
|
||||
speaker: "NARRATOR",
|
||||
text: "In tako se začne Kaijevo potovanje skozi Mrtvo dolino...",
|
||||
text: "In tako se začne Kaijevo potovanje skozi Mrtvo dolino. Iskanje Ane. Iskanje upanja.",
|
||||
background: "farm",
|
||||
bgColor: 0x2d4a1e,
|
||||
portrait: null
|
||||
|
||||
Reference in New Issue
Block a user