In this tutorial you are going to learn how to use SpriteKit and Swift for iOS8! We are going to make a game like Swing Copters (last game of Flappy Bird creator), in order to choose an easy and well-know example. Here is the full list of features that you will learn today:
See the video with the final app:
To make the tutorial shorter and more focused on the SpriteKit and the Swift code, we are going to adapt the game only for the iPhone5 screen.
I always ask anyone who is going to develop something a previous sketch of the work to be done. It helps a lot, even in a simple and little tutorial like this. So lets make one.
We are going to make a game, with two different scenes: 1. The play scene, where our character will fly between enemies, and 2. The Game Over scene, which appears when our hero got killed and announces the end of the game. We are going to use our GameViewController to switch between both scenes when necessary. So:
Now, let’s start coding 🙂
In Xcode 6, go to File->New->Project and select iOS->Application->Game:
Now, set the Product Name “SwiftCopters” and select:
Our best-friend Xcode has generated a game template for us. Just to check that everything is correct: Build and Run. No errors? The lets go on.
The structure of the project is this:
If you compare the template with our model, we still need two more files:
We will cover these ones in the part 2 of the tutorial.
First of all, let’s configure the scene for an iPhone5 frame. Click on the GameScene.sks file to open it in the visual editor. Change the width(W) and the height(H) for the following values: 320 & 568 (it is in the right panel; you can view it selecting View->Utilities->Show SKNode inspector).
DANGER!!!!!! You have to press CMD+S to update this values correctly before going to another view or file. In other scenarios Xcode doesn’t need it but in Beta 5 at least it does. Don’t forget it!
So we have the GameScene with the dimensions of an iPhone5. We will base on this the rest of the tutorial so it is important to double check this.
Download the images of the project and add them to your Images.xcassets: link . Just click on the Images.xcassets folder in the Project Navigator and drag them into the left bar (extracted images from the link).
Now go to GameScene.swift. We are going to start or creation! Change ALL the code for this one, and we will see it step by step:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import SpriteKit //1 class GameScene: SKScene, SKPhysicsContactDelegate { //2 var viewController:GameViewController? //3 //Game Variables var colorBackground:SKColor! = SKColor(red: 20/255, green: 129/255, blue: 197/255, alpha: 1.0) var start:Bool = false let categoryCopter:UInt32 = 0x1 << 0 let categoryEnemy:UInt32 = 0x1 << 1 let categoryScreen:UInt32 = 0x1 << 2 let linearDamping:CGFloat = 0.65 let angularDamping:CGFloat = 1.0 var gravityX:CGFloat = 6 let impulseY:CGFloat = 4.0 let impulseX:CGFloat = 10.0 //4 //Node tree //SKSCENE let nodeWorld = SKNode() var nodeCopter = SKNode() var spriteCopter:SKSpriteNode! //5 //Inits override func didMoveToView(view: SKView) { self.startWorld() self.initPhysics() self.startGround() self.startCopter() } //6 func initPhysics() { self.physicsWorld.contactDelegate = self self.physicsWorld.gravity = CGVectorMake(gravityX, 0.0) let borderBody = SKPhysicsBody(edgeLoopFromRect: self.frame) borderBody.categoryBitMask = categoryScreen nodeWorld.physicsBody = borderBody } //7 func startWorld() { self.backgroundColor = colorBackground self.anchorPoint = CGPointMake(0.5,0.5) self.addChild(nodeWorld) } //8 func startGround() { let spriteGround = SKSpriteNode(imageNamed: "footer") spriteGround.zPosition = 1 spriteGround.size = CGSizeMake(spriteGround.size.width/2, spriteGround.size.height/2) spriteGround.position = CGPointMake(0, -27) nodeWorld.addChild(spriteGround) } //9 //Create copter func startCopter() { } //10 func didBeginContact(contact: SKPhysicsContact!) { } } |
Every point refers to the comment with that number in the code (1. -> //1) :
Too much text right? But it was the initial setup! Now, build and launch to see our first version:
Great work! As you see, our “ground” sprite is very close to the center of the screen. We put its position on (0,-27), and with an anchor point in the scene of (0.5,0.5)…that results almost in the center of the screen.
Now it is time to our hero to arrive and make the competition to the one of Swing Copters!!! Add this method implementation inside the startCopter() func:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//9 //Create copter func startCopter() { nodeCopter.position = CGPointMake(0,0) nodeCopter.zPosition = 10 spriteCopter = SKSpriteNode(imageNamed: "booCopter1") spriteCopter.size = CGSizeMake(spriteCopter.size.width/3, spriteCopter.size.height/3) spriteCopter.position = CGPointMake(0,0) nodeCopter.addChild(spriteCopter) nodeWorld.addChild(nodeCopter) let nodeBody = SKPhysicsBody(circleOfRadius: 0.9*spriteCopter.frame.size.width/2) nodeBody.linearDamping = linearDamping nodeBody.angularDamping = angularDamping nodeBody.allowsRotation = true nodeBody.affectedByGravity = false nodeBody.categoryBitMask = categoryCopter; nodeBody.contactTestBitMask = categoryScreen | categoryEnemy; nodeCopter.physicsBody = nodeBody; } |
Build and Run:
And there it is our little hero!!!! 🙂
Okey, that is enough for now:
In the Part II of the tutorial, we will finish the job with:
Here you have the SourceCode on gitHub.
Stay tuned!
Categories: All, Development, Tutorial
Code and gitHub project updated for Xcode GM new changes (SKPhysicsBody is now optional for SKNode)