🎭 INTRO DESIGN - DUAL TIMELINE VERSION!

 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! 🎆
This commit is contained in:
2026-01-10 04:33:59 +01:00
parent 0bcd598069
commit 1a05ee4f57

View File

@@ -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());
}