如何使用左右渲染的一堆瓷砖渲染无缝拼接精灵

Question

我有一堆精灵要并排渲染。

let sprites = [sprite1, sprite2, sprite3];

sprites.forEach((_, i) => {
    _.position.set(i * _.width, 0);
});

我想沿着tileX变量控制的x轴移动这些精灵。

sprites.forEach((_, i) => {
    _.position.set(tileX + i * _.width, 0);
});

棘手的部分是当精灵到达屏幕的左边缘或右边缘时，我想将其移动到相对边缘，以便再次渲染它。

Answer 1

首先，您需要找到画布或屏幕的大小，例如canvas.clientWidth。然后使用运算符%（模块）找到位置。正如您所说的那样，它可能会到达屏幕的左侧，我认为这个数字可以是负数。在这种情况下，您需要增加屏幕宽度。

var screenWidth = canvas.clientWidth;
var positionX = (tileX + i * _.width) % screenWidth;
if (positionX < 0) positionX += screenWidth;