CODEWITHSUNDEEP
iosswiftsprite-kitinfinite-scroll
Frakcool
Frakcool

Reputation: 11153

SpriteKit scrolling background image showing line between images

I'm learning how to make games in iOS, so I decided to replicate the first level of Mario Bros using my own assets, just to learn how to make them as well.

The issue I'm having right now is that, when creating the scrolling background, using this formula I found on Hacking with Swift, I keep getting a line in between my images.

enter image description here

enter image description here

enter image description here

I've checked that my images have no border in the AI file. (The images are the ones above)

import SpriteKit
import GameplayKit

class GameScene: SKScene {
    private var player = SKSpriteNode()
    private var bg = SKSpriteNode()
    
    override func didMove(to view: SKView) {
        let playerTexture = SKTexture(imageNamed: "player")
        
        player = SKSpriteNode(texture: playerTexture)
        player.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
        
        addBackground()
        self.addChild(player)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    }
    
    
    override func update(_ currentTime: TimeInterval) {
        // Called before each frame is rendered
    }
    
    // MARK: UTILITY FUNCTIONS
    
    func addBackground() {
        let bgTexture = SKTexture(imageNamed: "bg")
        
        for i in 0 ... 1 {
            bg = SKSpriteNode(texture: bgTexture)
            //bg.position = CGPoint(x: (i == 0 ? bgTexture.size().width : bgTexture.size().width - 1) * CGFloat(i), y: self.frame.midY)
            bg.position = CGPoint(x: (bgTexture.size().width * CGFloat(i)) - CGFloat(1 * i), y: 0)
            bg.size.height = self.frame.height
            //bg.anchorPoint = CGPoint.zero
            bg.zPosition = -10
            
            self.addChild(bg)
            
            let moveLeft = SKAction.moveBy(x: -bgTexture.size().width, y: 0, duration: 5)
            let moveReset = SKAction.moveBy(x: bgTexture.size().width, y: 0, duration: 0)
            let moveLoop = SKAction.sequence([moveLeft, moveReset])
            let moveForever = SKAction.repeatForever(moveLoop)
            
            bg.run(moveForever)
        }
    }
}

Just create a new project, copy-paste it and you should see it running

I also changed my GameScene.sks size to: 2688 x 1242

And one last change I made to make the background appear in full screen was to set the LaunchScreen as stated in this answer which seems to be an issue in Xcode 12

I understand that the formula from Hacking with Swift post is making the images overlap by 1px, I've tried removing the 1 * i part from it, yet results are not different.

Other thing I did was to verify the images were "joining" perfectly together, and they do, the lines you can see in the image below are from the AI canvas, both images join in between "cactuses".

enter image description here

I also tried running it into a device in case it might be a bug in the simulator:

Upvotes: 2

Views: 318

Answers (1)

JohnL
JohnL

Reputation: 610

Your image has a thin black border on the left handside and along the top, 1 pixel wide. It's black. Remove that and try again.

Upvotes: 3

Related Questions