David Kotnik
1a05ee4f57
✅ 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! 🎆
1074 lines
29 KiB
Markdown
1074 lines
29 KiB
Markdown
# 🎬 INTRO SEQUENCE - DESIGN DOCUMENT
|
|
## "From Colors to Darkness" - Kai's Amnesia Awakening
|
|
|
|
**Created:** January 10, 2026, 04:21 CET
|
|
**Duration:** 30-45 seconds
|
|
**Purpose:** Emotional setup for entire game narrative
|
|
**Style:** Style 32 Dark-Chibi Noir with fast cuts (ADHD energy)
|
|
|
|
---
|
|
|
|
## 🎯 CORE CONCEPT: "SPOMIN vs. REALNOST"
|
|
|
|
**The Temelj (Foundation):**
|
|
- **Kai & Ana:** Twin siblings, separated in chaos
|
|
- **DNA Link:** Pink/green dreadlocks (genetic connection)
|
|
- **Virus "X-Noir":** Spreads through tech and blood → creates "Ombiji" (Zombies)
|
|
- **Amnesia:** Kai survived basement attack but forgot everything except ONE image: Ana
|
|
|
|
**Emotional Arc:**
|
|
> "We had colors" → "Then came darkness" → "I'm alone with hole in head" → "Must find her... even if takes whole life"
|
|
|
|
---
|
|
|
|
## 📋 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)**
|
|
|
|
**Visual Style:**
|
|
- Fast cuts (ADHD energy - 3-5s per shot)
|
|
- Blur-to-sharp effect (memories clarifying)
|
|
- Bright neon colors (magenta/cyan rim lighting)
|
|
- VHS grain texture (nostalgic)
|
|
- Style 32 chibi characters
|
|
|
|
**Shots (5 total, ~3s each):**
|
|
|
|
**Shot 1 (0-3s): Longboard with Father**
|
|
- Reference: `/assets/references/aging_system/otac_punk_father.png`
|
|
- Scene: Ocean pier, sunny day
|
|
- Action: Father teaching Kai to skate
|
|
- Father's hand on Kai's shoulder: "Pojdi, sin!" (Go, son!)
|
|
- Blur clears when father smiles
|
|
|
|
**Shot 2 (3-6s): Dreadlocks at Barbershop**
|
|
- Scene: Barbershop mirror
|
|
- Action: Stylist adding PINK streak to green dreads
|
|
- Kai's excited smile in reflection
|
|
- Ana visible in background getting similar style
|
|
- Blur clears on mirror reflection
|
|
|
|
**Shot 3 (6-9s): Twin Moment with Ana**
|
|
- Reference: `/assets/references/aging_system/mlada_ana_twin_prisoner.png` (but happy, not prisoner)
|
|
- Scene: University lab (Ana's workspace)
|
|
- Action: Both laughing, Ana showing science project
|
|
- CLEAREST shot (most important memory)
|
|
- No blur - this is what Kai holds onto
|
|
|
|
**Shot 4 (9-12s): Birthday Celebration**
|
|
- Scene: Home garden/party
|
|
- Action: Cake with candles, family together
|
|
- Mother and Father present (alive, happy)
|
|
- Reference: Both parents from `/assets/references/aging_system/`
|
|
- Warm colors, joy
|
|
|
|
**Shot 5 (12-15s): Family Portrait**
|
|
- Scene: Professional photo setup or casual selfie
|
|
- Action: All four smiling (Father, Mother, Kai, Ana)
|
|
- Perfect family moment
|
|
- Freeze frame for 2 seconds
|
|
- This is "what was lost"
|
|
|
|
**Text Overlay (Typewriter Effect):**
|
|
```
|
|
"Nekoč smo imeli barve..."
|
|
(We once had colors...)
|
|
```
|
|
|
|
**Audio:**
|
|
- **Music:** Light, happy indie/lo-fi (slightly grainy)
|
|
- **SFX:** Children's laughter, ocean waves, city hum
|
|
- **Heartbeat:** Subtle, steady (background)
|
|
- **Volume:** 0.4
|
|
|
|
---
|
|
|
|
### **PHASE 2: THE COLLAPSE (15 seconds)**
|
|
|
|
**Visual Style:**
|
|
- Images start GLITCHING (digital corruption)
|
|
- Colors become INTENSE (saturated reds, toxic greens)
|
|
- VHS scanlines multiply
|
|
- Blur increases (memory breaking)
|
|
- Style 32 Noir kicks in (dark atmospheric)
|
|
|
|
**Shots (4 total, faster cuts ~4s each):**
|
|
|
|
**Shot 1 (15-19s): Virus Spread**
|
|
- Visual: Green fluorescent particles spreading
|
|
- Digital HUD showing infection progress
|
|
- "X-Noir Virus: Outbreak Detected"
|
|
- Neon green toxic glow
|
|
- Screen glitches heavily
|
|
|
|
**Shot 2 (19-23s): Ombiji Appear**
|
|
- Silhouettes of zombies (Style 32 shadows)
|
|
- Red eyes glowing in darkness
|
|
- Crowd of normal people transforms
|
|
- Panic, screaming (visual chaos)
|
|
- Fast strobe cuts
|
|
|
|
**Shot 3 (23-27s): Parents Fight/Flee**
|
|
- Reference: `/assets/references/aging_system/otac_punk_father.png` and `mati_punk_mother.png`
|
|
- Scene: Parents protecting twins
|
|
- Father with longboard as weapon
|
|
- Mother pulling kids to safety
|
|
- Blur effect HEAVY (Kai can't process)
|
|
- Red atmospheric lighting
|
|
|
|
**Shot 4 (27-30s): Separation**
|
|
- Ana being pulled away (military/scientists)
|
|
- Kai reaching for her (slow motion)
|
|
- Screen goes RED
|
|
- VHS glitch corrupts everything
|
|
- Final frame: Ana's face disappearing into static
|
|
|
|
**Text Overlay (Typewriter Effect):**
|
|
```
|
|
"Potem je prišla tema..."
|
|
(Then came the darkness...)
|
|
```
|
|
|
|
**Audio:**
|
|
- **Music:** Fast, aggressive punk rock (distorted)
|
|
- **SFX:** Sirens, screams, gunshots, chaos
|
|
- **Heartbeat:** Rapid, panicked (120 BPM)
|
|
- **Volume:** 0.7 → 1.0 (building tension)
|
|
|
|
---
|
|
|
|
### **PHASE 3: AMNESIA WAKE-UP (5-10 seconds)**
|
|
|
|
**Visual Style:**
|
|
- COMPLETE BLUR (nothing clear)
|
|
- Screen goes dark (fade to black)
|
|
- Slow fade up to Kai's bedroom
|
|
- Kai visible but confused, disoriented
|
|
- Camera shake (grogginess)
|
|
|
|
**Shots:**
|
|
|
|
**Shot 1 (30-33s): Pure Blur/Darkness**
|
|
- Black screen with faint VHS scanlines
|
|
- Heartbeat gets slower
|
|
- Breathing sounds (Kai waking)
|
|
|
|
**Shot 2 (33-37s): Kai's Bedroom (Current Day)**
|
|
- Reference: Young Kai base sprite
|
|
- Scene: Dark bedroom, morning light coming in
|
|
- Kai sitting up in bed, confused
|
|
- Hand on head (amnesia headache)
|
|
- Room details: posters, longboard, minimal
|
|
|
|
**Shot 3 (37-40s): Memory Fragment Flash**
|
|
- Quick flash of Ana's face (twin memory)
|
|
- Only thing Kai remembers clearly
|
|
- Purple skin version (memory distortion)
|
|
- Reference: `/assets/references/main_characters/ana/master_reference_nobg.png`
|
|
|
|
**Shot 4 (40-45s): Gronk's Voice**
|
|
- Audio only OR Gronk sprite appears in doorway
|
|
- Gronk's silhouette with vape smoke
|
|
- "Spet si zaspal, stari... upam, da si sanjal o mojem vapiu."
|
|
- (You overslept again, man... hope you dreamed about my vape.)
|
|
|
|
**Text Overlay (Typewriter Effect):**
|
|
```
|
|
"In ostal sem sam... z luknjo v glavi."
|
|
(And I remained alone... with a hole in my head.)
|
|
```
|
|
|
|
**Final Text (Typewriter Effect):**
|
|
```
|
|
"Moram jo najti. Tudi če mi vzame celo življenje."
|
|
(I must find her. Even if it takes my whole life.)
|
|
```
|
|
|
|
**Audio:**
|
|
- **Music:** Slow, dark ambient (ethereal)
|
|
- **SFX:** Heavy breathing, heartbeat slowing (80 BPM → 60 BPM)
|
|
- **Gronk's Voice:** [AI_VOICE:gronk:custom] with vape background sound
|
|
- **Volume:** 0.3 (quiet, intimate)
|
|
|
|
---
|
|
|
|
## 🎮 SPECIAL EDITION NOTIFICATION (5 seconds - Optional)
|
|
|
|
**Trigger:** If player is buyer #1-20 OR streamer mode detected
|
|
|
|
**Visual:**
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ⭐ SPECIAL EDITION ACTIVATED! ⭐ │
|
|
│ │
|
|
│ Gronk Helper Mode: UNLOCKED │
|
|
│ (Exclusive for Founder #XX) │
|
|
│ │
|
|
│ Press [G] to summon Gronk companion! │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
**Style:**
|
|
- Neon magenta/cyan border
|
|
- Pulsing glow animation
|
|
- 5-second display
|
|
- Skip on any key
|
|
- Gronk chibi sprite appears briefly
|
|
|
|
**Audio:**
|
|
- Special unlock chime (vape sound effect)
|
|
- Gronk: "Gronk help! Pink is best!"
|
|
|
|
---
|
|
|
|
## 📝 TYPEWRITER TEXT SCRIPT (Complete)
|
|
|
|
**Phase 1 (Happy Memories):**
|
|
```
|
|
"Nekoč smo imeli barve..."
|
|
```
|
|
|
|
**Phase 2 (The Collapse):**
|
|
```
|
|
"Potem je prišla tema..."
|
|
```
|
|
|
|
**Phase 3 (Amnesia Wake-Up):**
|
|
```
|
|
"In ostal sem sam... z luknjo v glavi."
|
|
|
|
"Moram jo najti. Tudi če mi vzame celo življenje."
|
|
```
|
|
|
|
**Typewriter Settings:**
|
|
- Speed: 50ms per character (ADHD-friendly - not too slow!)
|
|
- Sound: Subtle typewriter click (0.1 volume)
|
|
- Skip: Any key press
|
|
- Color: White with neon cyan shadow
|
|
|
|
---
|
|
|
|
## 🎨 VISUAL EFFECTS SPECIFICATIONS
|
|
|
|
### **Blur Effect:**
|
|
```javascript
|
|
// Phase 1: Blur-to-Clear (memories clarifying)
|
|
blurStrength: 10 → 0 (over 2 seconds per shot)
|
|
ease: 'Power2.easeOut'
|
|
|
|
// Phase 2: Clear-to-Blur (memories breaking)
|
|
blurStrength: 0 → 15 (over 3 seconds)
|
|
ease: 'Power2.easeIn'
|
|
|
|
// Phase 3: Maximum Blur (amnesia)
|
|
blurStrength: 20 (total darkness)
|
|
```
|
|
|
|
### **VHS Glitch Effect:**
|
|
```javascript
|
|
// Phase 1: Light grain
|
|
scanlineIntensity: 0.2
|
|
glitchFrequency: 0 (no glitches yet)
|
|
|
|
// Phase 2: Heavy corruption
|
|
scanlineIntensity: 0.7
|
|
glitchFrequency: 2.0 (glitch every 500ms)
|
|
colorShift: true (RGB separation)
|
|
|
|
// Phase 3: Minimal
|
|
scanlineIntensity: 0.1
|
|
```
|
|
|
|
### **Color Grading:**
|
|
```javascript
|
|
// Phase 1: Happy/Warm
|
|
saturation: 1.2
|
|
brightness: 1.1
|
|
temperature: 'warm' (orange tint)
|
|
|
|
// Phase 2: Intense/Toxic
|
|
saturation: 1.5
|
|
brightness: 1.0
|
|
reds: +50% (danger)
|
|
greens: +70% (virus)
|
|
|
|
// Phase 3: Desaturated/Cold
|
|
saturation: 0.6
|
|
brightness: 0.8
|
|
temperature: 'cold' (blue tint)
|
|
```
|
|
|
|
---
|
|
|
|
## 🔊 AUDIO TIMELINE
|
|
|
|
**0-15s (Happy Memories):**
|
|
- Track: Light indie/lo-fi music
|
|
- Tempo: 100 BPM
|
|
- Mood: Nostalgic, warm
|
|
- Volume: 0.4
|
|
|
|
**15-30s (The Collapse):**
|
|
- Track: Fast punk rock (distorted)
|
|
- Tempo: 180 BPM
|
|
- Mood: Chaos, panic
|
|
- Volume: 0.7 → 1.0 (crescendo)
|
|
- SFX: Layered chaos (sirens, screams, gunfire)
|
|
|
|
**30-45s (Amnesia Wake-Up):**
|
|
- Track: Dark ambient (drone)
|
|
- Tempo: N/A (atmospheric)
|
|
- Mood: Confused, lonely
|
|
- Volume: 0.3
|
|
- SFX: Heartbeat (60 BPM), breathing, Gronk's voice
|
|
|
|
**Transitions:**
|
|
- Crossfade duration: 1 second
|
|
- No silence gaps (seamless flow)
|
|
|
|
---
|
|
|
|
## 📂 REFERENCE ASSETS REQUIRED
|
|
|
|
**Images (Happy Memories):**
|
|
- Otac (alive): `otac_punk_father.png`
|
|
- Mati (alive): `mati_punk_mother.png`
|
|
- Mlada Ana (happy version): Generate from `mlada_ana_twin_prisoner.png` but smiling
|
|
- Young Kai: `/assets/references/main_characters/kai/master_reference_nobg.png`
|
|
|
|
**Images (The Collapse):**
|
|
- Zombie silhouettes: Generate Style 32 shadow zombies
|
|
- Virus particles: Generate neon green toxic effect
|
|
- Parents fighting: Action poses from alive references
|
|
|
|
**Images (Amnesia):**
|
|
- Kai bedroom: Generate dark bedroom scene
|
|
- Ana memory flash: `master_reference_nobg.png` (purple version - memory distortion)
|
|
- Gronk silhouette: `/assets/references/npcs/gronk/` (if exists)
|
|
|
|
**Audio:**
|
|
- Happy music: Find CC0 indie/lo-fi track
|
|
- Punk rock: High-energy distorted track
|
|
- Ambient: Dark drone atmosphere
|
|
- SFX: Kenney.nl packs, Freesound.org
|
|
- Gronk voice: Edge-TTS generated
|
|
|
|
---
|
|
|
|
## 💻 IMPLEMENTATION GUIDE FOR AGENT
|
|
|
|
### **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 {
|
|
create() {
|
|
// Initialize systems
|
|
this.typewriterSystem = new DynamicTypewriterSystem(this);
|
|
this.audioSystem = new HIPOAudioSystem(this);
|
|
|
|
// Play sequence
|
|
this.playPhase1HappyMemories();
|
|
}
|
|
|
|
playPhase1HappyMemories() {
|
|
// Duration: 15 seconds
|
|
// 5 shots, 3s each
|
|
// Blur-to-clear effect
|
|
// Typewriter text: "Nekoč smo imeli barve..."
|
|
|
|
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());
|
|
}
|
|
|
|
playPhase2Collapse() {
|
|
// Duration: 15 seconds
|
|
// 4 shots, faster cuts
|
|
// Glitch effect intensifies
|
|
// Typewriter text: "Potem je prišla tema..."
|
|
|
|
this.showShot('virus_spread', 15000, 19000, {glitch: 'heavy', green: +70%});
|
|
this.showShot('ombiji_appear', 19000, 23000, {glitch: 'extreme', strobe: true});
|
|
this.showShot('parents_fight', 23000, 27000, {blur: 15, red: +50%});
|
|
this.showShot('ana_separation', 27000, 30000, {glitch: 'corruption', red: 100%});
|
|
|
|
this.time.delayedCall(30000, () => this.playPhase3Amnesia());
|
|
}
|
|
|
|
playPhase3Amnesia() {
|
|
// Duration: 10 seconds
|
|
// Blur → Kai's room → Memory flash → Gronk
|
|
// Typewriter text: "In ostal sem sam..."
|
|
|
|
this.cameras.main.fadeOut(2000, 0, 0, 0);
|
|
this.time.delayedCall(3000, () => {
|
|
this.cameras.main.fadeIn(2000);
|
|
this.showShot('kai_bedroom', 33000, 37000, {blur: 5});
|
|
this.showShot('ana_memory_flash', 37000, 38000, {flash: true});
|
|
this.playGronkVoice(40000);
|
|
|
|
this.time.delayedCall(45000, () => {
|
|
if (this.checkSpecialEdition()) {
|
|
this.showSpecialEditionNotif();
|
|
} else {
|
|
this.scene.start('GameScene');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
checkSpecialEdition() {
|
|
// Check buyer ID or streamer mode
|
|
return (buyerID <= 20 || streamerMode);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 KEY DESIGN PRINCIPLES
|
|
|
|
**1. ADHD Energy (Fast Cuts):**
|
|
- No shot longer than 5 seconds
|
|
- Rapid transitions keep attention
|
|
- Skip button ALWAYS available
|
|
- Visual variety prevents boredom
|
|
|
|
**2. Emotional Impact:**
|
|
- Happy → Sad = Maximum contrast
|
|
- Clear memory (Ana) = Quest motivation
|
|
- Parents sacrifice = Depth
|
|
- Amnesia = Player relatability
|
|
|
|
**3. Story Clarity:**
|
|
- 3 text overlays tell complete story
|
|
- Visual storytelling (no exposition dump)
|
|
- Mystery preserved (what happened to Ana?)
|
|
- Motivation clear (find her!)
|
|
|
|
**4. Style Consistency:**
|
|
- All Style 32 Dark-Chibi Noir
|
|
- Neon magenta/cyan throughout
|
|
- VHS aesthetic (memory theme)
|
|
- Thick outlines maintained
|
|
|
|
---
|
|
|
|
## 📊 TECHNICAL REQUIREMENTS
|
|
|
|
**Assets Needed:**
|
|
- 15+ reference images (some need generation)
|
|
- 3 music tracks (happy/punk/ambient)
|
|
- 20+ SFX (layered chaos)
|
|
- 1 AI voice (Gronk)
|
|
- Typewriter font (monospace)
|
|
|
|
**Phaser Effects:**
|
|
- Blur PostFX
|
|
- VHS Scanline shader (custom)
|
|
- Color grading pipeline
|
|
- Fade transitions
|
|
- Glitch effect (RGB separation)
|
|
|
|
**Performance:**
|
|
- All images preloaded
|
|
- Audio streaming (not preloaded)
|
|
- Effects optimized for 60 FPS
|
|
- Skip function instant (no delay)
|
|
|
|
---
|
|
|
|
## 🚀 NEXT STEPS FOR IMPLEMENTATION
|
|
|
|
1. **Generate Missing Assets:**
|
|
- Happy Ana (smiling version)
|
|
- Zombie silhouettes
|
|
- Virus particle effect
|
|
- Kai's bedroom
|
|
|
|
2. **Create IntroScene.js:**
|
|
- Phase system
|
|
- Timeline management
|
|
- Effect controllers
|
|
|
|
3. **Test Sequence:**
|
|
- Verify timing (30-45s total)
|
|
- Check skip functionality
|
|
- Audio sync
|
|
- Special Edition trigger
|
|
|
|
4. **Polish:**
|
|
- Blur curves smooth
|
|
- Glitch timing Perfect
|
|
- Music transitions seamless
|
|
- Text readable
|
|
|
|
---
|
|
|
|
**Document Status:** ✅ Complete Design
|
|
**Ready For:** Agent Implementation
|
|
**Next Phase:** Asset Generation → IntroScene Coding
|
|
|
|
*Created by: David "HIPO" Kotnik*
|
|
*Hipodevil666 Studios™*
|
|
*"From colors to darkness - Kai's journey begins"* 🎬🛹💜
|