SpriteKit Labels iOS Tutorial

With Sprite Kit you can display text in your game using Labels. These labels are of type SKLabelNode and its main function is to display a string. In this tutorial we will display a label and add the functionality to drag it around the screen. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and select the Game template.

For product name, use IOS12SpriteKitLabelsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and SpriteKit as Game Technology and choose Next.

Go to the GameScene.sks file and delete the hello World label. Select the Scene and in the Attributes inspector change the Anchor point to 0.

A custom background is needed so download the image, open the Assets Library and move the image to it . Make sure you select the "Copy items if needed" option

The Game template added some code to the project we will not need. Go to the GameScene.swift file and delete all code inside the GameScene class. Add the following properties to the GameScene class.

var deltaPoint = CGPoint(x: 0, y: 0)
var myLabel:SKLabelNode!

The deltaPoint property is needed for recording changes in the touchlocation while dragging the label. The myLabel is of type SKLabelNode, which is a node that draws a string. Next, we will add the background image. Add the didMove(to:) method

override func didMove(to view: SKView) {
    let bgImage = SKSpriteNode(imageNamed: "wallpaper.png")
    bgImage.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
    bgImage.zPosition = -1
        
    self.addChild(bgImage)
}

The background image is centered and added to the GameScene. Next add the following lines to the end of the didMove(to:) method

 myLabel = SKLabelNode(fontNamed: "Chalkduster")
 myLabel.text = "Drag this label"
 myLabel.fontSize = 30
 myLabel.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
        
self.addChild(myLabel)

A Label is created with font-type of Chalkduster and a font size of 30. Our label is centered to the screen and added to the scene. Next, we will need to capture the player's touches so add the following methods.

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let currentLocation = touch.location(in: self)
        let previousLocation = touch.previousLocation(in: self)
            
        deltaPoint = CGPoint(x: currentLocation.x - previousLocation.x, y: currentLocation.y - previousLocation.y)
    }
}
    
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    deltaPoint = CGPoint(x: 0, y: 0)
}
    
override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
    deltaPoint = CGPoint(x: 0, y: 0)
}

The touchesMoved(:with:) method sets the currentLocation variable to the current position of the player finger and previousLocation to the previous position. It then calculates the difference. When the touch is ended or canceled no touch is onscreen so the deltaPoint is zero. To update the position of the label we need to change the update(_:) method to

override func update(_ currentTime: TimeInterval) {
    let xPos = myLabel.position.x + deltaPoint.x
    let yPos = myLabel.position.y + deltaPoint.y
    let newPosition = CGPoint(x: xPos, y: yPos)
    myLabel.position = newPosition
    deltaPoint = CGPoint(x: 0, y:0)
}


We calculate the new position by adding the current deltaPoint value from our touch methods. When the label has repositioned we set the deltaPoint back to zero. Buid and Run the project and drag the label around the screen.

You can download the source code of the IOS12SpriteKitLabelsTutorial at the ioscreator repository on Github.