Swift App Tutorial: Swing Copters Part I
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:
- How to create a SpriteKit+Swift project in Xcode 6
- How to create a infinite scroll game with SpriteKit and Swift
- How to use SKNode, SKSpriteNode, SKLabelNode and SKActions in Swift
- How to use SKPhysicsBody, impulses and gravity with Swift
- How to make transitions with SKTransion in Swift
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.
Always make a simple sketch of your app
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 🙂
Create a new Swift Project
In Xcode 6, go to File->New->Project and select iOS->Application->Game:
Now, set the Product Name “SwiftCopters” and select:
- Language: Swift
- Game Technology: SpriteKit (take care not to select SceneKit by mistake!)
- Devices: Universal (yes, I said it was only for iPhone5, but don’t worry about this now)
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:
- The AppDelegate, as always.
- Our Main.storyboard, a classic
- GameViewController.swift : Our main and only viewController. He will be the responsible of loading the correct “scene” (remember the sketch, right?)
- GameScene.sks: Visual representation of our scene. Here, we will force an iPhone5 screen, soon.
- GameScene.swift: All the funny stuff will be here.
If you compare the template with our model, we still need two more files:
- GameOverScene.sks
- GameOverScene.swift
We will cover these ones in the part 2 of the tutorial.
Configure and start of the GameScene
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).
Our first SKScene with Swift
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) :
- The game will respond to contacts between our hero and the enemies, so we have to implement the “SKPhysicsContactDelegate”
- As our model detailed, when our dead, we have to transition to the game over scene. But remember, that we choose our viewController as the responsible of doing transitions between scenes. So in both scenes (gameScene and gameOverScene), we need a reference to our viewController, in order to call the appropriate method when we need a transition between scenes.
- A bunch of game variables. It is a good practice to “parametrize” your code since the beginning. SpriteKit games grow quickly and it is great to have all the parameters together in order to perform tweaks and little changes in values like the gravity, the animationDurations, some sprite positions, etc.
- We declare the node tree of our game. I like to write it down as you see in the code, with tabulations, representing which node is father of which node sons. Same as before: SpriteKit is amazing but the number of SKNodes of your game will grow exponentially. This kind of tabulation representation will help you later!. In our case, we are creating the following nodes: nodeWorld(the main node), nodeCopter(our hero, who is a son of the nodeWorld), and spriteCopter(our hero’s sprite, son of nodeCopter) (more later).
- The method didMoveToView is the where we will put our initialisation code.
- Here, in initPhysics, we are going to prepare our scene to be aware of physical behaviours. Setting self as the contactDelegate will let us handle contacts between nodes (we have to implement the method didBeginContact at comment //10). We set the gravity of the scene equal to (gravityX, 0): No gravity in the Y-axis, and some value in the X-Axis (defined in our head, comment //3). Finally, we establish some physicalBody to our scene: We specify that the borders of our screen are going to have some kind of physical behaviour (they are going to be like invisible walls to our hero).
- Okey, first “creation” work here: In startWorld, we are changing the backgroundColor of the scene, setting the anchor point on (0.5 , 0.5) -middle of the screen- and adding our nodeWorld as the main child of the scene. Do you know what is the anchor point on (0.5 , 0.5)? It tells to our scene that the middle of the screen, is going to be the point (0,0) in the coordinate system of its children. Need more details? here.
- OOOHHH! Our first sprite is coming!!! In startGround, we are going to set the ground image of the scene and to configure it (Z-axis, position and scale). Finally, don’t forget to add the SKSpriteNode to the nodeWorld! (who has been added to the scene).
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; } |
- Note how we put our hero SKNode in the middle of the screen (0,0). The zPosition is 10, in order to have it over the rest of the nodes . Now the SKNode needs an image, so we are going to add a SKSpriteNode as a child. And again, don’t forget to add our new nodeCopter to the father of all: nodeWorld. The last part of the method is the responsible of creating a physical body for our hero. We want to detect whether our Copter touches an enemy or the screen, so we assign it a circular body. Moreover, we are setting it with some linear and angular damping, allowing it to rotate, and just for now, not affected by gravity. If we set here a “true”, the copter will be moving once the game start, and we want it to move just when we first tap in the screen and start the game. Finally, we set 2 important parameters: Which type of body it is (category), and which others can interact with it (screen and enemies).
Build and Run:
And there it is our little hero!!!! 🙂
Okey, that is enough for now:
- We have setup the project
- Made a sketch with the scenes and transitions
- Prepared it for the iphone5 screen
- Create the main nodes of our node tree
- Set up the main physical bodies of the scene
- Created our awesome hero!
In the Part II of the tutorial, we will finish the job with:
- Create the enemies
- Move our hero with taps
- Center the camera on him
- Detect collisions
- Transition to another scene
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)