Scene Kit Tutorial with Swift Part 1: Getting Started

This tutorial series will show you how to create your first game with Scene Kit, Apple’s built-in 3D game framework.

You’d be forgiven for thinking that making 3D games is far more complicated than creating a classic 2D game. 3D games have a reputation for being notoriously difficult to program, usually involving a lot of complicated math.

However, that is no longer the case, thanks to the advent of Apple’s Scene Kit! The simplicity of Scene Kit lets beginners create simple and stylish games in a short amount of time.

In this 5-part Scene Kit tutorial series, you’ll create your first Scene Kit game: Geometry Fighter. This is a Fruit Ninja style game, with colorful geometric shapes thrown up into the air for your pure destructive indulgence.

In this first part of the series, you’ll simply create a blank project to have a good starting point, which is good for people who like to understand every step. If you’d prefer to dive right into coding, skip to part 2 of this series, where we’ll have a starter project ready for you.

Getting Started

Open up Xcode and select File\New\Project from the main menu. If you want to become an Xcode ninja, use the shortcut command: ⇧⌘N.

Select the iOS\Application\Game template and click Next to continue:

Now you need to provide some basic details about your project. Enter GeometryFighter for the Product Name, select Swift for Language, SceneKit for Game Technology, Universal for Devices, uncheck the unit tests and click Next:

The final step is to choose a convenient location to save your project. Pick a directory and select Create; Xcode will work its magic and generate your project.

Building Your Scene Kit Game Project

Now that you’ve generated your Scene Kit game project from the template, you’d probably like to see it in action! :]

First, choose the iPhone 6 simulator from the toolbar, then press the Play button at the top to build and run your project. Xcode ninjas can simply press ⌘R:

You’ll see the simulator spin up, and your first 3D Scene Kit game will appear. You can rotate the view of your 3D spaceship in the game. Simply drag around the screen in different directions to change the camera angle:

Cool! It’s okay to take a moment and do a little happy dance in your seat, then continue on with the rest of the tutorial.

Cleaning Up Your Game Project

There are a few components you need to remove in order to start with a clean Scene Kit game project. Don’t worry; you’ll re-create all the content from scratch so you can learn where it comes from.

Removing Unnecessary Folders

The first thing to get rid of is the art.scnassets folder. Right click the folder, select Delete and then click Move to Trash:

Cleaning Up the Main Project Files

The GameViewController.swift file is a key component of your game; it’s where all your game logic and code will live. Before you can start coding, you need to purge all the code the Xcode Scene Kit game template created for you.

Replace the contents of GameViewController.swift with the following:

import UIKit
import SceneKit

class GameViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
  }

  override func shouldAutorotate() -> Bool {
    return true
  }

  override func prefersStatusBarHidden() -> Bool {
    return true
  }
}

The old code generated the spaceship; you’ve replaced that code with an empty slate. shouldAutorotate() handles device rotation and and prefersStatusBarHidden() hides the status bar.

Setting up Scene Kit

Earlier, you learned how Scene Kit uses the scene graph to display content on the screen. The SCNScene class represents a scene; you display the scene onscreen inside an instance of SCNView. Your next task is to set up a scene and its corresponding view in your project.

Setting up your Project’s View

Add the following property to GameViewController.swift, just above viewDidLoad():

var scnView: SCNView!

Here you declare a property for the SCNView that renders the content of the SCNScene on the display.

Next, add the following function just below prefersStatusBarHidden():

func setupView() {
  scnView = self.view as! SCNView
}

Here, you cast self.view to a SCNView and store it in the scnView property so that you don’t have to re-cast it ever time you need to reference the view. Note that the view is already configured as an SCNView in Main.storyboard.

Setting up your Project’s Scene

It’s time to set up your scene. Add the following property to GameViewController.swift, just below the scnView property:

var scnScene: SCNScene!

Here you declare a property for the SCNScene in your game. You will add components like lights, camera, geometry, or particle emitters as children of this scene.

Now add the following function below setupView():

func setupScene() {
  scnScene = SCNScene()
  scnView.scene = scnScene
}

This code creates a new blank instance of SCNScene and stores it in scnScene; it then sets this blank scene as the one for scnView to use.

Adding Finishing Touches

Now that you’ve created functions to set up instances of SCNView and SCNScene, you’ll need to call them from somewhere during the initialization step. A good place to do that is just after the view finishes loading.

Add the following lines to viewDidLoad(), just after the call to super:

setupView()
setupScene()

For the final finishing touch, you’ll add an app icon to your game. Download the tutorial resources and unzip the file; you’ll find app icons of various sizes in there for your use.

To set an image as the icon for your game, open the Assets.xcassets folder, select the AppIcon entry and drag each file from the Resources folder to the appropriate spot. Your AppIcon pane should look like the following when you’re done:

Build and run your project, and stand in awe of the black screen of opportunity! :]

In all fairness, this might not seem very impressive at first, but you’ve come a long way already:

• You’ve created a basic Scene Kit game project that uses built-in Scene Kit game template.
• You also learned how to clean out the project by removing unnecessary folders such as art.scnassets.
• Finally, you learned how to initialize an SCNView with a blank SCNScene.

Congratulations – you now have a blank slate to start with!