As Apple released the IOS 7, it also comes with its own game engine – Sprite Kit. After some experience about objective-c, finally I start to dig into this new-released yet powerful game engine.

If you have experience about cocos2D-x development, you might find there are a lot of similarities between these two. To find the comparison between Sprite Kit vs cocos2D-x and Unity 2D, there is a very good video – [Cocos2D vs Sprite Kit vs Unity 2D Tech Talk Video][csu], which uses an game example to explain all the details.

Personally, I always prefer the original one. Apple has its own reason to release this game engine, and Sprite kit is fully integrated with Xcode 5 and IOS 7, you don’t need to import any other third-party library, which makes things more clear, in my opinion. Plus considering the speed and performance, I bet Sprite Kit is no doubt the number 1 among these 3.

1.Create the Sprite Kit project

As Sprite Kit comes with Xcode 5, you just choose “SpriteKit Game” when you create the project.

image

After the project has been created, you will find the project contains the following contents (I add “WH” as a Class
Prefix while creating the project).

image

  • ViewController (.h & .m) is the “controller” role in IOS’s MVC model. It basically controls the view and the model and oordinates the work between view and model.

  • MyScene (.h & .m) is the “view” role in the MVC model. Everything that presents to users will be handled here. You might create many scenes and switch between them during the game. For example, an initial view where presents the general information about the game, a setting view where users could set their preferences, or a game over view will present if user lost the game.

  • Images.xcassets is a folder where you drop all your source images, for example, the background image, character images, etc.

The above three items are the most frequent ones when you begin your adventure with Sprite Kit.

2.Look into MyScene.m

Initially in the MyScene.m, there are 3 functions.

2.1 -(id)initWithSize:(CGSize)size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
-(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),
                                       CGRectGetMidY(self.frame));

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

This function will be called while the first view appears on the screen. You could easily set the background colour by assigning a SKColor to a property backgroundColor of SKScene class.

Next, it create a label which will be presented on the screen. And the font type of this label is set to “Chalkduster”. The label’s content is a simple universal string “Hello World” with font size 30. Then it’s the position. The position is a coordination – (x,y). Thus CGPointMake() function will create such a coordination. CGRectGetMidX(self.frame) and CGRectGetMidY(self.frame) is the function to get the middle length of x axis and y axis. self.frame is a property of CGRect class, it is a rectangle in the parent’s coordinate system that contains the node’s content, ignoring the node’s children according to Apple’s documentation. So the position of the label will appear in the centre of screen. You could also use CGPointMake(self.size.width/2, self.size.height/2) to set the label in the centre of screen.

At last, we need to add the label we created into our scene. This is done by calling addChild:(SKNode *)node method.

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

This method will be called immediately when your finger touches the screen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
  /* Called when a touch begins */

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

In the above code, it will create a spaceship where you touch the screen, and the rotate the spaceship forever.

We get the location of where your finger touches on the screen by calling [touch locationInNode:self]. Then we create our first sprite [SKSpriteNode spriteNodeWithImageNamed:@"Spaceship"]. It will search in the project and find the image named “Spaceship” as you could see in the Project Content mentioned above. Then we set the position of the spaceship to location where we touch the screen.

The next two lines of code create a simple animation on the screen. It creates a rotation action and then assign this action to the spaceship and let it run this action.

At last, still we need to add the spaceship sprite to our scene. Otherwise you won’t see any spaceship on the screen.

2.3 -(void)update:(CFTimeInterval)currentTime

Finally, there is a update function, which will be called every single frame while the scene is presented.

1
2
3
-(void)update:(CFTimeInterval)currentTime {
  /* Called before each frame is rendered */
}

In this case, we don’t do anything here.

3.First run of the project

I set the “iPhone Retina (4-inch 64-bit)” as my target. Here is what is looks like when the project is launched.

image

When I click on the screen, there is a spaceship appears at the position where I clicked and it is rotating.

image

Have fun !