混合模式

简介

const gl = this.sys.game.renderer.gl;
const renderer = this.sys.game.renderer;

const modeIndex = renderer.addBlendMode([ gl.ZERO, gl.SRC_COLOR ], gl.FUNC_ADD);
func: 包含分别用于源和目标混合因子的 WebGL 函数的数组

equation: 用于将新像素的 RGB 和 alpha 分量与渲染像素相结合的方程式

1 .为渲染器创建新的自定义混合模式
2 .func 参数:A是下面的混合元素，B是上面的混合元素

1 .ZERO: 传递给 A 或 B 以关闭分量
2 .ONE: 传递给 A 或 B 以打开分量
3 .SRC_COLOR:传递给 A 或 B 以将分量乘以源元素颜色分量
4 .其余变量 https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Constants

另一种写法

1 .https://photonstorm.github.io/phaser3-docs/Phaser.BlendModes.html

this.add.image(400, 300, 'bg');
const image = this.add.image(x, y, 'particle');
image.setBlendMode(Phaser.BlendModes.ERASE)
//一行代码就能实现效果，这种方式和上面的有啥差别呢

混合模式实现水乳交融效果

1 .实现关键，混合模式要是Phaser.BlendModes.ADD，粒子的位置要运动起来
2 .单独的粒子是很正常的图片

1685780601238.png

//这么简单的图片，实现了右边有点炫酷的画面

create ()
    {
        this.add.image(400, 300, 'bg');

        //  Create the particles
        for (var i = 0; i < 300; i++)
        {
            var x = Phaser.Math.Between(-64, 800);
            var y = Phaser.Math.Between(-64, 600);

            var image = this.add.image(x, y, 'particle');
            image.setBlendMode(Phaser.BlendModes.ADD);

            sprites.push({ s: image, r: 2 + Math.random() * 5 });
        }
    }

    update ()
    {
        for (var i = 0; i < sprites.length; i++)
        {
            var sprite = sprites[i].s;

            sprite.y -= sprites[i].r;

            if (sprite.y < -256)
            {
                sprite.y = 700;
            }
        }
    }