davidkotnik/novafarma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 FOG FINAL FIX - Simple Phaser Graphics!

Browse Source 
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:
David Kotnik
2026-01-11 00:16:55 +01:00
parent 593ececf1d
commit d258549c0b
1 changed files with 14 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/scenes/StoryScene.js
View File

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