javascript - 如何在 Matter.js 中模糊单个对象？

Question

我正在尝试在 Matter.js 中为游戏创建火焰效果，我需要模糊一个圆圈以使其看起来更逼真。但是，我需要让它只模糊火焰，而不是整个画布。我怎样才能做到这一点？

这是我到目前为止的代码：

function setOnFire(object) {
    var fireX = object.position.x;
    var fireY = object.position.y;
    var fire = Bodies.circle(fireX, fireY, vw*1, {
        isStatic: true,
        render: {
            fillStyle: "rgba(255,130,0,1)"
        }
    });
    World.add(world, fire);
}

Answer 1

这不完全是我的想法，但它已经尽可能接近了。

首先转到 matter.js 并转到此部分：

 for (k = body.parts.length > 1 ? 1 : 0; k < body.parts.length; k++) {
     part = body.parts[k];

     if (!part.render.visible)
         continue;

在后面添加这段代码continue;：

if (body.bloom) {
    c.shadowColor = body.render.fillStyle;
    c.shadowOffsetX = 0;
    c.shadowOffsetY = 0;
    c.shadowBlur = body.bloom;
}

然后，转到循环的最后并添加以下内容：

if (body.bloom) {
    c.shadowColor = "transparent";
    c.shadowOffsetX = 0;
    c.shadowOffsetY = 0;
    c.shadowBlur = 0;
}

然后，在制作身体的同时添加花朵。例如：

let fireParticle = Bodies.circle(0, 0, {
    bloom: 25
});