How I Went From 0 to Game with Sprite Kit in iOS 7

I’ll start off by saying, I am not a game developer and I never have been. That being said, at WWDC, when I saw what Apple did with the new Sprite Kit I was intrigued.

I decided to make a simple game that uses animation as a perk, not necessarily as the primary functionality. Enter the beloved and age old MineSweeper. The game mechanics are fairly simple; you have a grid of squares that are covered, each square can reveal a virtual bomb (game over!), a number indicating the number of bombs that touch the square, or a blank indicating there are no surrounding bombs.

This game has been done over and over again so I added a twist; you must “Beat the Sweeper”, an animated man who walks out periodically and drops a bomb on a random square to reveal it. If the man drops a bomb on a tile covering a bomb he reveals it and the game is over. If he drops a bomb on a safe unrevealed tile, it is revealed and you can continue.

Don’t tell our Design team about this one…

Given the layout and function of the game, I knew I needed to be able to animate the following actions:

Movement: The Sweeper must be able to walk from one side of the screen to the other. And the bomb he throws must animate on a path.
Particle: The bomb must smoke on the way down to its destination.
Sprite Animation: The bomb must have an explosion and the man must appear to be walking while he is moving across the view.

Enter Sprite Kit

Adding Sprite Kit to a project is fairly painless and is just like any other Apple framework.

To the Code

All animations with Sprite Kit start with the SKView which inherits from UIView, so it can be treated like any other view you add to your window. All animations performed will be rendered in this view.

Adding an SKView is as simple as adding any view:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

(void)viewDidLoad

{

self.skView=[[SKView alloc]initWithFrame:self.view.bounds];

[self.view addSubview:self.skView];

MSWScene *scene=[MSWScene sceneWithSize:size];

// Set the scale mode to scale to fit the window

scene.scaleMode=SKSceneScaleModeAspectFit;

self.skView.backgroundColor=[SKColor clearColor];

[self.skView presentScene:scene];

self.scene=scene;

}

You will note above that I also created a scene which is a subclass of SKScene:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

@interfaceMSWScene:SKScene

-(void)createSceneContents;

-(void)didMoveToView:(SKView *)view;

@end

@implementation MSWScene

-(void)didMoveToView:(SKView *)view

{

[selfcreateSceneContents];

}

-(void)createSceneContents

{

// create SKSpriteNodes here and general layout for the scene

}

@end

A scene is the landscape from which everything starts. When you add a scene to an SKView, the - (void)didMoveToView:(SKView *)view method is called which is the signal to start building your scene and any SKSpriteNodes you need. I think of a scene as the background, canvas or location your animated objects will be created and managed from. An SKSpriteNode is typically going to be some object that you want to animate around the scene you build. You can transition between scenes; for example, when moving around a game through a maze, some scenes are off-screen in the map until you move them.

Animating Sprites

The sprite starts with the SKSpriteNode object, which can have an animated image sequence, move about the scene on a path, or emit particles. Fortunately, Apple made it fairly simple to make a sprite animate. To make an animation you either need a sprite sheet or multiple images that Sprite Kit can use to loop through the sequence.

For my walking man animation I chose to use multiple images. Here is his class:

Above you can see that I’ve implemented a factory method to create my walking man with his first frame, included a helper method to load all of the images for the animation sequence and a method with completion to make him walk to a coordinate over a particular duration. Later in the code I will execute the following to create him in the scene:

SKActions

SKActions are the magic; beyond simply animating an image sequence, they are the control for all things changeable in the Sprite Kit universe. SKActions can be chained to execute blocks on completion, manipulate SKSpriteNodes movements, begin animation image sequences and much much more. They are the building blocks of a sprite’s interaction with their environment. You can run actions as simultaneous groups or sequences to create just about any effect, movement or animation you can dream up. As can be seen in the walkToX method above, I am executing the image animation sequence at the same time I am animating the walking man across the screen and then removing the walking sequence when he stops.

SKActions can also be used to animate an SKSpriteNode on a path, which in my game I used in order to create the effect of the man tossing the mine from his hand on a curve down to the random row it will explode on.

Particle Emitters

As I wanted it to appear that my walking man was dropping a real bomb on the unsuspecting gamers’ game board, I needed smoke to be emitted out from its fuse. Apple has provided several emitters with Sprite Kit that can be added to the project in the form of an SKS file; everything from smoke to fire. Particle emitters can be added to the project as a new file under the iOS Resource group.

You can edit emitters’ individual properties, like number of particles emitted, direction, and speed, all in Xcode 5’s built in editor or from code when you load them.

Sprite Kit Coordinate System

It should be noted that the coordinate system is not the same in a Sprite Kit scene as they are in a UIView. By default, the coordinate system is 0,0 center based. This means that anything to the left of center is a negative and anything below center is negative, starting from 0.

Conveniently, Apple has given us conversion methods in SKScene that will convert between view coordinates and scene coordinates:

1

2

-(CGPoint)convertPointFromView:(CGPoint)point;

-(CGPoint)convertPointToView:(CGPoint)point;

Physics

What game would be complete without physics (besides mine)? Not only does Sprite Kit contain excellent tools for creating scenes and animating sprites, but it also includes a world of physics. I didn’t have a need in my small game for physics so this addition is a bit beyond the scope of the article, however, it is worth mentioning in the spirit of iOS 7’s grand release that Apple has provided everything from gravity to collision detection and reaction in Sprite Kit.

What will you do with Sprite Kit?

As can be seen, Apple has added a valuable framework that previously existed as several different add-on third-party libraries to expand the power of sprite animation to iOS 7. I stated above that I am not a game developer, but the power and ease-of-use of Sprite Kit has definitely turned my head. I am excited to see what this new framework will do to inspire future game developers. I’m excited to see what you will do with it!

This is the tenth part in an 11-part Developer’s Guide to iOS 7. You can find the full guide here. For more information on how Double Encore can help you prepare your company for the changes in iOS 7, please email us.

Gregory Carter is a Software Engineer at Double Encore, Inc., a leading mobile development company. Greg has developed iOS apps since 2007 with a focus on backend engineering and has a 15 year history of scalable front and backend systems, library and data development. As a side hobby he dabbles in interface, graphics design, and semi-professional dart games with his coworkers.