Scene Kit Tutorial with Swift Part 2: Nodes

Adding a Background image

Once your splash screen disappears, you’re dumped back to the black screen of opportunity. Time to add a nice clean background so you don’t feel like you’re staring into a black hole.

To do this, add the following line of code to the bottom of setupScene() in GameViewController.swift:

scnScene.background.contents = "GeometryFighter.scnassets/Textures/Background_Diffuse.png"

This line of code instructs the scene to load the Background_Diffuse.png image from the asset catalog and use it as the material property of the scene’s background.

Build and run; you should now see a blue background image once the game starts:

You’ve finished all the basic housekeeping tasks for your project. Your game now has a flashy app icon, a splash screen, and a pretty background that’s all ready to display the nodes you’re about to add to the scene.

The Scene Kit Coordinate System

Before you can start adding nodes to the scene, you first need to understand how Scene Kit’s coordinate system works so you can position your nodes where you want them.

In a 2D system such as UIKit or Sprite Kit, you use a point to describe the position of a view or a sprite on the x and y axes. To place an object in 3D space, you also need to describe the depth of the object’s position on the z-axis.

Consider the following simple illustration:

Scene Kit uses this three-axis system to represent position in 3D space. The red blocks are placed along the x-axis, the green blocks along the y-axis and the blue blocks along the z-axis. The grey cube in the very center of the axes indicates the origin, which has coordinates of (x:0, y:0, z:0).

Scene Kit uses the SCNVector3 data type to represent coordinates in three dimensions as a three-component vector. Here’s how you create a vector in code:

let position = SCNVector3(x: 0, y: 5, z: 10)

This declares the variable position with a vector of (x:0, y:5, z:10). You can easily access individual properties of the vector like so:

let x = position.x
let y = position.y
let z = position.z

If you’ve worked with CGPoint before, you can easily draw comparisons between it and SCNVector3.

Working with Cameras

Now that you understand how to position nodes in Scene Kit, you’re probably wondering how to actually display something onscreen. Think back to the analogy of the movie set from Chapter 1: to shoot a scene, you’d position a camera looking at the scene and the resulting image of that scene would be from the camera’s perspective.

Scene Kit works in a similar fashion; the position of the node that contains the camera determines the point of view from which you view the scene.

The following illustration demonstrates how a camera works in Scene Kit:

There are a couple of key points in the previous diagram:

• The camera’s direction of view is always along the negative z-axis of the node that contains the camera.
• The field of view is the limiting angle of the viewable area of your camera. A tight angle provides a narrow view, while a wide angle provides a wide view.
• The viewing frustum determines the visible depth of your camera. Anything outside this area – that is, too close or too far from the camera – will be clipped and won’t appear on the screen.

A Scene Kit camera is represented by SCNCamera, whose xPov and yPov properties let you adjust the field of view, while zNear and zFar let you adjust the viewing frustum.

One key point to remember is that a camera by itself won’t do anything unless it’s a part of the node hierarchy.

Adding the Camera

Let’s try this out. Open GameViewController.swift and add the following property below scnScene:

var cameraNode: SCNNode!

Next, add the following method below setupScene():

func setupCamera() {
  // 1
  cameraNode = SCNNode()
  // 2
  cameraNode.camera = SCNCamera()
  // 3
  cameraNode.position = SCNVector3(x: 0, y: 0, z: 10)
  // 4
  scnScene.rootNode.addChildNode(cameraNode)
}

Taking a closer look at the code:

1. You first create an empty SCNNode and assign it to cameraNode.
2. You next create a new SCNCamera object and assign it to the camera property of cameraNode.
3. Then you set the position of the camera at (x:0, y:0, z:10).
4. Finally, you add cameraNode to the scene as a child node of the scene’s root node.

Finish things off by calling the method you just added in viewDidLoad(), right below setupScene():

setupCamera()

There’s no need to build and run at this point in time, as you won’t see that anything’s changed. Even though your scene now has a camera, there’s still nothing to look at. To fix this, let’s add some actors to this scene.

Working with Geometry

In order to create visible content, you need to add a geometry object to a node. A geometry object represents a three-dimensional shape and is created of many points known as vertices.

Additionally, a geometry object can contain material objects that modify the appearance of a geometry’s surface. Materials let you specify information such as the color and texture of the geometry’s surface and how the geometry should respond to light along with other visual effects. A collection of vertices and materials is known as a model or a mesh.

Scene Kit includes the following built-in geometric shapes, also known as primitives:

In the front row from the left, you have a cone, a torus, a capsule and a tube. In the back row from the left, you have a pyramid, a box, a sphere and a cylinder.