Working with Scenes in Sprite Kit

With Sprite Kit you can create multiple scenes, one for each screen of the app. It is also possible to use animation transition between your scenes. In this tutorial we will create two scenes and create a transition.

Update: Jan 27, 2015. The rewritten version in Swift for iOS 8.1 and Xcode 6.1 is available here.

Open Xcode and create a new SpriteKit Game. For product name, use ScenesSpriteKitTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

For this tutorial we will need two images which will act as buttons to start the transitioning between our scenes. Download the zip file, unpack it and add the images to the project. FIrst we need to create a new scene. Add a new Objective-C class, make it a subclass of SKScene and name it SampleScene. Go to the myScene.m file and add import the SampleScene header file.

#import "SampleScene.h"

Change the initWithSize method to

-(id)initWithSize:(CGSize)size 
{
if (self = [super initWithSize:size]) {
/* Setup your scene here */
self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];
SKSpriteNode *button = [SKSpriteNode spriteNodeWithImageNamed:@"nextButton.png"];
button.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
button.name = @"nextButton";
[self addChild:button];
}
return self;
}

Here we will add our nextButton to the center of the scene. Next, we need to respond to a click from this button. Change the touchesBegan:withEvent method to

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInNode:self];
SKNode *node = [self nodeAtPoint:location];

// if next button touched, start transition to next scene
if ([node.name isEqualToString:@"nextButton"]) {
NSLog(@"nextButton pressed");
SKScene *sampleScene = [[SampleScene alloc] initWithSize:self.size];
SKTransition *transition = [SKTransition flipVerticalWithDuration:0.5];
[self.view presentScene:sampleScene transition:transition];
}
}

When the image is clicked the scene is transitioned to the SampleScene using a flipVertical transition. Now go to the SampleScene.m file and import the MyScene header file

#import "MyScene.h"

Add the initWithSize method

-(id)initWithSize:(CGSize)size {
if (self = [super initWithSize:size]) {
/* Setup your scene here */

self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];

SKSpriteNode *button = [SKSpriteNode spriteNodeWithImageNamed:@"previousButton.png"];

button.position = CGPointMake(CGRectGetMidX(self.frame),
CGRectGetMidY(self.frame));
button.name = @"previousButton";

[self addChild:button];
}
return self;
}

We also display our image to the center of the sampleScene. Add the touchesBegan:withEvent method

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInNode:self];
SKNode *node = [self nodeAtPoint:location];

// if next button touched, start transition to next scene
if ([node.name isEqualToString:@"previousButton"]) {
NSLog(@"previousButton pressed");

SKScene *myScene = [[MyScene alloc] initWithSize:self.size];
SKTransition *transition = [SKTransition doorsCloseHorizontalWithDuration:0.5];
[self.view presentScene:myScene transition:transition];
}
}

Here we will use a closing door transition to move back to our myScene scene. Build and Run and press the buttons to transition between the scenes.

You can download the source code of the ScenesSpriteKitTutorial at the ioscreator repository on github.