iOS SpriteKit Tutorial

Filed Under: iOS

In this tutorial, we’ll discuss SpriteKit and build a Hello World iOS Application out of it using Swift.

Getting Started

SpriteKit is a framework that’s used to create high-performance 2D games while rendering graphics and animation textures.
SpriteKit has an optimized animation system and advances physics effects that are ideal to create engaging 2D games.

To get started with the SpriteKit Game Project launch your XCode and choose the Game template as shown below:
ios spritekit game template

On the next screen make sure that you choose SpriteKit. Once XCode builds your project, you’ll see many files generated in your Project panel. These include GameScene.swift, .sks files and the GameViewController.
The code can look intimidating at first. Don’t worry we’ll start from the SpriteKit basics before reaching till there.
Build and run the application on your simulator or device.
Following is the output:

ios spritekit hello world output

That’s the sample Hello World SpriteKit application created. But that was all XCode magic. Let’s start from ground zero and cover the important concepts and terms and build our version of SpriteKit Hello World Application.

Basics of SpriteKit

Sprites are nothing but animated textured images.
SpriteKit consists of the following important classes:

  • SKView: This is a subclass of the UIView. SKView is the view in which all of the SpriteKit contents are added and displayed on the screen.
  • SKNode: This is the building block of SpriteKit. It is just an empty node. No visual elements. On a SKNode we can add child nodes such as SKSpriteNode. These nodes can be visual elements or a scene.
  • SKScene: An SKScene is a subclass of the SKNode. It represents a single scene from the game. SKScene acts as a root node of the SKNode. SKScene provides the content to the SKView. You just need to call the function presentScene over the SKView and pass the scene instance.
  • SKAction: An SKAction is used to set actions such as animations/movements on SKNodes.
  • SKPhysicsBody: This class adds the physics components to the SKNodes. Components such as gravity, collision are commonly used in games.
SKScene origin lies at the bottom left corner.

Now create a new XCode Project and choose single view application. We’ll build the SpriteKit project from the scratch.

Goto your MainStoryboard and set the custom class type as SKView.

ios skview custom class

Right click on the project folder and select new file of the type SpriteKitScene as shown below:
ios spritekit scene file
We’ve named the file HelloScene.sks.
This is the layout editor of it:
ios spritekit hello scene

Now we need to create a HelloScene.swift file to connect with the above SK scene file.
Create a new file of the type Cocoa Touch class and choose the following class type as the parent:

ios spritekit skscene swift

The HelloScene.swift file looks like this:
ios spritekit skscene swift code

Ensure that you’ve imported SpriteKit module in it.

Now its time to connect this scene file in the scene layout editor:

ios spritekit skscene swift connect

Adding a Sprite

To add a sprite from the layout editor we do:
ios skscene add sprite

We can add set any file path to images present in the Assets folder on this Color Sprite.
For now, let’s keep it blank.

Adding a Sprite programmatically.
To do so in the HelloScene.swift file, we need to add the child node inside a didMove() function that’s overridden.


import SpriteKit

class HelloScene: SKScene {

    override func didMove(to view: SKView) {
        let label = SKLabelNode()
        label.text = "Hello World!"
        label.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
        label.fontSize = 30
        label.fontColor = SKColor.red
        self.addChild(label)
        
    }
}

We’ve adding a SKLabelNode which displays a Sprite with a text.
The SKLabelNode must be assigned a position else it’ll be placed at the bottom left of the screen.
We’ve centered it here and set the fonts and sizes.
Finally we add the SKLabelNode to the SKScene using addChild()

Running the SKScene from our ViewController

We need to now add the SKScene to the ViewController.swift file. In it, we’ll present the scene to the SKView:


import UIKit
import SpriteKit
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        if let view = self.view as? SKView
        {
            if let scene = SKScene(fileNamed: "HelloScene")
            {
                scene.scaleMode = .aspectFill
                view.presentScene(scene)
            }
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

We’ve set the scale mode to fill the screen.

The output of the above application is:
ios spritekit hello world output

This brings an end to this basic SpriteKit introductory tutorial.
You can download the project from the link below:

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages