🔧 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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user