Xcode SpriteKit Level Designer

This will be a quick tutorial to get you started with the Sprite Kit level designer built into Xcode.

IOS and Sprite Kit are obviously quite new and the documentation doesn’t seem to have quite caught up just yet, or at least I couldn’t find much at the time of writing this. In fact I probably suspect that many people don’t even know there is an xcode spritekit level designer! However, if you watch the WWDC 2014 videos there was one called Best Practices for Building SpriteKit Games and they mention it quite a bit and presumably it will eventually get the documentation as it seems they want to push its use. Even the default Sprite Kit template in Xcode 6.1.1 uses it.

Anyway, let’s see how to use it.

Open up Xcode and start a new Sprite Kit project. I’m not going to take you through how to do that because surely you know by now. Choose either Swift or Objective C, it doesn’t really matter but I will be using Swift as I’m trying to get used to it.

You should end up with a new project a GameViewController.swift loading an .sks scene. First thing is to delete some of the template code. Change this:

Screen Shot 2014-12-14 at 09.34.39

to look like this:

Screen Shot 2014-12-14 at 09.36.12

 Ok, if you build and run this now to make sure it works (note: don’t know if you are experiencing this problem but if you are in fullscreen mode and run a project Xcode closes so until they fix this issue make sure you aren’t in full screen). At this point, the simulator will load and display just a blank grey screen.

  What we will do now is use the editor to add a colored square which we will then access and manipulate in code.

 Click on the GameScene.sks file and the level editor should display

Screen Shot 2014-12-14 at 09.50.32

 The yellow box is the representation on the scene. on the right you will notice Inspector with settings that you can manipulate and the Object Library.

 Add a Shape Node  roughly in the middle of the scene. You will notice that the Inspector has changed to reflect the settings you can apply to the Shape Node. Set the fill color to green, or whatever you like really and then give it a name of testNode. Now run the project and you should end up with this.

iOS Simulator Screen Shot 14 Dec 2014 10.03.10

  Ok, so I lied, it’s red. The seems to be an issue with Xcode updating attributes. I’ll look into that and post a solution if I find one.

 So the next step is to get a reference to this Node in code. I have played around and there doesn’t seem to be a Ctrl+Click and drag way of doing this, which would have been nice, but it is quite easy nonetheless.

 Switch back to the GameScene.swift file and add this line after the start of the class

Next, in the didMoveToView function add

This get a reference to the node we created in the .sks file. Finally add this after the let Location line in the touchesBegan function.

Now, if you build & run the project and click anywhere on the simulator screen your node will move to the position you click.

In the next tutorial I will show you how to load nodes from .sks files into a scene.

1 thought on “Xcode SpriteKit Level Designer

Leave a Reply

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