Using Labels in Sprite Kit

With Sprite Kit you can display text in your game using Labels. These labels are of type SKLabelNode and its main function is to display a string. In this tutorial we will display a label and add the functionality to drag it around the screen.

Update: Nov 12, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new SpriteKit Game. For product name, use LAbelSpriteKitTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

First. we will add the following properties to the Scene.h file.

@interface MyScene : SKScene

@property (nonatomic, assign) CGPoint deltaPoint;
@property (nonatomic, strong) SKLabelNode *myLabel;


The deltaPoint property is needed for recording changes in the touchlocation while dragging the label. The myLabel is of type SKLabelNode, which is a node that draws a string.

Next, we will add a background to the scene. For a tutorial how to add a background click here. Change the initWithSize method in MyScene.m to 

-(id)initWithSize:(CGSize)size {    
if (self = [super initWithSize:size]) {
SKSpriteNode *bgImage = [SKSpriteNode spriteNodeWithImageNamed:@"background"];
bgImage.position = CGPointMake(self.size.width/2, self.size.height/2);
[self addChild:bgImage];

return self;

This will add the background to the scene. Next add the following lines after the [self addChild:bgImage] line

self.myLabel = [SKLabelNode labelNodeWithFontNamed:@"Arial"];
self.myLabel.text = @"Drag this label";
self.myLabel.fontSize = 20;
self.myLabel.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

[self addChild:self.myLabel];

Here we create a label with fontt type of Arial and a font size of 20. Our label is centered to the screen and added to the scene. Next, we will need to capture the player's touches so add the following methods.

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
CGPoint currentPoint = [[touches anyObject] locationInNode:self];
CGPoint previousPoint = [[touches anyObject] previousLocationInNode:self];
self.deltaPoint = CGPointMake(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y);

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
self.deltaPoint = CGPointZero;

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
self.deltaPoint = CGPointZero;

The touchesMoved:withEvent method sets the currentPoint variable to the current position of the player finger and previousPoint to the previous position. It then calculates the difference. When the touch is ended or canceled no touch is onscreen so the deltaPoint is zero. To update the position of the label we need to change the update method to

-(void)update:(CFTimeInterval)currentTime {
CGPoint newPoint = CGPointMake(self.myLabel.position.x + self.deltaPoint.x, self.myLabel.position.y + self.deltaPoint.y);
self.myLabel.position = newPoint;
self.deltaPoint = CGPointZero;

We calculate the new position by added the current deltaPoint value from our touch methods. When the label has repositioned we set the deltaPoint back to zero. Buid and Run the project and drag the label around the screen.

You can download the source code of the LabelSpriteKitTutorial at the ioscreator repository on github.