如何在ES6项目中正常使用Phaser3的GlowFilterPostFx发光插件

解决方案 #

首先安装依赖：
npm install phaser phaser3-rex-plugins

方案1：直接使用管道（无需插件注册，更简单）

核心问题修复：Phaser的自定义着色器效果仅支持WebGL渲染模式，你之前使用的CANVAS模式是无效果的核心原因。

import Phaser from 'phaser'
import GlowFilterPostFx from 'phaser3-rex-plugins/plugins/glowfilterpipeline.js'

new Phaser.Game({
    // 必须用WEBGL模式，CANVAS不支持自定义着色器管道
    type: Phaser.WEBGL,
    width: 550, 
    height: 400,
    scene: [SceneWithGlow],
    pipeline: { GlowFilterPostFx }
})

class SceneWithGlow extends Phaser.Scene {
    preload() {
        this.load.image('shroom', '/shroom.png')
    }

    create() {
        let shroom = this.add.image(100, 100, 'shroom')
        // 给单个对象绑定发光管道，传入配置参数
        shroom.setPostPipeline(GlowFilterPostFx, {
            intensity: 3, // 默认强度极低，调到2-5才有肉眼可见效果
            color: 0xffff00, // 自定义发光颜色
            thickness: 4 // 发光边缘厚度
        })
    }
}

方案2：插件模式

你之前的错误是把场景级插件注册成了全局插件，修正后代码如下：

import Phaser from 'phaser'
import GlowFilterPipelinePlugin from 'phaser3-rex-plugins/plugins/glowfilterpipeline-plugin.js'

new Phaser.Game({
    type: Phaser.WEBGL,
    width: 550, 
    height: 400,
    scene: [SceneWithGlow],
    plugins: {
        // 该插件为场景级，注册在scene字段下
        scene: [{
            key: 'rexGlowFilterPostFx',
            plugin: GlowFilterPipelinePlugin,
            mapping: 'glowFilter'
        }]
    }
})

class SceneWithGlow extends Phaser.Scene {
    preload() {
        this.load.image('shroom', '/shroom.png')
    }

    create() {
        let shroom = this.add.image(100, 100, 'shroom')
        this.glowFilter.add(shroom, {
            intensity: 3,
            color: 0xff00ff,
            thickness: 4
        })
    }
}

两种方案所有依赖均在本地打包，不需要运行时下载任何额外代码，可直接使用。

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