Phaser 2.7中应用模糊滤镜报错，求正确实现方法及通用滤镜用法

你遇到的报错c.Filter[a] is not a constructor，原因是**game.add.filter()并非用于创建Phaser内置滤镜**——这个方法是加载自定义GLSL着色器滤镜的接口，而内置的模糊滤镜需要直接实例化对应的类。

正确步骤与示例代码 #

Phaser 2.7的内置滤镜位于Phaser.Filter命名空间下，BlurY、BlurX这类模糊滤镜可以直接通过构造函数实例化：

// 初始化游戏
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });

function preload() {
    // 加载你的精灵资源（替换为实际路径）
    game.load.image('exampleSprite', 'path/to/your/image.png');
}

function create() {
    // 创建目标精灵
    var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'exampleSprite');
    sprite.anchor.set(0.5);

    // 1. 创建垂直模糊滤镜
    var blurYFilter = new Phaser.Filter.BlurY(game);
    blurYFilter.blur = 20; // 设置模糊强度（值越大模糊越明显）

    // 2. 将滤镜应用到精灵
    sprite.filters = [blurYFilter];
}

同时应用水平+垂直模糊 #

如果需要全方向模糊，可以同时实例化BlurX和BlurY滤镜并组合使用：

function create() {
    var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'exampleSprite');
    sprite.anchor.set(0.5);

    var blurXFilter = new Phaser.Filter.BlurX(game);
    blurXFilter.blur = 20;

    var blurYFilter = new Phaser.Filter.BlurY(game);
    blurYFilter.blur = 20;

    // 按顺序应用两个滤镜
    sprite.filters = [blurXFilter, blurYFilter];
}

注意事项 #

• Phaser 2.7的内置滤镜还包含灰度（Phaser.Filter.Gray）、反转（Phaser.Filter.Invert）等，都遵循相同的实例化方式。
• 如果需要自定义滤镜，才使用game.add.filter()加载外部着色器文件，此时需要传入滤镜名称和着色器参数。

内容的提问来源于stack exchange，提问作者Haider Mansoor