PIXI实现精灵上下无缝环绕舞台滚动效果

我来帮你搞定这个上下无缝滚动的问题！原代码直接重置精灵位置的方式会出现明显的跳转断层，而之前的双精灵方案出现闪烁，主要是因为精灵可见性切换和位置计算的时机没处理好，导致帧渲染时出现短暂的视觉空白。

核心实现思路 #

• 使用两个完全相同的精灵组成滚动队列，让它们始终保持上下衔接的位置
• 同步移动两个精灵，当其中一个完全移出舞台范围时，立刻将它重新定位到另一个精灵的正对面（比如下方精灵移出底部，就把它放到上方精灵的正上方）
• 全程不需要切换精灵可见性，通过持续的位置循环保证视觉上的无缝衔接

修正后的完整代码 #

const WIDTH = 500;
const HEIGHT = 500;
const app = new PIXI.Application({ 
    width: WIDTH, 
    height: HEIGHT, 
    backgroundColor: 0x000000 
});
document.body.appendChild(app.view);

// 创建两个完全相同的绿色方块精灵
const sprite1 = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');
const sprite2 = PIXI.Sprite.from('https://i.ibb.co/b3Sjn6M/greeenblock.png');

// 设置精灵尺寸和锚点（锚点设为中心方便定位）
const spriteSize = 100;
[sprite1, sprite2].forEach(sprite => {
    sprite.width = spriteSize;
    sprite.height = spriteSize;
    sprite.anchor.set(0.5);
    sprite.x = app.screen.width / 2; // 水平居中
});

// 初始位置：sprite1在屏幕中心，sprite2在sprite1的正上方（刚好衔接）
sprite1.y = app.screen.height / 2;
sprite2.y = sprite1.y - HEIGHT;

// 将两个精灵添加到舞台
app.stage.addChild(sprite1);
app.stage.addChild(sprite2);

// 监听动画帧更新
app.ticker.add((delta) => {
    // 同步移动两个精灵的y坐标（delta保证移动速度稳定）
    const moveSpeed = 2;
    sprite1.y += delta * moveSpeed;
    sprite2.y += delta * moveSpeed;

    // 检查sprite1是否完全移出舞台底部，是的话把它放到sprite2的正上方
    if (sprite1.y > HEIGHT + spriteSize / 2) {
        sprite1.y = sprite2.y - HEIGHT;
    }

    // 检查sprite2是否完全移出舞台底部，是的话把它放到sprite1的正上方
    if (sprite2.y > HEIGHT + spriteSize / 2) {
        sprite2.y = sprite1.y - HEIGHT;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>

关键细节说明 #

• 锚点设置：把精灵锚点设为中心（anchor.set(0.5)），让位置计算更直观，判断移出边界的条件也更清晰
• 位置循环逻辑：当精灵的y坐标超过HEIGHT + spriteSize/2时，说明它已经完全移出舞台底部，此时将它放到另一个精灵的正上方（偏移量为舞台高度HEIGHT，刚好衔接）
• 同步移动：两个精灵保持相同的移动速度，确保始终处于衔接状态，不会出现错位

为什么之前的方案会闪烁？ #

之前的方案通过spriteReverse.visible = false/true来切换精灵显示状态，这种方式在帧渲染过程中可能会出现：某一帧里原精灵已经移出屏幕，而反转精灵还没来得及显示（或者位置计算错误），导致屏幕出现短暂空白，也就是我们看到的闪烁问题。而现在的持续循环移动方案，两个精灵始终处于舞台内或即将进入舞台的位置，完全避免了状态切换带来的视觉断层。

内容的提问来源于stack exchange，提问作者Orbitum