Changing Background Color in XCode SpriteKit: Swift Crash Course (Free Tutorial)

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

Introduction to UIColor in XCode SpriteKit: Swift Crash Course (Free Tutorial)

Trying to figure out how to make your iOS game stand out? Colors are a key part of game design and can make or break the difference between a game’s success and flop. In this tutorial, we’re going to experiment with colors in SpriteKit and how they can be used to make your application unique. Want more FREE coding lessons? You’re in luck! 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. The template we’re using today is the iOS application, which is for the iPhone and iPad. Go to 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. Firstly, it’s a good idea to run the simulator in order to test that the project loads correctly.

In the left sidebar, open “GameScene.swift”. Delete any excess code until you’re left with 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 */
}
}

Let’s begin placing a sprite! A sprite is a 2D bitmap graphic that’s part of a larger scene. On a new line above override func update(currentTime: CFTimeInterval) {, add in a function using the keyword func. Name the function spawnSprite.

func spawnSprite(){

}

In order to spawn a sprite, you also need to add in a variable using the keyword var. On a line below import SpriteKit, create the variable player, and set it equal to SKSpriteNode:

var player = SKSpriteNode?()

Add spawnSprite() on a line below override func didMoveToView(view: SKView) {. This will call the spawnSprite function, which will then create a sprite.

In addition, within the spawnSrite function, write this line:

player = SKSpriteNode

At the end of the line, in parentheses, you can add different items. For this example, let’s specify the color and size of our sprite. Insert the following into parentheses: color: UIColor, size: CGSize.

We’ll set the User Interface (UI) Color first. Below var player = SKSpriteNode?(), create the new variable var playerColor, and make it equal to UIColor. At the end of that line, insert: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat).

Editing the Red, Green, and Blue (RGB) values allows us to manipulate the color. Replace the CGFloat after red with 1. As well, replace the CGFloat after green and blue with 0.5. Alpha refers to the transparency. Give alpha the value 1.0.

We can also decide the size of our sprite by declaring a new variable. Let’s call it playerSize. Make the variable equal to CGSize. In parentheses, you can set the width and height to values such as 50:

var playerSize = CGSize(width: 50, height: 50)

Then, in the spawnSprite function, replace UIColor with playerColor. Likewise, replace CGSize with playerSize. You may be thinking: why create new variables rather than setting the specifications in the function itself? Well, if you need to tweak your values later, they will be easier to find.

As such, our sprite has a color and dimensions. How about a position? On a new line within the same function, write:

mySprite?.position

As you can see whilst typing “position”, it is a CGPoint. Thus we have to set our sprite position equal to CGPoint. Furthermore, we can set our sprite’s position inside parentheses after CGPoint. For instance, for our sprite to be positioned in the center of the screen, add onto the existing line so it looks like so:

mySprite?.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY
(self.frame))

But we’re not done yet! we need one more line in our function:

self.addChild(player!)

Run the simulator, and you will see a salmon square appear on the display.

We can manipulate the colors even more! Change the Green and Blue values of playerColor from 0.5 to 0.0. Additionally, change the Red value to 0.85. If we left the value at 1, we would get a standard red color. By making the value not quite 1, our color and therefore game are more unique.

Let’s also edit the background color. Declare a new variable backgroundColorCustom, and make it equal to UIColor. Set the RGB values to 0.2. Set the alpha value to 1.0. Note that these values are CGFloats.

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

Then, in the override function didMoveToView, write a new line:

self.backgroundColor = backgroundColorCustom

To manipulate our color further, we can add a blue. Declare another variable colorBlue. Use this format:

var colorBlue : CGFloat = 0.0

Also have:

var floatColorAdd : CGFloat = 0.0

Next, we can have the color of our sprite alter slightly whenever the display is touched. To achieve this, type the next line underneath for touch in touches {:

colorBlue = colorBlue + floatColorAdd

player?.color = UIColor(red: 0.8, green: 0.0, blue: colorBlue, alpha:
1.0)

To test the code, run the simulation. Every time you click on the display, the square will become more purple-ish.

We can actually take this concept to another level. For example, declare two new variables:

var colorRed : CGFloat = 0.85
var floatColorSubstract : CGFloat = 0.05

In the override function touchesBegan, change the Red value from 0.8 to colorRed. In addition, below colorBlue = colorBlue + floatColorAdd, type:

colorRed = colorRed - floatColorSubtract

By running the simulation and clicking on the display, you will notice the square’s changing color more rapidly from red to blue. This is because we are both adding blue and subtracting red. The ability to change color is useful when you’re a game designer because it gives you the ability to mimic nature. Just like some animals change color when they are threatened, so can characters in your game. This is just one of the many benefits of being able to manipulate colors in XCode.

To learn even more coding for FREE, check out our 30-minute introductory course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes