Starting to Code, Creating a Scrolling Background

Now the planning stages were done, it was time to start coding the game. Although we didn’t have all the assets for the game yet we could start coding using quickly made test assets. These assets do not need to be representative of the final product for the game, they are more there just to test the functions I am creating are working. As a result they can be quite ugly, but that does not matter.

iOS Simulator Screen Shot 11 May 2015 14.34.54
Results of my scrolling background testing

First off, I decided to create a scrolling background. I used techniques explored in my following of tutorials here such as using SKSprite Node to add the images into the background. However to make the background scroll was a bit more complicated.

First I tried adding in a full length background to the app, however that just crashed the emulator. I realized I would have to break up the background into smaller chunks, so I used different coloured squares the same size as one screen to test my background scrolling function. This was so that as soon as I saw a different colour background on screen I would know that the scrolling function was working.

 func backgroundNode() -> SKSpriteNode {
        let backgroundNode = SKSpriteNode()
        //anchor point is the pivot point
        // 0 point it bottom left
        backgroundNode.anchorPoint = CGPointZero
        
        
        //this is the 1st bg img
        let background1 = SKSpriteNode(imageNamed: "bgslice1")
        background1.anchorPoint = CGPointZero
        background1.position = CGPoint(x: 0, y: 0)
        backgroundNode.addChild(background1)
        
        //add in floor for first background
        floor.anchorPoint = CGPointZero
        floor.position = CGPoint(x: 100, y: 100)
        backgroundNode.addChild(floor)
        
        
        //this is the 2nd bg img
        let background2 = SKSpriteNode(imageNamed: "bgslice2")
        background2.anchorPoint = CGPointZero
        background2.position = CGPoint(x: 2048, y: 0)
        backgroundNode.addChild(background2)
        
        //this is the 3rd bg img
        let background3 = SKSpriteNode(imageNamed: "bgslice3")
        background3.anchorPoint = CGPointZero
        background3.position = CGPoint(x: 4096, y: 0)
        backgroundNode.addChild(background3)
        
        
        //this is the 4th bg img
        let background4 = SKSpriteNode(imageNamed: "bgslice4")
        background4.anchorPoint = CGPointZero
        background4.position = CGPoint(x: 6144, y: 0)
        backgroundNode.addChild(background4)
        
        //function completion
        backgroundNode.size = CGSize(width: 8182, height: 1536)
        return backgroundNode
        
    }

Here’s the function I came up with with some help from IOS Games by Tutorials by Ray Wenderlich. Instead of just creating one SpriteNode, in Sprite Kit you can append SpriteNodes onto one another. So the four background nodes get added onto the end of one big empty background node.

    func moveBackground(){
        enumerateChildNodesWithName("background") { node, _ in
            let background = node as SKSpriteNode
            let backgroundVelocity  = CGPoint(x: -self.backgroundMovePointsPerSec, y: 0)
            let amountToMove = backgroundVelocity * CGFloat(self.dt)
            background.position += amountToMove
  }
    }

Moving the background was a bit more tricky. As in all games the Frames Per Second count is not constant, it changes depending on the calculations and the running speed of the game. Therefore something that is meant to be moving at a constant speed needs to take this into account when the calculations are done to make the thing move.

 override func update(currentTime: NSTimeInterval) {
        
        
    // makes sure anim is smooth
        
        if lastUpdateTime > 0 {
            dt = currentTime - lastUpdateTime
        } else {
            dt = 0
        }
        
        lastUpdateTime = currentTime
        

Therefore in the update function, I needed to add a function that tracks the difference in time between frames. This is then used when calculating how far to move the background.

In the end I got my scrolling background function to work. Next was to add in a player character and perhaps even make a class for it, and to add in physics such as gravity.

Wenderlich, R., 2014. IOS Games by Tutorials. Virginia: Razeware.

McIlrath, C., 2014. Swift Programming Blog – Getting Started with Sprite Kit Physics. [online] SwiftCast.TV. Available from: https://swiftcast.tv/articles/getting-started-with-sprite-kit-physics [Accessed 5 Apr. 2015].