时间戳

首页 > 解决方案 > 修复了 Matter.js 世界中的背景

matter.js - 修复了 Matter.js 世界中的背景

问题描述

我正在寻找一种方法来设置固定到世界的背景。在我的例子中，Render.lookAt目标是一个移动的身体，我需要在它后面显示一个 fiexd 网格来增强身体的运动。那可能吗？

标签： matter.js

解决方案

最好的方法是在世界中创建一个带有背景精灵的主体。
你可以这样做：

var gridBackground = Bodies.rectangle(0, 0, 1, 1, {
    isStatic: true,
    isSensor: true,
    render: {
        sprite: {
            texture: "Path/To/Image.png",
            xScale: neededScale,
            yScale: neededScale
        }
    }
});
World.add(world, gridBackground);

如果您的世界是无限的，您还可以在 css 中将网格用作background-imagebody/canvas 上的 a 并将其沿玩家移动的相反方向移动：

Matter.Events.on(engine, "beforeupdate", function() {
    var x = player.position.x * -1;
    var y = player.position.y * -1;
    Matter.Render.lookAt(render, {
        min: {y:y-FoV/2, x:x-FoV/2},
        max: {y:y+FoV/2, x:x+FoV/2},
    });
});

推荐阅读