Have you dreamed about making millions with your own popular iOS game? Well, if you’ve ever wanted to design a game, the first thing you’ll need to build are graphics. In this tutorial, you’ll learn how to get started in SpriteKit and create your first sprite! 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. You will be prompted to choose a template, and there are different kinds of applications. The one we’re looking at today is the iOS application, which is specifically 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. Let’s immediately run the simulator to test that the project loads correctly.

In the left sidebar, open “GameScene.swift”. Because we’re going to be building our own sprite from scratch, delete 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(){

}

Within the override function didMoveToView goes the code that starts when the game starts. Add spawnSprite() on a line below override func didMoveToView(view: SKView) {. This will call the spawnSprite function, which will then create a sprite.

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 mySprite, and set it equal to SKSpriteNode:

var mySprite = SKSpriteNode?()

This is what our sprite will be. Back within the function spawnSprite, add this line:

mySprite = SKSpriteNode()

Within the parentheses, you can add different items. For instance, if you want to have a Sprite with an image in it called Spaceship, you can insert the following into the parentheses: imageNamed: "Spaceship". This would correspond to the image “Spaceship” that you would have in the Assets.xcassets folder under “Getting started with SpriteKit”. You can drag and drop images from your computer into this folder.

Instead, let’s determine the color and size of our sprite within the parentheses. Insert the following into the parentheses: color: UIColor, size: CGSize. Let’s specify an orange User Interface (UI) Color, and a width and height of 40 pixels each. You can use the following format within the parentheses:

color: UIColor.orangeColor(), size: CGSize(width: 40, height:40)

Thus our sprite has a color and dimensions. Let’s now give it 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. Let’s say we want our sprite to be positioned in the center of the screen. You can achieve this by adding onto your existing line so that it looks like so:

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

Also, to spawn your sprite, type another line within the function:

self.addChild(mySprite!)

In addition, within the override function didMoveToView, we can also change the background color. To make our background an off-black color, for instance, type:

self.backgroundColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1.0)

Editing the red, green, and blue values allows us to manipulate the background color. Note that alpha refers to the transparency. Run the simulator, and you will see a small orange square appear on the display.

You’ve successfully created your first sprite! You are on your way to making the next big game. 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