Add Background Image in Sprite Kit

One of the best new additions in iOS 7 is the Sprite Kit framework . It provides a hardware-accelerated animation system which has been optimized for creating 2D games. In this tutorial we will see the Sprite Kit template in Xcode and add a background image.

Update: July 16, 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 AddBackgroundTutorial 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.

In Xcode's Sprite Kit template, a lot of initial work is already been done. In Sprite Kit, a scene controls each “screen” of your app. In the viewDidLoad method the scene is created and the Myscene object is presented.

- (void)viewDidLoad

// Create and configure the scene.
SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
scene.scaleMode = SKSceneScaleModeAspectFill;

// Present the scene.
[skView presentScene:scene];

In the initwithSize method the custom code is done. Delete the code between the if (self)... and return self; line. The initWithSize method should now look like this.


-(id)initWithSize:(CGSize)size {
if (self = [super initWithSize:size]) {
// Setup your scene here
return self;

First add a background image file into the project. Remember to also copy the file into your project. The image is also included into the source code of this project available on github.

Right after the "Setup your scene here" comment add the following lines.

SKSpriteNode *bgImage = [SKSpriteNode spriteNodeWithImageNamed:@"background"];
[self addChild:bgImage];

Sprite Kit has a special class to create and manipulate sprites called SKSpriteNode. In this node our image is loaded. As you can see no file extension is needed. Next, the image is added to our scene. Build and Run.


As you can see, not the whole image is presented. This is because by default, a sprite is positioned at (0, 0), which in Sprite Kit represents the bottom left. We can center our image to the screen by adding the following line just before the [self addChild:bgimage] line.

bgImage.position = CGPointMake(self.size.width/2, self.size.height/2);

Now Buid and Run again, you will see the image displayed centered on the screen.

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