How To: Embed SpriteKit In UIViewController

Time for another simple iOS Tutorial!

First, a witty intro. It is not always best to be the first. Sometimes, being last is best.

Ok, Lets get on with the tutorial then. It is really easy to add a spritekit scene in your viewcontroller. All you gotta do is add a UIView and change its class to SKView and add a scene to that SKView in the viewController.

Ok, thanks bye.

That'd be the shortest tutorial I ever wrote if that was the end of it. Relax. Here is how to do it, step by step. First, create a New Project. For simplicity sake, just create a single view application.

Next, open the Main.storyboard and add a UIView on it. Change its background color so you could see it better. The background color won't matter since this view will only act as a "container" to the SpriteKit view.

The gray color rectangle is the UIView we added earlier. The other objects I added just to show that this is just a normal UIViewController, thus you can add any UIKit objects on it like UILabel, UISwitch and so on. I also added constraints for the gray UIView so that it stays at the bottom (sorta status bar-like design). You can put it anywhere you like.

Now, before you do anything else, add the SpriteKit.framework to your project. This is really important (DUHH).

After you done this, go back to the Storyboard and select your gray UIView and open the Identity Inspector and in the Class textfield, enter "SKView" and press return. You should end up with the following:

This will make the UIView "become" the SKView and inherit all of its methods and properties. You don't really need to subclass the SKView (unless you want to do something else that's up to you).

Next, is to create an outlet for this "SKView". So click on Assistant editor, control click on the "SKView" and drag to the ViewController.h and name it "skView." There probably will be an error to it. Somehow XCode assign the skView type to "SpriteKit". Change that to SKView instead. Your IBOutlet should be like below:

@property (weak, nonatomic) IBOutlet SKView *skView;

After that, you need to add an SKScene to your project. To do that, right click on the Project Navigator on the left and choose New File... select Cocoa Touch Class, click Next and create a new class of SKScene as below:

Click Next and click Create on the next dialog window. You will see there will be 2 new files added to your Project Navigator on the left panel of XCode - MyScene.h and MyScene.m.

Now open ViewController.m, and import MyScene.h. And in the viewDidload delegate method, add the following code:

    SKScene * scene = [MyScene sceneWithSize:_skView.bounds.size];
    scene.scaleMode = SKSceneScaleModeAspectFill;
    
    // Present the scene.
    [_skView presentScene:scene];

And that is all there is to it! You have basically completed adding a SpriteKit scene into your viewcontroller. Of course, the scene is now empty, so you'll just see a black colored rectangle at the bottom.

I went ahead and create a simple scene where it scrolls randomly colored words (as SKLabelNode) from right to left. The words are hardcoded as objects in an NSArray in the Scene (open up Scene.m) to see. 

And the result:

(it's a GIF image 3.5MB may take a while)