Designing an application? One of the first things you need to think about is a color scheme, which includes the background color of your app. Today we’re looking at how to set the color of the display (background color) of an iPhone or iPad app. Want more FREE coding lessons? We have a free 30-minute beginners course: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

To start a new project, go to File > New > Project. Select iOS > Application > Game. For Device, specify iPhone. Let’s make our Product Name “Getting started with SpriteKit”. Push Next and then Create. An iPhone app set-up will appear on your screen.

In the left sidebar, open “GameScene.swift”. Delete any extra code until your screen looks like this:

import SpriteKit

class GameScene: SKScene {
override func didMoveToView(view: SKView) {

}

override func touchesBegan(touches: Set, withEvent event: UIEvent?) {
/* Called when a touch begins */

for touch in touches {

}
}

override func update(curent Time: CFTimeInterval) {
/*Called before each frame is rendered */
}
}

On a line underneath import SpriteKit, declare a variable using the keyword var. I like to call this variable backgroundColorCustom because backgroundColor too closely resembles a reserved word. Swift needs reserved words, such as class, SKScene, and override, in order to run code.

var backgroundColorCustom

To give our background a custom color, add onto that line until it looks like this:

var backgroundColorCustom = UIColor(red: CGFloat, green: CGFloat, blue: CGFloat,
alpha: CGFloat)

We are now able to set the Red, Green, and Blue (RGB) values for our color, as well as the alpha (transparency). Let’s say we want a dark gray. Replace the CGFloat after red, green, and blue with 0.2. Likewise, give alpha a value of 1.0.

var backgroundColorCustom = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1.0)

If you prefer to use one of Swift’s default colors, such as orange, you can make your variable equal to UIColor.orangeColor(). Regardless, within the override function didMoveToView, we must reference our new variable:

self.backgroundColor = backgroundColorCustom

Run the simulator to see an iPhone display with a dark gray background. If you zoom in, you will notice that the bottom right-hand corner of the display gives you some values: nodes and fps. What are they?

Let’s find out. Exit out of the display, and open a sidebar listing your SpriteKit files. Then open GameViewController.swift, which controls which scene gets shown on an application. Therefore, if you want to change the scene, you need to edit this file.

As you may be able to tell, the reason our display showed the node count and frames per second (FPS) is because there are the following lines in the GameViewController.swift file:

skView.showsFPS = true
skView.showsNodeCount = true

To not show these values, simply add // in front of each of the lines to turn them into comments, which aren’t read by the compiler.

That is how to set the background color in XCode SpriteKit with Swift. To keep learning how to code for FREE, check out our 30-minute introductory course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes