9.6 KiB
🌫️ LAUNCHER VIBE UPDATE - Noir Atmosphere Implementation
Date: January 10, 2026 23:10 CET
Purpose: Enhance main menu with noir atmosphere, fix save system, add gamepad navigation
File: StoryScene.js
🎯 CHANGES TO IMPLEMENT
1. 🎵 NOIR BACKGROUND MUSIC
Current: No music
New: forest_evening.wav (reinsamba - Freesound)
Implementation:
// In create()
// Add noir forest ambience
audioManager.init(this);
audioManager.playMusic('forest', {
volume: 0.3, // 30% volume (quiet background)
loop: true
});
Music Details:
- File: evening in the forest.wav
- Author: reinsamba
- Link: https://freesound.org/s/18765/
- License: CC BY 4.0
- Vibe: Dark, mysterious, survival noir
2. 🌫️ FOG SHADER ANIMATION
Current: Static brown background
New: Animated noir fog effect
Implementation:
// Fog particles system
const fogParticles = this.add.particles('fog_particle'); // Create small gray circle sprite
const fogEmitter = fogParticles.createEmitter({
x: { min: -100, max: width + 100 },
y: { min: -100, max: height + 100 },
speedX: { min: -20, max: 20 },
speedY: { min: -10, max: 10 },
scale: { start: 0.3, end: 1.5 },
alpha: { start: 0, end: 0.15, ease: 'Sine.easeIn' },
lifespan: 8000,
frequency: 300,
quantity: 1,
blendMode: 'NORMAL'
});
fogEmitter.setDepth(5); // Above background, below buttons
Alternative (Shader):
// Noir vignette filter
const vignette = this.add.rectangle(0, 0, width, height, 0x000000, 0);
vignette.setOrigin(0);
vignette.setDepth(100);
// Radial gradient effect (darker edges)
this.tweens.add({
targets: vignette,
alpha: 0.4,
duration: 2000,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});
3. 💾 SAVE SYSTEM FIX
Current Issue: FILE_NOT_FOUND error
Root Cause: LOAD GAME button not connected to SaveLoadSystem
Fix Implementation:
loadGame() {
console.log('📁 Loading Game...');
// Import SaveLoadSystem
import('./systems/SaveLoadSystem.js').then(module => {
const saveLoadSystem = module.default;
// Try to load
const saveData = saveLoadSystem.load();
if (saveData && saveData.player) {
console.log('✅ Save file found!', saveData);
alert(`Save loaded!\nAge: ${saveData.player.current_age}\nMemories: ${saveData.progress.memories_found}/100`);
// Start game with loaded data
this.scene.start('GameScene', { loadedSave: saveData });
} else {
console.log('❌ No save file found');
alert('No save file found!\n\nStart a new game first.');
}
});
}
Console Error Fix:
// In SaveLoadSystem.js - add error handling
load() {
try {
const saved = localStorage.getItem(this.saveKey);
if (!saved) {
console.log('📂 No save file found (this is normal for first time)');
return this.createNewSave();
}
this.currentSave = JSON.parse(saved);
console.log('📂✅ Game loaded successfully');
return this.currentSave;
} catch (e) {
console.error('❌ Load failed:', e);
console.log('🔧 Creating new save instead...');
return this.createNewSave();
}
}
4. 🎮 XBOX CONTROLLER NAVIGATION
Current: Mouse/keyboard only
New: Full gamepad support for menu
Implementation:
create() {
// ... existing code ...
// Initialize gamepad
this.gamepadController = new GamepadController(this);
// Menu navigation state
this.selectedButtonIndex = 0;
this.menuButtons = []; // Store button references
// Highlight first button
this.highlightButton(0);
}
update() {
const input = this.gamepadController.update();
if (!input) return;
// D-Pad or Left Stick up/down
if (input.leftStick.y < -0.5 || input.buttons.DPAD_UP) {
this.navigateUp();
} else if (input.leftStick.y > 0.5 || input.buttons.DPAD_DOWN) {
this.navigateDown();
}
// A button to confirm
if (this.gamepadController.isButtonJustPressed('A')) {
this.confirmSelection();
}
// B button to go back/exit
if (this.gamepadController.isButtonJustPressed('B')) {
this.exitGame();
}
}
navigateUp() {
this.selectedButtonIndex--;
if (this.selectedButtonIndex < 0) {
this.selectedButtonIndex = this.menuButtons.length - 1;
}
this.highlightButton(this.selectedButtonIndex);
}
navigateDown() {
this.selectedButtonIndex++;
if (this.selectedButtonIndex >= this.menuButtons.length) {
this.selectedButtonIndex = 0;
}
this.highlightButton(this.selectedButtonIndex);
}
highlightButton(index) {
// Remove highlight from all buttons
this.menuButtons.forEach((btn, i) => {
if (i === index) {
btn.bg.setFillStyle(0x8b5a3c); // Highlighted
btn.bg.setStrokeStyle(4, 0xf4e4c1); // Bright border
btn.text.setScale(1.05);
} else {
btn.bg.setFillStyle(0x6b4423); // Normal
btn.bg.setStrokeStyle(3, 0xd4a574); // Normal border
btn.text.setScale(1.0);
}
});
}
confirmSelection() {
const selectedBtn = this.menuButtons[this.selectedButtonIndex];
if (selectedBtn && selectedBtn.action) {
selectedBtn.action();
}
}
5. 🐍 PYTHON FIX FOR VOICE GENERATION
Current Issue: python command not found on Mac
Fix: Use python3 instead
Terminal Commands:
# Check Python version
python3 --version
# Generate voices (if you have Edge TTS script)
python3 generate_voices.py --character kai --language en
python3 generate_voices.py --character ana --language en
python3 generate_voices.py --character gronk --language en
If Edge TTS not installed:
# Install Edge TTS
pip3 install edge-tts
# Generate voice (example)
edge-tts \
--voice en-US-ChristopherNeural \
--text "Dad and I. Before everything changed." \
--write-media kai_en_01.mp3
📋 IMPLEMENTATION CHECKLIST
Before Testing:
Save System:
- Import SaveLoadSystem in StoryScene
- Connect LOAD GAME button to saveLoadSystem.load()
- Add error handling for missing saves
- Test save → reload flow
Launcher Vibe:
- Import AudioManager
- Load forest_evening.wav in preload
- Play music at 30% volume in create()
- Add fog particle system OR vignette shader
- Test music loops properly
Python Voices:
- Update scripts to use python3
- Regenerate missing voice files
- Verify all 45 files exist
- Test in-game voice playback
Xbox Control:
- Import GamepadController
- Add update() method
- Implement navigation (up/down)
- Add button highlighting
- Test with Xbox controller
- Test with PS5 controller
🎨 VISUAL ENHANCEMENTS
Fog Effect Options:
Option A: Particle System (Recommended)
- Subtle fog drifting across screen
- Low performance impact
- Easy to customize
Option B: Shader Effect
- Noir vignette (dark edges)
- Atmospheric glow
- Higher visual quality
Option C: Both
- Particles + vignette
- Maximum noir atmosphere
- Slightly higher performance cost
🔊 AUDIO IMPLEMENTATION
Preload Forest Ambience:
// In preload()
this.load.audio('forest_evening', 'assets/audio/sfx/evening_in_the_forest.wav');
Or if using music folder:
this.load.audio('forest_ambience', 'assets/audio/music/forest_ambient.mp3');
Play on Create:
// In create()
if (!this.sys.game.audioManager) {
import('./systems/AudioManager.js').then(module => {
const audioManager = module.default;
this.sys.game.audioManager = audioManager;
audioManager.init(this);
audioManager.playMusic('forest', { volume: 0.3, loop: true });
});
} else {
this.sys.game.audioManager.init(this);
this.sys.game.audioManager.playMusic('forest', { volume: 0.3, loop: true });
}
🎯 EXPECTED RESULTS
After Implementation:
Visual:
- ✅ Subtle fog drifting across menu
- ✅ Noir vignette effect
- ✅ Atmospheric dark theme
- ✅ Highlighted button for gamepad
Audio:
- ✅ Forest evening ambience (30% volume)
- ✅ Loops seamlessly
- ✅ Sets noir/survival mood
Functionality:
- ✅ LOAD GAME works (no FILE_NOT_FOUND)
- ✅ Save data displays correctly
- ✅ Xbox controller navigates menu
- ✅ Python3 generates voices
User Experience:
- ✅ Noir survival atmosphere
- ✅ Professional main menu feel
- ✅ Accessible (keyboard + mouse + gamepad)
- ✅ Immersive from first screen
🚀 PRIORITY ORDER
CRITICAL (Do First):
- Fix Save/Load connection ✅
- Add forest ambience music ✅
- Test gamepad navigation ✅
IMPORTANT (Do Next):
- Add fog/vignette effect ✅
- Python3 voice generation ✅
POLISH (Do Later):
- Fine-tune fog opacity
- Add sound effects for menu clicks
- Polish gamepad button highlights
📝 NOTES
Language Support:
- Already has: 🇸🇮 🇬🇧 🇩🇪 🇮🇹 🇨🇳
- Excellent for reach!
- LocalizationSystem implemented ✅
Accessibility Icon:
- Already visible (top-right)
- Links to accessibility menu ✅
Version Display:
- Shows "v0.9.0 ALPHA" ✅
- Update to "v0.95 ALPHA" before demo launch
END OF IMPLEMENTATION GUIDE
Ready to transform the launcher into a noir masterpiece! 🌫️🎮💎