From 61d5eb7242ba4b3e4a59943a7459bd3f334a6ce6 Mon Sep 17 00:00:00 2001
From: David Kotnik <hipodevil666@gmail.com>
Date: Sun, 11 Jan 2026 00:05:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20FOG=20FIX=20-=20Canvas=20Gradien?=
 =?UTF-8?q?t=20(No=20More=20Errors!)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEM:
graphics.createRadialGradient() doesn't exist in Phaser
Error on launch

SOLUTION:
Use proper canvas texture creation:
- this.textures.createCanvas()
- ctx.createRadialGradient() ✅
- canvas.refresh()

CHANGES:
- Removed: graphics.createRadialGradient() ❌
- Added: canvas.context.createRadialGradient() ✅
- Texture name: 'fogTexture'
- Proper radial gradient (white center, transparent edges)

FOG SETTINGS:
- Scale: 2.0 → 5.0 (larger)
- Alpha: 0.1 → 0 (fades out)
- Lifespan: 6000ms
- Speed: 10-30
- Frequency: 200ms
- BlendMode: NORMAL

✅ NO MORE GRADIENT ERRORS!
✅ SOFT FOG TEXTURE!
✅ READY TO TEST!
---
 src/scenes/StoryScene.js | 43 +++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/scenes/StoryScene.js b/src/scenes/StoryScene.js
index 181f2b4a9..5247ebca9 100644
--- a/src/scenes/StoryScene.js
+++ b/src/scenes/StoryScene.js
@@ -102,31 +102,28 @@ class StoryScene extends Phaser.Scene {
     }
 
     createNoirFog(width, height) {
-        // Create fog particles with SOFT texture
-        const graphics = this.add.graphics();
+        // 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();
 
-        // 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 - SOFTER, LARGER, SUBTLE
-        const fogEmitter = this.add.particles(0, 0, 'fog_particle', {
-            x: { min: -100, max: width + 100 },
-            y: { min: -50, max: height + 50 },
+        // Fog particle emitter - SOFT, LARGE, SUBTLE
+        const fogEmitter = this.add.particles(0, 0, 'fogTexture', {
+            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: 4.0 }, // LARGER!
-            alpha: { start: 0, end: 0.05 }, // SUBTLE!
-            lifespan: 15000,
-            frequency: 600,
-            quantity: 1
+            scale: { start: 2.0, end: 5.0 },
+            alpha: { start: 0.1, end: 0 },
+            lifespan: 6000,
+            speed: { min: 10, max: 30 },
+            frequency: 200,
+            blendMode: 'NORMAL'
         });
 
         fogEmitter.setDepth(2);
@@ -137,7 +134,7 @@ class StoryScene extends Phaser.Scene {
 
         this.tweens.add({
             targets: vignette,
-            alpha: 0.5, // Stronger vignette
+            alpha: 0.5,
             duration: 3000,
             yoyo: true,
             repeat: -1,