🔧 FOG FINAL FIX - Simple Phaser Graphics!

PROBLEM:
- canvas.context errors
- createRadialGradient issues

SOLUTION:
- Use this.make.graphics() 
- Simple fillCircle 
- generateTexture 
- NO canvas context needed!

CHANGES:
- Removed: canvas.createCanvas, ctx.createRadialGradient
- Added: this.make.graphics({ add: false })
- Simple white circle texture
- Proper destroy() cleanup

FOG SETTINGS:
- Scale: 2 → 6 (grows larger)
- Alpha: 0.05 → 0 (very subtle!)
- Lifespan: 8000ms
- Speed: 5-20 (slow drift)
- Frequency: 300ms

 NO CANVAS ERRORS!
 PHASER BUILT-IN METHOD!
 SIMPLE & STABLE!

READY TO TEST!
This commit is contained in:
2026-01-11 00:16:55 +01:00
parent 593ececf1d
commit d258549c0b

View File

@@ -106,33 +106,26 @@ class StoryScene extends Phaser.Scene {
}
createNoirFog(width, height) {
// Create fog texture with CANVAS gradient (proper way!)
const canvas = this.textures.createCanvas('fogTexture', 64, 64);
const ctx = canvas.context;
const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 64, 64);
canvas.refresh();
// Simple white circle for fog (PHASER BUILT-IN - NO CANVAS ERRORS!)
const graphics = this.make.graphics({ x: 0, y: 0, add: false });
graphics.fillStyle(0xffffff, 1);
graphics.fillCircle(32, 32, 32);
graphics.generateTexture('fogParticle', 64, 64);
graphics.destroy();
// Fog particle emitter - SOFT, LARGE, SUBTLE
const fogEmitter = this.add.particles(0, 0, 'fogTexture', {
// Fog particle emitter - SIMPLE & WORKING
this.add.particles(0, 0, 'fogParticle', {
x: { min: 0, max: width },
y: { min: 0, max: height },
speedX: { min: -10, max: 10 },
speedY: { min: -3, max: 3 },
scale: { start: 2.0, end: 5.0 },
alpha: { start: 0.1, end: 0 },
lifespan: 6000,
speed: { min: 10, max: 30 },
frequency: 200,
scale: { start: 2, end: 6 },
alpha: { start: 0.05, end: 0 },
lifespan: 8000,
speed: { min: 5, max: 20 },
frequency: 300,
blendMode: 'NORMAL'
});
fogEmitter.setDepth(2);
// ENHANCED NOIR VIGNETTE (dark edges)
// NOIR VIGNETTE (dark edges)
const vignette = this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0);
vignette.setDepth(100);