Use Attributed Strings with Labels
Attributed strings in SpriteKit work very much the same as they do in UIKit. With attributed strings, you can add additional attributes such as font styles and kerning. In this case, you’re using an attributed string to provide a line break in a multiline label while also keeping the text centered—something the SKLabelNode class can’t seem to do natively.
In the GameScene.swift file, add the following method below the setupLabels() method; you’ll use this method to display a message in the middle of the screen:
| | func showMessage(_ message: String) { |
| | // Set up message label |
| | let messageLabel = SKLabelNode() |
| | messageLabel.name = "message" |
| | messageLabel.position = CGPoint(x: frame.midX, y: player.frame.maxY + 100) |
| | messageLabel.zPosition = Layer.ui.rawValue |
| | |
| » | messageLabel.numberOfLines = 2 |
| » | |
| » | // Set up attributed text |
| » | let paragraph = NSMutableParagraphStyle() |
| » | paragraph.alignment = .center |
| » | |
| » | let attributes: [NSAttributedString.Key: Any] = [ |
| » | .foregroundColor: SKColor(red: 251.0/255.0, green: 155.0/255.0, |
| » | blue: 24.0/255.0, alpha: 1.0), |
| » | .backgroundColor: UIColor.clear, |
| » | .font: UIFont(name: "Nosifer", size: 45.0)!, |
| » | .paragraphStyle: paragraph |
| » | ] |
| » | |
| » | messageLabel.attributedText = NSAttributedString(string: message, |
| » | attributes: attributes) |
| | |
| | // Run a fade action and add the label to the scene |
| | messageLabel.run(SKAction.fadeIn(withDuration: 0.25)) |
| | addChild(messageLabel) |
| | } |
The highlighted code shows the bits related to attributed strings. Here, you set the paragraph style using the NSMutableParagraphStyle and the .center option, which centers the text. You then build an array with this attribute, along with some other font-related and color attributes. Finally, you set the attributedText property on the messageLabel node.
Now that you’ve got a way to show a message to the player, it’s time to add a method to hide that same message. Below the showMessage(_:) method, add the following code:
| | func hideMessage() { |
| | // Remove message label if it exists |
| | if let messageLabel = childNode(withName: "//message") as? SKLabelNode { |
| | messageLabel.run(SKAction.sequence([SKAction.fadeOut(withDuration: 0.25), |
| | SKAction.removeFromParent()])) |
| | } |
| | } |
This method uses the SKNode childNode(withName:) method to check for a node with a matching name. In this case, message. The // is part of an advanced search routine that specifies that searching should be performed recursively across the entire node tree, beginning at the root node. If it finds a match, it then runs a sequence of actions to fade out and then remove the node from its parent, in this case, the scene.
With your two new methods in place, it’s time to use them.
At the end of the didMove(to:) method, add the following code:
| | // Show message |
| | showMessage("Tap to start game") |
And, in the spawnMultipleGloops() method, add the following code to the end of that method:
| | // Hide message |
| | hideMessage() |
You’re almost done. In the gameOver() method, add the following code at the top of that method:
| | // Show message |
| | showMessage("Game Over Tap to try again") |
Finally, in the nextLevel() method, add this at the top:
| | // Show message |
| | showMessage("Get Ready!") |
Build and run the program and watch in awe as messages fade in and out as you progress through the game.
