iOS 7 Sprite Kit Basics

Hey mates ! this is my first tutorial for iOS 7 Sprite Kit. It is about just familiarising with the scene, view and basic sprite actions.

The Pre requisites :

  1. Xcode 5 – Currently developer version 2 is available from Apple. You can get it as Direct Download at your apple iOS developer account. Or you can get it via torrent.
  2. iOS 7 – You’ll need iOS 7 to test your apps in your devices. Again you can have it from Apple iOS Developer account as direct download or as a torrent for your device.

Run your Xcode 5. You’ll see a new minimalistic UI and overall a better experience than previous versions of xcode.

We’ll start by creating a new project and select > SpriteKit Gamecreating new sprite kit project

Give your project a name , fill in the details and click Next and Create Project.

You will see the following file structure in your project.

apple iOS developer

You will see 2 story board files if you set your app “Universal” ie for both iPhone and iPad.

The main files we need to familiarise ourselves with are – ViewController.m and MyScene.m


Lets look at the viewDidLoad function.

Note: SpriteKit.h is included in ViewController.h file , needed for specific Sprite Kit functions and objects.

[csharp]<br /> – (void)viewDidLoad<br /> {<br /> [super viewDidLoad];<br /> // Configure the view.<br /> SKView * skView = (SKView *)self.view;<br /> skView.showsFPS = YES;<br /> skView.showsNodeCount = YES;<br /> // Create and configure the scene.<br /> SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];<br /> scene.scaleMode = SKSceneScaleModeAspectFill;<br /> // Present the scene.<br /> [skView presentScene:scene];<br /> }[/csharp]

Here SKView is initialised with showsFPS and showsNodeCount set to YES.

  • showsFPS shows the frames per second generated on the device screen (not console log)
  • showsNodeCount shows the number of children

Next you can see the scene being initialised with the size of bounds of the view.

Then you can set the scale mode of this scene as

  • SKSceneScaleModeAspectFill
  • SKSceneScaleModeAspectFit
  • SKSceneScaleModeFill
  • SKSceneScaleModeResizeFill

Moving on, the skView presents the scene. Next comes the MyScene.m file which has the code used to construct the game.

MyScene.m Function initWithSize

[csharp]<br /> -(id)initWithSize:(CGSize)size {<br /> if (self = [super initWithSize:size]) {<br /> /* Setup your scene here */<br /> self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];<br /> SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];<br /> myLabel.text = @"Hello, World!";<br /> myLabel.fontSize = 30;<br /> myLabel.position = CGPointMake(CGRectGetMidX(self.frame),<br /> CGRectGetMidY(self.frame));<br /> [self addChild:myLabel];<br /> }<br /> return self;<br /> }<br /> [/csharp]

Here we are setting the background colour of the scene in RGB Alpha.Next we create a label using SKLabelNode with font “ChalkDuster”. Then we set its text , fontSize and position properties.

CGRectGetMidX(self.frame) returns current frame’s width divided by 2 , returning mid of the screen. Similar goes for the CGRectMidY function. Next this label is added as a child to the scene , increasing node count to 1.

Function touchesBegan

[csharp]&amp;lt;br /&amp;gt; -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {&amp;lt;br /&amp;gt; /* Called when a touch begins */&amp;lt;br /&amp;gt; for (UITouch *touch in touches) {&amp;lt;br /&amp;gt; CGPoint location = [touch locationInNode:self];&amp;lt;br /&amp;gt; SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@&amp;amp;quot;Spaceship&amp;amp;quot;];& some as only than.</div> sprite.position = location;&amp;lt;br /&amp;gt; SKAction *action = [SKAction rotateByAngle:M_PI duration:1];&amp;lt;br /&amp;gt; [sprite runAction:[SKAction repeatActionForever:action]];&amp;lt;br /&amp;gt; [self addChild:sprite];&amp;lt;br /&amp;gt; }&amp;lt;br /&amp;gt; }&amp;lt;br /&amp;gt; [/csharp]

touchesBegan is called for each time you touch the screen.

You’ll see it has a for loop inside it. Some will wonder that if this function runs every time the screen is touched then why would we need a for loop inside the function. This for loop takes care of special cases of multi touches. Inside this function , we firstly store the touches location on the screen as we are deploying a spaceship sprite here. Then we initiate the sprite by SKSpriteNode spriteNodeWithImageNamed. Then we set its position as the location of the touch. In the next line we create a SKAction for rotating this spaceship sprite by using rotateByAngle:M_P1. M_P1 is the value of pie. No special significance of pie(3.14) here. Then you can set the duration of this action.

You can replace the SKAction to something like this

[csharp]&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;SKAction *action1 = [SKAction moveToY:2500.0 duration:1];&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;[/csharp]

This will animate the spaceship to move upwards the screen.

One thing you will notice is , as soon as the ship leaves the screen , it is removed as a child hence decrementing the node number back to 1. This is probably a memory saving measure in SpriteKit.

At the end of this tutorial we are familiar with the basic sprite kit code and can customize it a little bit. In future I will write more of such tutorials. Also a 2D car game is in my To do list as well.

Bookmark this tutorials for future reference.

By | 2018-02-16T10:28:13+00:00 July 25th, 2013|How it works|0 Comments

About the Author:

Leave A Comment