UI Hosted SpriteKit View Tutorial – Part 1

Apple’s powerful 2D gaming SDK SpriteKit allows developers to create games for iOS, macOS and tvOS. That’s a lot of platforms and a lot of potential customers. Starting a new project with Xcode’s game templates however often leaves the developer in a situation where she needs to create a whole bunch of standard UI elements from scratch, because they are not available in SpriteKit. Things like buttons, tables, and so forth. In most games this is not an issue, because the art direction dictates custom elements anyway, but there are some cases where it would be nice to be able to hook up a couple of views the way they work in a standard app. In this brief article we take a look at one way of accomplishing this. We are going to create a very simple app called Rolling. It does not do anything very useful really, but it will show an SKView with gravity and some elements inside a regular iOS app. We will also set things up in a way that allows us to use Xcode’s level editor to add new levels.

Let’s start out by creating a  Single View app in Xcode and name it “Rolling”.

We are using Swift as language and uncheck all boxes at the bottom of the final screen.

Next we need to add the SpriteKit framework in the Linked Frameworks and Libraries section of the General tab in our app’s settings.

Next we need an image for our one and only ball. I found several via Google (http://findicons.com/search/ball). It should be a png file and be masked to a ball image so we don’t see the frame rect once it is animated. The size of the image used in our example is 88 x 88 pixels. Just add it to your asset catalog and remember the name of the image. That’s all the graphics we need.

Our game is going to have 2 levels and we are going to hook them up in the app’s storyboard so we can easily switch between them. Below is a look at what we want to. We need 3 elements in our storyboard. Two buttons – one for each level – and the SKView that is going to become our game view. To create an SKView we simply add an UIView and then enter “SKView” as class in the Custom Class field in the top right corner of the identity inspector. To make the view a bit more visible we set the background color to a darkish gray.

Now let’s open our ViewController and stub out a couple of things. First of all we need to let our ViewController know that we are using SpriteKit. So let’s add the import statement at the top to the file (1). Then we need an outlet for our SKView (2) and an action for each of our buttons (3). Finally we add a stub for our loadLevel function which we are calling from both of our actions.

Here is a look at our ViewController so far:

You may notice that we are calling the loadLevel function with the parameters “GameScene” and “GameScene2”.  We will add those in the next part. Once we run the app we get something like the following:

Not much to look at, but we now have a SpriteKit view embedded in a regular UI  app for iOS. In part two of this tutorial we are going to use Xcode’s level editor to add a couple of levels and some game elements.