制作类Mario游戏：连续滚动背景出现空白间隙问题求助

看起来你遇到的问题很典型——背景滚动时露出灰色间隙，核心原因是你只创建了一个背景精灵，没有第二个背景来无缝衔接！你代码里的moveSprite方法循环的是同一个background对象两次，等于重复移动同一个精灵，根本没有真正的第二个背景来填补第一个移出后的空白。

问题分析 #

当单个背景精灵向左移动完全移出屏幕左侧时，场景的默认灰色背景就会露出来，直到这个精灵被重置到右侧，这中间就出现了你看到的间隙。

修复方案 #

我们需要创建两个完全相同的背景精灵，让它们初始时并排排列，当其中一个移出屏幕时，立刻把它放到另一个的右侧，这样就能实现无间隙的连续滚动。

下面是修改后的完整代码：

class GameScene: SKScene {
    let background1 = SKSpriteNode(texture: SKTexture(imageNamed: "background"))
    let background2 = SKSpriteNode(texture: SKTexture(imageNamed: "background"))
    var lastFrameTime: TimeInterval = 0
    var deltaTime: TimeInterval = 0
    
    override func didMove(to view: SKView) {
        // 设置两个背景的缩放和初始位置
        let scale: CGFloat = 0.75
        background1.setScale(scale)
        background2.setScale(scale)
        
        // 第一个背景放在屏幕左侧起点
        background1.position = CGPoint(x: 0, y: 0)
        // 第二个背景放在第一个背景的右侧，刚好衔接（要考虑缩放后的宽度）
        background2.position = CGPoint(x: background1.size.width * scale, y: 0)
        
        self.addChild(background1)
        self.addChild(background2)
    }
    
    override func update(_ currentTime: TimeInterval) {
        if lastFrameTime <= 0 {
            lastFrameTime = currentTime
        }
        deltaTime = currentTime - lastFrameTime
        lastFrameTime = currentTime
        // 传入两个不同的背景精灵
        self.moveSprite(sprite1: background1, sprite2: background2, speed: 10)
    }
    
    func moveSprite(sprite1: SKSpriteNode, sprite2: SKSpriteNode, speed: Float) {
        let scaledWidth = sprite1.size.width * sprite1.xScale
        
        // 移动第一个背景
        var newPos1 = sprite1.position
        newPos1.x -= CGFloat(speed * Float(deltaTime))
        sprite1.position = newPos1
        // 如果第一个背景完全移出屏幕左侧，把它放到第二个背景的右侧
        if sprite1.frame.maxX < self.frame.minX {
            sprite1.position.x = sprite2.position.x + scaledWidth
        }
        
        // 移动第二个背景
        var newPos2 = sprite2.position
        newPos2.x -= CGFloat(speed * Float(deltaTime))
        sprite2.position = newPos2
        // 如果第二个背景完全移出屏幕左侧，把它放到第一个背景的右侧
        if sprite2.frame.maxX < self.frame.minX {
            sprite2.position.x = sprite1.position.x + scaledWidth
        }
    }
}

关键修改点 #

• 新增了background2精灵，和background1完全相同
• 初始位置设置时，background2的x坐标是background1缩放后的宽度，确保两个背景无缝衔接
• moveSprite方法现在处理两个不同的精灵，当其中一个完全移出屏幕时，将其重置到另一个精灵的右侧，这样就能循环滚动，不会出现间隙

这样修改后，两个背景会一直交替填补彼此的位置，滚动时就不会再露出灰色背景了！

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