Phaser游戏引擎中PostFX模糊效果与遮罩的窗口缩放问题解析

问题背景

在Phaser游戏引擎中，开发者经常使用PostFX管道来实现各种视觉效果，其中模糊效果(Blur)是常见的一种。然而，当结合遮罩(Mask)使用并在窗口缩放时，开发者可能会遇到一个棘手的问题：模糊效果的位置和比例会与原始图形不同步。

问题现象

具体表现为：

1. 创建一个基于Graphics绘制的多边形作为遮罩
2. 将该遮罩应用到黑色覆盖层上
3. 为覆盖层添加模糊PostFX效果
4. 当窗口缩放时，Graphics绘制的遮罩本身能正确缩放，但模糊效果却保持原样或出现错位

技术分析

这个问题的根源在于Phaser的PostFX管道系统在窗口缩放时没有正确更新分辨率相关的uniform变量。在WebGL渲染中，模糊效果通常需要知道当前渲染目标的分辨率来计算正确的采样偏移量。

在Phaser 3.80.1版本中，内置的BlurPostFX管道缺少了必要的resize处理逻辑，导致当游戏窗口尺寸变化时，模糊效果仍然使用初始分辨率进行计算，从而产生视觉上的错位。

解决方案

官方修复

Phaser团队在3.85 Beta 2版本中已经修复了这个问题。建议开发者升级到最新版本以获得最佳体验。

自定义解决方案

对于暂时无法升级的项目，可以创建自定义的模糊PostFX管道：

const fragShader = `
#define SHADER_NAME BLUR_FS

precision mediump float;

varying vec2 outTexCoord;
uniform sampler2D uMainSampler;
uniform vec2 iResolution;

void main()
{
    vec2 uv = outTexCoord;
    const int radius = 10;
    const float pi = 3.1415926;
    const float sigma = 5.;
    
    vec4 gaussSum = vec4(0.);
    
    for(int x = -radius; x <= radius; x++){
      for(int y = -radius; y <= radius; y++){
        vec2 newUV = uv + vec2(x, y) / iResolution.xy;
        gaussSum += texture2D(uMainSampler, newUV) * 
                   (exp(-(pow(float(x), 2.) + pow(float(y), 2.)) / 
                   (2. * pow(sigma, 2.))) / (2. * pi * pow(sigma, 2.)));
      }   
    }
    
    gl_FragColor = vec4(gaussSum);
}
`;

class CustomBlurPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
  constructor(game) {
    super({
      game,
      renderTarget: true,
      fragShader,
      uniforms: ['uMainSampler', 'iResolution']
    });
  }

  onPreRender() {
    this.set2f('iResolution', this.renderer.width, this.renderer.height);
  }

  resize(width, height) {
    this.set2f('iResolution', width, height);
  }
}

使用方式：

1. 在场景初始化时添加管道：

this.renderer.pipelines.addPostPipeline('CustomBlur', CustomBlurPostFX);

2. 应用到游戏对象：

yourGameObject.setPostPipeline('CustomBlur');

3. 处理窗口缩放事件：

this.renderer.on('resize', () => {
  yourGameObject.postFX.clear();
  yourGameObject.setPostPipeline('CustomBlur');
});

技术原理详解

这个问题的本质在于WebGL着色器中的坐标系统处理。模糊效果通常需要基于屏幕空间坐标进行采样，而采样偏移量应该与当前分辨率成反比。

在自定义解决方案中，我们：

1. 通过iResolution uniform传递当前分辨率
2. 在着色器中使用分辨率来计算正确的采样偏移
3. 确保在窗口缩放时及时更新分辨率值
4. 高斯模糊算法考虑了像素距离和标准差(sigma)的影响

性能优化建议

1. 降低模糊半径(radius)可以显著提高性能
2. 考虑使用分离式模糊(先水平后垂直)来减少采样次数
3. 对于静态模糊效果，可以预渲染到纹理
4. 在移动设备上考虑使用更简单的模糊算法

总结

Phaser引擎的PostFX系统虽然强大，但在处理动态分辨率变化时需要注意uniform变量的更新。通过理解WebGL渲染管线和着色器编程的基本原理，开发者可以灵活应对各种视觉效果实现中的挑战。对于模糊效果这类常见的后处理特效，正确管理分辨率相关的参数是确保视觉效果一致性的关键。