My Experiments with SpriteKit: Part One - Sprites!

Yay! Sprites! I remember, vaguely, creating sprites on my C64 back in the '80's. Long before *you* were born! Back then we had peek and poke and do some sort of nerd wizard pickery-pokery magic to make a blocky image that could be moved on our 320x200 pixel screen...

And we were happy! And then we walked to school, in the snow, uphill...

Ok, lets see what we can do on OS X.

The goal of this experiment is to create a scene that contains a sprite that we have created all by ourselves!!!

For this experiment lets open Xcode (Version 7.1) and create a new project.

     File->New->Project

which opens the template dialog where you can select Application from the OS X section, and then the Game template. And press Next.

For Product Name I chose SimpleSprite, Objective-C  for Language and SpriteKit for Game Technology. No Unit or UI tests. Press Next and Create on the following Dialog and you have a runnable project! Run it and you get a game scene with the text Hello, World!,  mouse clicking on the scene gets you a spinning jet plane sprite..

Let's delete the template code we don't need, so we can learn how to create sprites. Open GameScene.m and delete everything except empty didMoveToView and update methods:

#import "GameScene.h"

@implementation GameScene

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

}

-(void)update:(CFTimeInterval)currentTime {

}

@end

 
Go ahead and run, you will see an application with an empty scene save for the debug info at the bottom right. We'll leave the debug info for now.

Sprites, in sprite kit, are represented by the SKSpriteNode class which is a SKNode class. SKNodes are the building blocks of the sprite kit api. The GameScene class  is a SKScene. SKScene is the root of the SKNodes that provide the content for the scene we are creating. So... SKScene holds a tree of SKNodes, and we will be instantiating and adding SKNodes.

We're going to add our sprite in the didMoveToView method which, according to the Xcode Quick Help, is Called immediately after a scene is presented by a view. Here's the code

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

    CGFloat midX = CGRectGetMidX(self.frame);

    CGFloat midY = CGRectGetMidY(self.frame);

    CGPoint center = CGPointMake( midX, midY);

    SKSpriteNode* sprite = [SKSpriteNode spriteNodeWithColor:[NSColor redColor]

                                                        size:CGSizeMake(20.0, 20.0)];

    sprite.position = center;

    [self addChild:sprite];

}

we expect this to place a red square right in the middle of the application screen:

Great! We can add a sprite to the scene! Look at what we did. First we identified the centre of the scene using the CGRectGetMid functions to get the x and y coordinates of the centre of the screen from the CGRect self.frame. We could have also used (self.frame.size.width/2.0).

Then, we instantiated a SKSpriteNode using the factory class method spriteWithColor:size:. We could have also used the initWithColor:size: method, as long as we called alloc.

Sprites are initialized with a position of CGPointZero, so we need to set the position to the centre of the view. Note that the anchor point of our sprite is the centre of the sprite, more about this in a later post.

The final step is to add our sprite to the scene using the addChild method.

Let's do something more interesting than a red square. Find a nice image that would make a good sprite and drag it into the Assets.xcassets folder in your Project.

I found a nice cat photo that I cropped and gave a transparent background. Now we can rewrite our didMoveToView method:

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

    CGFloat midX = CGRectGetMidX(self.frame);

    CGFloat midY = CGRectGetMidY(self.frame);

    CGPoint center = CGPointMake( midX, midY);

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

    sprite.position = center;

    [self addChild:sprite];

}

which gives us:

All it needs is a nice background! Perhaps in part two..