Skip to content

Webpack with enabled optimization breaks masking #7101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tombabcode opened this issue Apr 4, 2025 · 1 comment
Open

Webpack with enabled optimization breaks masking #7101

tombabcode opened this issue Apr 4, 2025 · 1 comment

Comments

@tombabcode
Copy link

Version

  • Phaser Version: 3.88.2
  • Webpack Version: 5.98.0
  • Operating system: Windows

Description

Webpack with optimization / minimize enabled breaks masking.

Example Test Code

// Black overlay
const graphics = scene.add.graphics();
graphics.fillStyle(0x000000, 0.8);
graphics.fillRect(0, 0, 800, 600);

// Objects for mask
const data = scene.add.graphics();
data.fillStyle(0x000000);
data.setVisible(false);

// Mask
const mask = data.createGeometryMask();
mask.invertAlpha = true;
    
// Set mask
graphics.setMask(mask);

// Some kind of loop
loop() {
    data.clear();
    data.fillRect(100, 100, 200, 200);
}

This code works fine on local production environment, but after running production version via webpack with enabled optimization, whole screen is filled with graphics (0x000000, 0.8) only - mask doesn't work. Disabling optimization fixes the issue:

// webpack.config.js
optimization: {
    minimize: false
}

Optimization / minimize: false
Image

Optimization / minimize: true
Image

@samme
Copy link
Contributor

samme commented Apr 6, 2025

Can you make a sandbox?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants