Phaser3中的发光效果？答案

【问题标题】：Glow effect in Phaser3?Phaser3中的发光效果？
【发布时间】：2018-10-23 07:51:29
【问题描述】：

有人知道如何在 Phaser3 中为精灵添加简单的发光效果吗？我在 Phaser2 中看到了一些示例，但无法找到 Phaser3 的任何内容。

提前致谢！

【问题讨论】：

【解决方案1】：

我能找到的唯一Phaser 2 发光效果是https://codepen.io/Samid737/pen/ZyPvya，它为https://gist.github.com/MatthewBarker/032c325ef8577c6d0188 添加了一个时间组件。相关位是片段：

this.fragmentSrc = [
    'precision lowp float;',
    'varying vec2 vTextureCoord;',
    'varying vec4 vColor;',
    'uniform sampler2D uSampler;',
    'uniform float alpha;',
    'uniform float time;',
    'void main() {',
        'vec4 sum = vec4(0);',
        'vec2 texcoord = vTextureCoord;',
        'for(int xx = -4; xx <= 4; xx++) {',
            'for(int yy = -4; yy <= 4; yy++) {',
                'float dist = sqrt(float(xx*xx) + float(yy*yy));',
                'float factor = 0.0;',
                'if (dist == 0.0) {',
                    'factor = 2.0;',
                '} else {',
                    'factor = 2.0/abs(float(dist));',
                '}',
                'sum += texture2D(uSampler, texcoord + vec2(xx, yy) * 0.002) * (abs(sin(time))+0.06);',
            '}',
        '}',
        'gl_FragColor = sum * 0.025 + texture2D(uSampler, texcoord)*alpha;',
    '}'
];

Phaser 3 只需要更新其中的一些。使用官方custom pipeline labs example：

var CustomPipeline = new Phaser.Class({
    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
    initialize:
    function CustomPipeline (game)
    {
    Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
            game: game,
            renderer: game.renderer,
            fragShader: [
                'precision lowp float;',
                'varying vec2 outTexCoord;',
                'varying vec4 outTint;',
                'uniform sampler2D uMainSampler;',
                'uniform float alpha;',
                'uniform float time;',
                'void main() {',
                    'vec4 sum = vec4(0);',
                    'vec2 texcoord = outTexCoord;',
                    'for(int xx = -4; xx <= 4; xx++) {',
                        'for(int yy = -4; yy <= 4; yy++) {',
                            'float dist = sqrt(float(xx*xx) + float(yy*yy));',
                            'float factor = 0.0;',
                            'if (dist == 0.0) {',
                                'factor = 2.0;',
                            '} else {',
                                'factor = 2.0/abs(float(dist));',
                            '}',
                            'sum += texture2D(uMainSampler, texcoord + vec2(xx, yy) * 0.002) * (abs(sin(time))+0.06);',
                        '}',
                    '}',
                    'gl_FragColor = sum * 0.025 + texture2D(uMainSampler, texcoord)*alpha;',
                '}'
            ].join('\n')
        });
    } 
});

然后你可以加载它并将其分配给精灵：

function preload() {
    this.load.image('logo', 'assets/Phaser-Logo-Small.png');
    this.load.image('dude', 'assets/phaser-dude.png');

    customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
    customPipeline.setFloat1('alpha', 1.0);
}

function create() {

    this.add.sprite(500, 300, 'logo').setPipeline('Custom');
    this.add.sprite(50, 50, 'dude').setPipeline('Custom');
}

var time = 0.0;

function update()
{
    customPipeline.setFloat1('time', time);
    time += 0.05;
}

【讨论】：

詹姆斯，非常感谢您抽出宝贵时间回复！我只是玩了一下这个，看起来我可以让它为我工作。谢谢！
乐于助人。 :)
感谢您提供 Phaser 3 示例！
提供的CustomPipeline 在今天的Phaser 3 中似乎不再起作用。（我在实验室的示例中尝试过，它只是使精灵变暗）
@Telokis 你确定你更新了所有的位吗？如果您使用实验室示例作为基础，则需要更新 CustomPipeline 创建、preload() 和 update()。我只是能够获得弹跳发光效果。