From 1a05ee4f57aa51ab78ebd35fba08d03cc44052f2 Mon Sep 17 00:00:00 2001 From: David Kotnik Date: Sat, 10 Jan 2026 04:33:59 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AD=20INTRO=20DESIGN=20-=20DUAL=20TIME?= =?UTF-8?q?LINE=20VERSION!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ UPDATED: INTRO_SEQUENCE_DESIGN.md Added TIMELINE VERSION A (60 seconds): 📋 6-PHASE TIMELINE: **Phase 1: Happy Family (0:00-0:10)** - Kai + father longboard, Ana dreads barbershop, RD cake - Text: 'Nekoč so bile barve resnične...' - Lo-fi music + children's laughter - Warm blur-to-clear effect **Phase 2: The Bond (0:10-0:20)** - Twins holding hands, MATCHING dreads (DNA!) - Text: 'Imel sem njo. Imela sva vse.' - Heartbeat SFX (gentle, 80 BPM) - CLEAREST shot (0 blur - most important!) **Phase 3: The Collapse (0:20-0:35)** - Virus X-Noir spread, zombie silhouettes, chaos - Text: 'Potem je prišel X-Noir. In svet se je zlomil.' - Punk rock + sirens + screams - Heavy glitch, red/green saturation **Phase 4: The Loss (0:35-0:45)** - Parents becoming transparent (ghost foreshadow!) - Text: 'Starša sta postala senci... Ana je izginila v temi.' - Distortion sound, sudden silence - Parents fade to 30% opacity **Phase 5: Passage of Time (0:45-0:55) ⭐** - FAST MONTAGE: Aging system showcase! - Young Kai → Adult Kai (beard) → Elder Kai (grey dreads) - References: /assets/references/aging_system/ - Text: 'Leta so postala megla. Obraz se je spremenil... cilj nikoli.' - Noir synth + ticking clock - CRITICAL: Shows Generational Aging! **Phase 6: Amnesia Wake-Up (0:55-1:00)** - Maximum blur → Bedroom focus → Gronk voice - Text: 'Kdo sem? ... Kje je Ana?' - Gronk: 'No, končno si buden.' - VHS filter fades out - Transition to gameplay 🎮 SKIP OPTION: - Trigger: After 5 seconds - Display: '[Hold X to face reality]' - Skip to gameplay instantly 💻 COMPLETE JAVASCRIPT IMPLEMENTATION: **Version A (60s) - Full Code:** - 6 phase functions - VHS overlay system - Skip controls (X or ESC) - Aging montage (Phase 5 - CRITICAL!) - Effects: blur transitions, glitch, color override - Audio: 6 different tracks/SFX - Complete showShot() method **Version B (30-45s) - Fast Cut Version:** - 3 phase functions (already in doc) - ADHD energy with rapid cuts - Simpler implementation 📊 COMPARISON: **Version A (60s):** - Pro: Aging system showcase, emotional depth - Pro: Cinematic pacing, gradual build - Con: Longer (60s), more assets needed - Best for: Final release, story emphasis **Version B (30-45s):** - Pro: Fast impact, less assets - Pro: ADHD-friendly energy - Con: No aging showcase - Best for: Demo, rapid testing 🎨 NEW SLOVENIAN TEXT: Document now 900+ lines with both complete timelines! 🎆 --- docs/game_design/INTRO_SEQUENCE_DESIGN.md | 569 +++++++++++++++++++++- 1 file changed, 562 insertions(+), 7 deletions(-) diff --git a/docs/game_design/INTRO_SEQUENCE_DESIGN.md b/docs/game_design/INTRO_SEQUENCE_DESIGN.md index e98dee71e..a7043e704 100644 --- a/docs/game_design/INTRO_SEQUENCE_DESIGN.md +++ b/docs/game_design/INTRO_SEQUENCE_DESIGN.md @@ -21,7 +21,222 @@ --- -## 🎬 SEQUENCE BREAKDOWN (3 Phases) +## 📋 TIMELINE OPTIONS + +**Two versions available:** +1. **Version A (60 seconds):** 6-phase focused timeline with aging emphasis +2. **Version B (30-45 seconds):** 3-phase fast-cut ADHD energy version + +Choose based on production time and narrative goals. + +--- + +## ⏱️ VERSION A: 60-SECOND TIMELINE (6 Phases) + +**Total Duration:** 1:00 (60 seconds) +**Focus:** Aging system showcase, gradual emotional build +**Style:** Cinematic, measured pacing + +### **PHASE 1: HAPPY FAMILY (0:00 - 0:10)** + +**Visual Content:** +- Kai and father on longboard (ocean pier, sunny) +- Ana at barbershop getting dreads styled +- RD birthday cake celebration +- Images warm but slightly blurred (nostalgic) + +**Text (Typewriter):** +``` +"Nekoč so bile barve resnične..." +(Once colors were real...) +``` + +**Audio:** +- Calm lo-fi melody +- Children's laughter in background +- Light, nostalgic vibe +- Volume: 0.4 + +**Effects:** +- Slight blur (nostalgic memory) +- Warm color grading +- VHS grain texture +- Soft crossfades + +--- + +### **PHASE 2: THE BOND (0:10 - 0:20)** + +**Visual Content:** +- Kai and Ana as children holding hands +- Focus on MATCHING pink/green dreadlocks (DNA proof) +- Twin connection clearly visible +- Clearest shot in intro (most important memory) + +**Text (Typewriter):** +``` +"Imel sem njo. Imela sva vse." +(I had her. We had everything.) +``` + +**Audio:** +- Gentle heartbeat appears in background +- Lo-fi melody continues +- Emotional, warm +- Volume: 0.5 + +**Effects:** +- Less blur (clearer memory) +- Focus on matching features +- Soft glow around twins +- VHS texture maintained + +--- + +### **PHASE 3: THE COLLAPSE (0:20 - 0:35)** + +**Visual Content:** +- Images become RED/NEON GREEN (toxic) +- Zombie silhouettes appearing +- Virus under microscope (X-Noir visualization) +- Chaos in streets (panic, running) +- Heavy glitch effects + +**Text (Typewriter):** +``` +"Potem je prišel X-Noir. In svet se je zlomil." +(Then came X-Noir. And the world broke.) +``` + +**Audio:** +- Fast punk-rock music kicks in +- Sirens and screams layered +- Chaos soundscape +- Volume: 0.7 → 1.0 + +**Effects:** +- VHS glitch intensifies +- RGB color separation +- Scanline corruption +- Red/green saturation +80% + +--- + +### **PHASE 4: THE LOSS (0:35 - 0:45)** + +**Visual Content:** +- Parents becoming transparent (foreshadowing ghosts) +- Father and mother fading into shadows +- Kai alone in basement (survival) +- Ana being taken away (military/scientists) + +**Text (Typewriter):** +``` +"Starša sta postala senci... Ana je izginila v temi." +(Parents became shadows... Ana disappeared into darkness.) +``` + +**Audio:** +- Distortion (corrupted sound) +- Sudden silence after chaos +- Single heartbeat (Kai's survival) +- Volume: 0.3 (quiet, intimate) + +**Effects:** +- Parents fade to 30% opacity +- Heavy blur on Ana separation +- Screen darkens +- VHS corruption peaks + +--- + +### **PHASE 5: PASSAGE OF TIME (0:45 - 0:55)** + +**Visual Content:** +- **FAST MONTAGE: Kai aging through life stages** +- Reference: `/assets/references/aging_system/` + - Young Kai (current) + - Adult Kai (35, beard appears, dreads tied) + - Elder Kai (50+, grey dreads, punk grandpa) +- Beard growing longer +- Dreadlocks getting longer, then grey +- Fast cuts (2-3 seconds per age) + +**Text (Typewriter):** +``` +"Leta so postala megla. Obraz se je spremenil... cilj nikoli." +(Years became fog. Face changed... goal never.) +``` + +**Audio:** +- Deep noir synth (dark bass) +- Time-passing sound effect +- Ticking clock (subtle) +- Volume: 0.6 + +**Effects:** +- Time-lapse blur +- Rapid crossfades +- Aging progression clear +- Grey color grading increases + +**CRITICAL:** This phase showcases the Generational Aging System! + +--- + +### **PHASE 6: AMNESIA WAKE-UP (0:55 - 1:00)** + +**Visual Content:** +- Everything goes MAXIMUM BLUR (amnesia effect) +- Kai opens eyes in GameScene bedroom +- Bedroom slowly comes into focus +- Gronk's silhouette in doorway with vape smoke + +**Text (Typewriter):** +``` +"Kdo sem? ... Kje je Ana?" +(Who am I? ... Where is Ana?) +``` + +**Final Audio:** +- Vape sound effect (Gronk) +- Gronk voice: "No, končno si buden." (Well, finally awake.) +- [AI_VOICE:gronk:custom] + +**Audio:** +- Silence, then breathing +- Heartbeat normalizing +- Vape hiss (Gronk) +- Volume: 0.3 + +**Effects:** +- Gaussian blur: 20 → 0 (over 3 seconds) +- Bedroom fades in +- VHS filter fades out +- Transition to gameplay + +--- + +### **SKIP OPTION:** + +**Trigger:** After 5 seconds +**Display:** Small corner text +``` +[Hold X to face reality] +``` +- Skips entire intro +- Direct to gameplay +- Saves intro completion flag + +--- + +## 🎬 VERSION B: 30-45 SECOND TIMELINE (3 Phases) + +**Total Duration:** 30-45 seconds +**Focus:** Fast cuts, ADHD energy, immediate impact +**Style:** Aggressive, punk aesthetic + +### **PHASE 1: HAPPY FAMILY MEMORIES (15 seconds) ### **PHASE 1: HAPPY FAMILY MEMORIES (15 seconds)** @@ -357,7 +572,347 @@ temperature: 'cold' (blue tint) ## 💻 IMPLEMENTATION GUIDE FOR AGENT -### **IntroScene.js Structure:** +### **IntroScene.js Structure (Version A - 60 seconds):** + +```javascript +class IntroScene extends Phaser.Scene { + constructor() { + super({ key: 'IntroScene' }); + this.skipEnabled = false; + this.currentPhase = 0; + } + + create() { + // Initialize systems + this.typewriterSystem = new DynamicTypewriterSystem(this); + this.audioSystem = new HIPOAudioSystem(this); + + // VHS overlay (entire intro) + this.vhsFilter = this.cameras.main.setPostPipeline('VHSScanlineShader'); + + // Enable skip after 5 seconds + this.time.delayedCall(5000, () => { + this.skipEnabled = true; + this.showSkipPrompt(); + }); + + // Input handlers + this.setupSkipControls(); + + // Start intro + this.playPhase1HappyFamily(); + } + + playPhase1HappyFamily() { + // 0:00 - 0:10 (10 seconds) + this.currentPhase = 1; + + // Typewriter text + this.typewriterSystem.displayText( + "Nekoč so bile barve resnične...", + 0.5 // delay 0.5s + ); + + // Audio + this.audioSystem.playMusic('intro_happy_lofi', {volume: 0.4, loop: false}); + this.audioSystem.playSFX('children_laughter', {volume: 0.2, loop: true}); + + // Visual shots + this.showShot('otac_longboard', 0, 3000, { + blur: {start: 10, end: 5}, + colorGrade: 'warm' + }); + + this.showShot('ana_barbershop_dreads', 3000, 6000, { + blur: {start: 8, end: 3}, + colorGrade: 'warm' + }); + + this.showShot('birthday_cake_rd', 6000, 10000, { + blur: {start: 5, end: 2}, + colorGrade: 'warm', + vhsIntensity: 0.2 + }); + + // Transition to Phase 2 + this.time.delayedCall(10000, () => this.playPhase2TheBond()); + } + + playPhase2TheBond() { + // 0:10 - 0:20 (10 seconds) + this.currentPhase = 2; + + // Typewriter text + this.typewriterSystem.displayText( + "Imel sem njo. Imela sva vse.", + 0.5 + ); + + // Heartbeat SFX + this.audioSystem.playSFX('heartbeat_gentle', {volume: 0.3, loop: true, bpm: 80}); + + // CLEAREST shot (most important) + this.showShot('kai_ana_twins_holding_hands', 10000, 20000, { + blur: {start: 0, end: 0}, // NO BLUR - crystal clear! + glow: 'soft', // Soft glow around twins + focus: ['kai_dreads', 'ana_dreads'], // Highlight matching DNA + vhsIntensity: 0.15 + }); + + // Transition to Phase 3 + this.time.delayedCall(20000, () => this.playPhase3TheCollapse()); + } + + playPhase3TheCollapse() { + // 0:20 - 0:35 (15 seconds) + this.currentPhase = 3; + + // Typewriter text + this.typewriterSystem.displayText( + "Potem je prišel X-Noir. In svet se je zlomil.", + 0.5 + ); + + // Audio SHIFT + this.audioSystem.stopSFX('children_laughter'); + this.audioSystem.stopSFX('heartbeat_gentle'); + this.audioSystem.fadeOutMusic(1000); + + this.time.delayedCall(1000, () => { + this.audioSystem.playMusic('intro_punk_chaos', {volume: 0.7, fadeIn: 500}); + this.audioSystem.playSFX('sirens_chaos', {volume: 0.6, loop: true}); + this.audioSystem.playSFX('screams_distant', {volume: 0.4}); + }); + + // Visual chaos + this.showShot('virus_xnoir_spread', 20000, 23000, { + colorOverride: {green: +70%, saturation: 1.5}, + glitch: 'heavy', + vhsIntensity: 0.7 + }); + + this.showShot('zombie_silhouettes_panic', 23000, 27000, { + colorOverride: {red: +50%}, + glitch: 'extreme', + strobe: true, + rgbSeparation: true + }); + + this.showShot('chaos_streets', 27000, 32000, { + blur: {start: 5, end: 15}, + colorOverride: {red: +80%}, + shake: true + }); + + this.showShot('ana_taken_away', 32000, 35000, { + blur: {start: 15, end: 20}, + glitch: 'corruption', + fade: 'red' + }); + + // Transition to Phase 4 + this.time.delayedCall(35000, () => this.playPhase4TheLoss()); + } + + playPhase4TheLoss() { + // 0:35 - 0:45 (10 seconds) + this.currentPhase = 4; + + // Typewriter text + this.typewriterSystem.displayText( + "Starša sta postala senci... Ana je izginila v temi.", + 0.5 + ); + + // Audio SHIFT - sudden silence + this.audioSystem.stopAll(); + this.time.delayedCall(1000, () => { + this.audioSystem.playSFX('heartbeat_single', {volume: 0.4, bpm: 60}); + this.audioSystem.playMusic('intro_distortion', {volume: 0.3}); + }); + + // Parents fading + this.showShot('parents_becoming_ghosts', 35000, 40000, { + opacity: {start: 100%, end: 30%}, // Foreshadowing! + blur: {start: 10, end: 15}, + vhsIntensity: 0.9 + }); + + this.showShot('kai_alone_basement', 40000, 45000, { + darken: 80%, + blur: {start: 15, end: 18}, + vhsIntensity: 1.0 // Maximum corruption + }); + + // Transition to Phase 5 (AGING!) + this.time.delayedCall(45000, () => this.playPhase5PassageOfTime()); + } + + playPhase5PassageOfTime() { + // 0:45 - 0:55 (10 seconds) + // CRITICAL: Showcases Generational Aging System! + this.currentPhase = 5; + + // Typewriter text + this.typewriterSystem.displayText( + "Leta so postala megla. Obraz se je spremenil... cilj nikoli.", + 0.5 + ); + + // Audio + this.audioSystem.stopAll(); + this.audioSystem.playMusic('intro_noir_synth', {volume: 0.6}); + this.audioSystem.playSFX('clock_ticking', {volume: 0.2, loop: true}); + this.audioSystem.playSFX('time_passing_whoosh', {volume: 0.3}); + + // FAST MONTAGE - AGING STAGES + // Young Kai (current) + this.showShot('kai_young_current', 45000, 48000, { + blur: {start: 5, end: 3}, + timelapse: true + }); + + // Adult Kai (35) - beard, tied dreads + this.showShot('kai_adult_35_beard', 48000, 51000, { + blur: {start: 5, end: 3}, + timelapse: true, + reference: '/assets/references/aging_system/adult_kai_family_man.png' + }); + + // Elder Kai (50+) - grey dreads, punk grandpa + this.showShot('kai_elder_punk_grandpa', 51000, 55000, { + blur: {start: 5, end: 8}, + timelapse: true, + colorGrade: 'grey', // More grey as aging + reference: '/assets/references/aging_system/elder_kai_punk_grandpa.png' + }); + + // Transition to Phase 6 (Wake up!) + this.time.delayedCall(55000, () => this.playPhase6AmnesiaWakeUp()); + } + + playPhase6AmnesiaWakeUp() { + // 0:55 - 1:00 (5 seconds) + this.currentPhase = 6; + + // Typewriter text + this.typewriterSystem.displayText( + "Kdo sem? ... Kje je Ana?", + 0.5 + ); + + // Audio + this.audioSystem.stopAll(); + this.time.delayedCall(500, () => { + this.audioSystem.playSFX('breathing_heavy', {volume: 0.3}); + this.audioSystem.playSFX('heartbeat_normalizing', {volume: 0.2, bpm: 60}); + }); + + // MAXIMUM BLUR → Clear + this.cameras.main.fadeOut(1000, 0, 0, 0); + + this.time.delayedCall(1500, () => { + // Fade in bedroom + this.cameras.main.fadeIn(2000); + this.showShot('kai_bedroom_wakeup', 56500, 60000, { + blur: {start: 20, end: 0}, // Amnesia clearing + vhsFade: true // VHS filter fades out + }); + + // Gronk voice + this.time.delayedCall(58000, () => { + this.audioSystem.playSFX('vape_hiss', {volume: 0.4}); + this.audioSystem.playDialogue( + "[AI_VOICE:gronk:custom] No, končno si buden.", + 'gronk' + ); + }); + + // Transition to GameScene + this.time.delayedCall(60000, () => { + this.scene.start('GameScene'); + }); + }); + } + + setupSkipControls() { + // Hold X to skip + this.input.keyboard.on('keydown-X', () => { + if (this.skipEnabled) { + this.skipIntro(); + } + }); + + // ESC also skips + this.input.keyboard.on('keydown-ESC', () => { + if (this.skipEnabled) { + this.skipIntro(); + } + }); + } + + showSkipPrompt() { + const skipText = this.add.text( + 20, 20, + '[Hold X to face reality]', + { + fontFamily: 'Courier New', + fontSize: '16px', + color: '#ffffff', + stroke: '#000000', + strokeThickness: 2 + } + ); + skipText.setAlpha(0); + + this.tweens.add({ + targets: skipText, + alpha: 0.7, + duration: 1000, + yoyo: true, + repeat: -1 + }); + } + + skipIntro() { + console.log('⏩ Intro skipped!'); + this.audioSystem.stopAll(); + this.scene.start('GameScene'); + } + + showShot(imageKey, startTime, endTime, effects = {}) { + this.time.delayedCall(startTime, () => { + // Load and display image + const shot = this.add.image( + this.cameras.main.width / 2, + this.cameras.main.height / 2, + imageKey + ); + + // Apply effects + if (effects.blur) { + this.applyBlurTransition(shot, effects.blur, endTime - startTime); + } + if (effects.glitch) { + this.applyGlitchEffect(shot, effects.glitch); + } + if (effects.colorOverride) { + this.applyColorGrading(shot, effects.colorOverride); + } + if (effects.opacity) { + this.applyOpacityTransition(shot, effects.opacity, endTime - startTime); + } + + // Remove shot when done + this.time.delayedCall(endTime, () => { + shot.destroy(); + }); + }); + } +} +``` + +### **IntroScene.js Structure (Version B - 30-45 seconds):** ```javascript class IntroScene extends Phaser.Scene { @@ -376,11 +931,11 @@ class IntroScene extends Phaser.Scene { // Blur-to-clear effect // Typewriter text: "Nekoč smo imeli barve..." - this.showShot('otac_longboard', 0, 3000, {blur: 10 → 0}); - this.showShot('dreads_barbershop', 3000, 6000, {blur: 10 → 0}); - this.showShot('ana_twin_moment', 6000, 9000, {blur: 0}); // Clearest - this.showShot('birthday_party', 9000, 12000, {blur: 5 → 0}); - this.showShot('family_portrait', 12000, 15000, {blur: 5 → 0, freeze: 2000}); + this.showShot('otac_longboard', 0, 3000, {blur: {start: 10, end: 0}}); + this.showShot('dreads_barbershop', 3000, 6000, {blur: {start: 10, end: 0}}); + this.showShot('ana_twin_moment', 6000, 9000, {blur: {start: 0, end: 0}}); // Clearest + this.showShot('birthday_party', 9000, 12000, {blur: {start: 5, end: 0}}); + this.showShot('family_portrait', 12000, 15000, {blur: {start: 5, end: 0}, freeze: 2000}); this.time.delayedCall(15000, () => this.playPhase2Collapse()); }