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