From fde21fcc425cb017d0da4a4433e1278b657bc68e Mon Sep 17 00:00:00 2001 From: David Kotnik Date: Sat, 3 Jan 2026 22:27:35 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AC=20A+B=20COMPLETE:=20Extended=20Pro?= =?UTF-8?q?logue=20+=20Tiled=20Guide!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ═══════════════════════════════════════════════════════════════ 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! 🗺️ --- TILED_WORKFLOW_GUIDE.md | 204 ++++++++++++++++++++++++++++++++++++ src/scenes/PrologueScene.js | 70 ++++++++++--- 2 files changed, 262 insertions(+), 12 deletions(-) create mode 100644 TILED_WORKFLOW_GUIDE.md diff --git a/TILED_WORKFLOW_GUIDE.md b/TILED_WORKFLOW_GUIDE.md new file mode 100644 index 000000000..22d4de2ef --- /dev/null +++ b/TILED_WORKFLOW_GUIDE.md @@ -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! 🗺️✨** diff --git a/src/scenes/PrologueScene.js b/src/scenes/PrologueScene.js index 8c483d79e..87409d3cf 100644 --- a/src/scenes/PrologueScene.js +++ b/src/scenes/PrologueScene.js @@ -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