Question

有人知道如何在Phaser3中为精灵添加简单的发光效果吗？我已经在Phaser2中看到了一些示例，但没有为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')
        });
    } 
});

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

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

Phaser3的发光效果？

1 个答案: