PIXI 在场景中无限移动精灵（显示在顶部和隐藏在底部）

Question

有从上到下不断移动的精灵“绿色块”并且它有效。是否有可能在顶部显示像“围绕”舞台表演一样移动的精灵，就像隐藏在底部一样。我不知道如何调用这种效果，但我的意思是当绿色块开始向下移动场景边界时，然后再次开始在顶部显示它。如何做到这一点，请您展示如何做到这一点？const WIDTH = 500;const HEIGHT = 500;const app = new PIXI.Application({     width: WIDTH,    height: HEIGHT,    backgroundColor: 0x000000 });document.body.appendChild(app.view);const sprite = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');sprite.width = 100;sprite.height = 100;// Centersprite.anchor.set(0.5);sprite.x = app.screen.width / 2;sprite.y = app.screen.height / 2;app.stage.addChild(sprite);// Listen for animate updateapp.ticker.add((delta) => {    // Move from topto bottom    sprite.position.y += delta * 2;    if (sprite.position.y > HEIGHT + sprite.height / 2) {        sprite.position.y = -sprite.height / 2;    }});<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>@Blindman67 提供的解决方案（闪烁）：const WIDTH = 500;const HEIGHT = 500;const app = new PIXI.Application({     width: WIDTH,    height: HEIGHT,    backgroundColor: 0x000000 });document.body.appendChild(app.view);const sprite = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');const spriteReverse = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');sprite.width = 100;sprite.height = 100;spriteReverse.width = 100;spriteReverse.height = 100;// Centersprite.anchor.set(0.5);sprite.x = app.screen.width / 2;sprite.y = app.screen.height / 2;spriteReverse.anchor.set(0.5);spriteReverse.x = app.screen.width / 2;spriteReverse.y = app.screen.height / 2;app.stage.addChild(sprite);app.stage.addChild(spriteReverse);let y = 0;// Euqlidian moduloconst modAbs = (value, modulo) => (value % modulo + modulo) % modulo;// Listen for animate updateapp.ticker.add((delta) => {    // Move from topto bottom    y += delta * 2;    if (y > HEIGHT + sprite.height / 2) {        y = -sprite.height / 2;    }

Answer 1

如果我理解你的话：你有一个盒子，你希望它从上到下无限循环移动。一旦它触及底部，它应该开始显示在顶部。

我能想到的最简单的方法是有两个相同的盒子。两者都从顶部开始，只有一个向下移动。一旦它到达底部，另一个盒子就可以开始向下移动。当第一个框完全离开屏幕时，您可以重置它的位置。并重复。

Answer 2

%余数运算符

这可以使用余数运算符来完成%

例如，如果屏幕为 1000 像素宽，而坐标为 1500，则表示对象绕屏幕弯曲了 1.5 倍，使用余数运算符1500 % 1000 = 500。

如果只是朝正方向移动，那么这就是所需要的（除了弹出）

 x = x % screenWidth; 
 // and/or for y
 y = y % screenHeight;

负空间

但是，如果对象向另一个方向移动，则会出现问题，因为余数运算会保留数字的符号-1500 % 1000 === -500，更糟糕的是，如果您Math.abs对结果使用，您仍然会得到错误的值，Math.abs(-1200 % 1000) === 200该值应该是 800

您可以使用稍微复杂一点的函数来解决这个问题。您可以将它添加到Math对象或使用如下的独立函数。

 const modAbs = (value, modulo) => (value % modulo + modulo) % modulo;

使用上述函数，负值可以正确地移动到正空间中。

所以如果你有一个坐标 x, y 让它扭曲屏幕

x = modAbs(x, screenWidth);
y = modAbs(y, screenHeight);

这接缝很容易，但不幸的是还有一些问题需要克服。

弹出

使用上面的函数在屏幕上变形不考虑精灵的大小，并且因为当精灵穿过运动场边缘时你只渲染一个副本，它不会出现在另一边，直到坐标穿过边缘。

这会导致精灵根据移动方向和精灵原点的位置弹出或弹出。

有两种解决方法。

扩大比赛场地

如果您使游戏区域比视图（可视区域）大 2 倍于 sprite 的大小，并使用更大的游戏区域进行变形，则精灵在完全从视图中消失之前不会变形。这可以防止变形时丑陋的东西突然出现和突然出现，并且最适合 NPC 类型的精灵。对于玩家（专注的）精灵，这不是一个好的选择，因为精灵在穿过屏幕边缘时不会完全可见。

渲染额外的副本。

为了让精灵始终完全可见，您需要在它穿过屏幕时多次渲染它。示例伪代码

// use modulo to warp

 x = modAbs(x, screenWidth);

 // check if sprite overlaps the screen edge

 if (x + spriteWidth > screenWidth) {   // is crossing then

      drawSprite(x - screenWidth, // ...   draw a copy at opposite edge.

如果您只是在顶部和底部（或左侧和右侧）之间变形，这就是所需要的。

如果你在所有方向上变形，你将需要渲染 sprite 最多 4 次。穿过上下或左右时两次。如果在拐角处穿过 4 次。

由于您的问题仅表示上下扭曲，因此我认为您不需要额外的代码。