如何模糊 Matter.js 中的单个对象？

Question

我正在尝试为 Matter.js 中的游戏创建火焰效果，我需要模糊一个圆圈以使其看起来更逼真。然而，我需要让它只模糊火焰，而不是整个 canvas。我该怎么做？

这是我目前的代码：

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

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

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

如何模糊 Matter.js 中的单个对象？

How do you blur a single object in Matter.js?

javascript

canvas

matter.js