Developing a game for Apple mobile devices can be as fun
and challenging as playing the game. The latest iteration of
Xcode includes an updated SpriteKit for game developers. In addition, Xcode 5 includes a new SpriteKit Game project
template (Figure A) that comes with the beginnings of a 2D arcade-style game.

Figure A

When a project is
created using the SpriteKit Game template, the SpriteKit framework is automatically
added. Two additional files are added to help you start creating your
first scene (MyScene.h and MyScene.m). In a typical SpriteKit-based game, scene objects are created and used to organize and control
segments of the game. The SKScene class represents the content of a scene,
and includes a plethora of properties and methods for controlling the objects
contained within the scene.

Creating your first SpriteKit game

Using Xcode 5, create
a new project and select the SpriteKit template (Figure A). The project navigator pane will
show all of the usual files and frameworks for a single-view application, plus
a set of scene class files (Figure B).
You may notice a special class for rendering a scene. The SKView class is a view responsible for displaying SpriteKit content. The
code generated by the project template for initializing the SKView appears
within the viewDidLoad method (listing 1.1).

– (void)viewDidLoad
[super viewDidLoad];

// Configure the view.
SKView * skView = (SKView *)self.view;
skView.showsFPS = YES;
skView.showsNodeCount = YES;

// Create and configure the scene.
SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
scene.scaleMode = SKSceneScaleModeAspectFill;

// Present the scene.
[skView presentScene:scene];

Listing 1.1

The SpriteKit view is initialized, followed immediately by the initialization of the corresponding
scene; the scene references the MyScene class created by the project template. You
render and display the scene by calling the presentScene SKView method. Conversely, you pause a
scene by setting the SKView’s paused property to YES.

Figure B

There are
three properties that can be set and used for debugging: showsFPS, showsDrawCount, and showsNodeCount. All
three properties display various pieces of information on top of the
scene — within the SKView. The showsFPS property, for example, displays the current
frame rate of the active scene as frames-per-second.

Building a scene

Scenes are SKScene objects
rendered by an SKView object. The scene’s content is organized as a tree of
node objects. The project created using the SpriteKit template includes the
scene class files, MyScene.m, and MyScene.h. The template project is
designed to give a basic foundation from which to build a game. The project
will compile and display the scene controlled by the MyScene class. The
scene is initialized by calling the initWithSize method (listing

-(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];

SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];

myLabel.text = @"Hello, World!";
myLabel.fontSize = 30;
myLabel.position = CGPointMake(CGRectGetMidX(self.frame),

[self addChild:myLabel];
return self;

Listing 1.2

Not every
type of SpriteKit node draws content. The SKLabelNode in listing 1.2 will render the text
defined by the myLabel.text property. An SKSpriteNode class draws
a sprite. In the SpriteKit template project, a sprite is created each time the
screen is touched. To accomplish this, the SKSpriteNode and any SKActions are contained within the touchesBegan method (listing 1.3).

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

for (UITouch *touch in touches) {
CGPoint location = [touch locationInNode:self];

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"];

sprite.position = location;

SKAction *action = [SKAction rotateByAngle:M_PI duration:1];

[sprite runAction:[SKAction repeatActionForever:action]];

[self addChild:sprite];

Listing 1.3

Scenes are
animated by moving objects around the screen through the use of SKAction objects. One
action object is created for each action to be taken. The code in listing 1.3 includes only one action,
which animates the sprite by calling the rotateByAngle method to rotate the object. You can create
a series of actions to be run sequentially by initializing a SKAction for each step
followed by a SKAction sequence to control the order of events. An action
sequence that would include the “spaceship” rotating, pausing for a short
period, and flying off the screen would look like this:

SKAction *rotate = [SKAction rotateByAngle: M_PI duration:1];

SKAction *pause = [SKAction waitForDuration: 0.5];

SKAction *fly = [SKAction moveByX: 0 y: 100.0 duration: 1];

SKAction *animationSequence = [SKAction sequence:@[rotate, pause, fly]];

Call the
node’s runAction method to cycle once through the animation loop. You can also create a
repeating animation by calling the repeatActionForever method.

Beware of feature creep

While the new SpriteKit framework can greatly reduce the development lifecycle, game development can
easily become riddled with feature creep if not well planned. You should diagram
each scene and plan the transitions before you start coding. Once the coding
begins, the SpriteKit framework makes adding complex functionality simple.
Adding physics, such as collisions and contacts, is more intuitive. Overall, the
possibilities are endless.