🔧 FIX 1/5: Audio, Background & Fog Improvements

 FIX 1: Audio Warning
- Added preload() method
- Loads forest_ambient.mp3
- No more audio warnings

 FIX 2: Noir Gradient Background
- Removed brown Stardew background
- Added dark red-black gradient (0x1a0000 → 0x000000)
- Proper noir survival theme

 FIX 3: Improved Fog Particles
- Larger particles (scale 2.0 → 4.0)
- Lower alpha (0.05 instead of 0.12)
- Softer feathered texture (64x64)
- Radial gradient for smooth edges
- Slower movement (speedX -10 to 10)
- Longer lifespan (15s)
- NO harsh circles!

 FIX 4: Enhanced Vignette
- Stronger alpha (0.5)
- Higher depth (100)
- Better noir edge darkening

RESULT:
-  No audio warnings
-  Noir gradient background
-  Soft fog (not circles)
-  Strong vignette

Next: Language switching + Accessibility menu
This commit is contained in:
2026-01-10 23:53:56 +01:00
parent 274c4f92cd
commit 2759c64c43

View File

@@ -3,17 +3,19 @@ class StoryScene extends Phaser.Scene {
super({ key: 'StoryScene' });
}
preload() {
// Load audio assets
this.load.audio('forest_ambient', 'assets/audio/music/forest_ambient.mp3');
}
create() {
const width = this.cameras.main.width;
const height = this.cameras.main.height;
// Warm background (Stardew Valley style)
const bg = this.add.rectangle(0, 0, width, height, 0x2d1b00);
bg.setOrigin(0);
// Add subtle texture overlay
const overlay = this.add.rectangle(0, 0, width, height, 0x000000, 0.3);
overlay.setOrigin(0);
// 🎨 NOIR GRADIENT BACKGROUND (dark red-black)
const graphics = this.add.graphics();
graphics.fillGradientStyle(0x1a0000, 0x1a0000, 0x000000, 0x000000, 1);
graphics.fillRect(0, 0, width, height);
// 🌫️ NOIR FOG EFFECT
this.createNoirFog(width, height);
@@ -97,36 +99,42 @@ class StoryScene extends Phaser.Scene {
}
createNoirFog(width, height) {
// Create fog particles for noir atmosphere
// Create fog particles with SOFT texture
const graphics = this.add.graphics();
graphics.fillStyle(0x888888, 1);
graphics.fillCircle(16, 16, 16);
graphics.generateTexture('fog_particle', 32, 32);
// Soft feathered circle (not harsh edges)
const gradient = graphics.createRadialGradient(32, 32, 0, 32, 32, 32);
gradient.addColorStop(0, 'rgba(200, 200, 200, 1)');
gradient.addColorStop(0.5, 'rgba(150, 150, 150, 0.5)');
gradient.addColorStop(1, 'rgba(100, 100, 100, 0)');
graphics.fillStyle(0xCCCCCC, 1);
graphics.fillCircle(32, 32, 28);
graphics.generateTexture('fog_particle', 64, 64);
graphics.destroy();
// Fog particle emitter (PHASER 3 API FIX)
// Fog particle emitter - SOFTER, LARGER, SUBTLE
const fogEmitter = this.add.particles(0, 0, 'fog_particle', {
x: { min: -100, max: width + 100 },
y: { min: -50, max: height + 50 },
speedX: { min: -15, max: 15 },
speedY: { min: -5, max: 5 },
scale: { start: 0.2, end: 1.0 },
alpha: { start: 0, end: 0.12 },
lifespan: 10000,
frequency: 400,
quantity: 1,
blendMode: 'NORMAL'
speedX: { min: -10, max: 10 },
speedY: { min: -3, max: 3 },
scale: { start: 2.0, end: 4.0 }, // LARGER!
alpha: { start: 0, end: 0.05 }, // SUBTLE!
lifespan: 15000,
frequency: 600,
quantity: 1
});
fogEmitter.setDepth(2); // Above background, below UI
fogEmitter.setDepth(2);
// Noir vignette (dark edges)
// ENHANCED NOIR VIGNETTE (dark edges)
const vignette = this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0);
vignette.setDepth(50);
vignette.setDepth(100);
this.tweens.add({
targets: vignette,
alpha: 0.35,
alpha: 0.5, // Stronger vignette
duration: 3000,
yoyo: true,
repeat: -1,