Create iOS apps using Xcode 5's SpriteKit Game template

Learn how to use the new SpriteKit Game project template that comes with Xcode 5.

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 1.2).

-(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.