javascript - Phaser3 中的发光效果？

Question

有人知道如何在 Phaser 3 中为 Sprite 添加简单的发光效果吗？我在 Phaser 2 中看到了一些示例，但没能找到 Phaser3 的任何示例。

提前致谢!

Answer 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')
        });
    } 
});

然后你可以加载它并将它分配给 Sprite :

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;
}