Tuesday, July 28, 2015

Combining Balls Animation -- Epic Color Crash Step 4

OK it has been a couple of days since the last step was posted. I am splitting my time between a couple of web service applications, a new game, this tutorial, selling stuff on eBay, and sometime I should work on getting a job. Anyway it is time for the next step.

Preview: Here is what the game will be like at the end of this step:


Now that we have the images for the animations created we can start the game logic. The first thing I am going to add is the ability to swipe between two primary colored balls to produce a secondary colored ball.

I don't really need to do a swipe detection, all I really need to do is on a touchesBegan check and see what ball, if any, the user touched. Then on the touchesMoved check and see if the touch has moved to a different ball. Then if the balls are allowed to combine we can combine the balls.

The touchesBegan function in GameScene.swift currently looks like this:
    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        /* Called when a touch begins */
        
        for touch in (touches as! Set<UITouch>) {
        }

    }

First we want to get the location of the touch in the local coordinates. Inside the for loop add:
let location = touch.locationInNode(self)

Now we want to see if there are any balls at this location. self.nodesAtPoint(location) will give us a list of all of the scenes child nodes that are at the location. These nodes may or may not be a colored ball. So I will create an optional called startBall. Add startBall right after the declaration for newBallDelay in the Game scene class.
class GameScene: SKScene {
    var lastBallDropped: CFTimeInterval = 0
    var newBallDelay: CFTimeInterval = 1.5
    var startBall: ColoredBall?

We will then get the list of nodes at the touch location, assuming there is at least one node we will try and set the startBall to the touched node as a ColoredBall. If the node is not an object with the class of ColoredBall then startBall will be set to no value. However if it is a ColoredBall object then the optional will be set. When this happens we don't need to look at anymore nodes or anymore touches and we can just return. So after let location = touch.locationInNode(selfadd:

            let balls = self.nodesAtPoint(location)
            if balls.count >= 1 {
                for aBall in balls {
                    startBall = aBall as? ColoredBall;
                    if startBall != nil {
                        return
                    }
                }
            }

Now we want to get touchesMoved events and see if the user swipes into a different ball. We add the touchesMoved function and like the touchesBegan convert the touch location to our local coordinates, and check to see if there is a ColoredBall at that location. If there is a ColoredBall at that location than we make sure we have a starting ball, and the starting ball is not the same as the ball being touched. If that is the case than we can try and combine the balls.
 
    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {
        for touch in (touches as! Set<UITouch>) {
            let location = touch.locationInNode(self)
            let aBall:ColoredBall? = self.nodeAtPoint(location) as? ColoredBall
            if startBall != nil && aBall != nil && aBall != startBall {
                primaryContact(startBall!, spriteB: aBall!)
                startBall = nil
                return
            }
            
        }
    }

The way this is written the first touch has to be in a ball, however we could change it so that if the startBall is not set then we would set the startBall to the current ball being touched which would allow a swipes that pass through two balls but didn't start in a ball. I could change this in my current game, but the method above works well.

I have added a call to a new function primaryContact let's write that function. The function will take two colored balls and check to see if they are colors that can be combined, if so combine to make a new colored ball. This is a big nested set of if else code. Given that in sprite you can have switch statements with strings this could be rewritten with switch statements. However eventually I will convert this code to Objective-C and to C++ which would require it to be if else statements. Since either works just fine I will stick to the classic if else method.

We create a the function:
    func primaryContact(spriteA: ColoredBall, spriteB: ColoredBall) {

If the first ball is red then check and see if the second ball is yellow or blue, if so create an orange or purple ball.
        if spriteA.name == "red" {
            if spriteB.name == "yellow" {
                // make an orange ball
                ebcc_combineSprites(spriteA, spriteB: spriteB, color: "orange")
                orangeBalls.insert(spriteB)
            } else if spriteB.name == "blue" {
                // make a purple ball
                ebcc_combineSprites(spriteA, spriteB: spriteB, color: "purple")
                purpleBalls.insert(spriteB)
                
            }
OK, same thing if the first ball is yellow but test for red and blue to get orange and green. 
        } else if spriteA.name == "yellow" {
            if spriteB.name == "red" {
                // make an orange ball
                combineSprites(spriteA, spriteB:spriteB, color: "orange")
            } else if spriteB.name == "blue" {
                // make a green ball
                combineSprites(spriteA, spriteB: spriteB, color: "green")
            }

And finally if the first is blue then red to purple and yellow to green.
        } else if spriteA.name == "blue" {
            if spriteB.name == "red" {
                // make a purple ball
                combineSprites(spriteA, spriteB: spriteB, color: "purple")
                purpleBalls.insert(spriteB)
            } else if spriteB.name == "yellow" {
                // make a green ball
                combineSprites(spriteA, spriteB: spriteB, color: "green")
            }
        }
        
    }
But I still have not written the code to combine the sprites. Let's do that now. The combineSprites function will take two colored balls and string designating the new color. 
    func combineSprites(spriteA: ColoredBall, spriteB: ColoredBall, color: String) {
First I will move the second ball to be halfway between the two balls.
        spriteB.position.x = (spriteA.position.x + spriteB.position.x) / 2
        spriteB.position.y = (spriteA.position.y + spriteB.position.y) / 2
Then we will run a little animation that will turn the second ball into one with the new color.
        switch color {
        case "orange":
            spriteB.runAction(orangeAction!)
        case "green":
            spriteB.runAction(greenAction!)
        case "purple":
            spriteB.runAction(purpleAction!)
        default:
            spriteB.texture = SKTexture(imageNamed: color)
        }

Here I did use the switch statement instead of a bunch of if else statements. When we create the Objective-C and C++ code this will have to change. The switch statement in Swift requires a default case. This should never happen because we always send orange, green, or purple. However if for some strange reason we added some other color then we will just change the texture to an image with that color as the name. Again this never happens.

Now I want to remove the first ball from the scene. And since it will no longer have anything referencing it, it will be freed.
        spriteA.removeFromParent()

And finally I will change the name of the second sprite to the new color. This is critical so that we can test if it is touching other secondary colored balls and also so our touchesBegan and touchesMoved functions don't think it is a primary colored ball.
        spriteB.name = color
    }

OK they are combined, but I added the use of some actions that are not defined yet. Finally we get to use the animation images we created in the last step.

First I'll add optionals for each color action, and then a sound action to play when the balls are combined. I found a public domain sound that I downloaded. I'll let you go find your own. On the sound action I use waitForCompletion to tell it to start the drip sound and then continue with other actions.
    var orangeAction: SKAction?
    var greenAction: SKAction?
    var purpleAction: SKAction?
    var dripSound = SKAction.playSoundFileNamed("drip.wav", waitForCompletion: false)

We need to actually assemble the actions. I'll do that in the scene's didMoveToView function right after the self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)
First I'll check to see if the action already was created in a previous didMoveToView call
        if orangeAction == nil {

Then I'll get an atlas with the animation images. The problem is we are not guaranteed what order they will be in. So I sort them and then I can create an animation with 0.075 seconds between images for just a little less than half a second total. Then I can create an sequence that plays the sound and then runs the image animation.
            let orangeAtlas = SKTextureAtlas(named: "orange")
            let orangeTextures = sorted(orangeAtlas.textureNames as! [String]).map { orangeAtlas.textureNamed($0) }
            let orangeAnimation = SKAction.animateWithTextures(orangeTextures, timePerFrame: 0.075)
            orangeAction = SKAction.sequence([dripSound,orangeAnimation])
        }
Repeat for green and purple
        if greenAction == nil {
            let greenAtlas = SKTextureAtlas(named: "green")
            let greenTextures = sorted(greenAtlas.textureNames as! [String]).map { greenAtlas.textureNamed($0) }
            let greenAnimation = SKAction.animateWithTextures(greenTextures, timePerFrame: 0.075)
            greenAction = SKAction.sequence([dripSound,greenAnimation])
        }
        if purpleAction == nil {
            let purpleAtlas = SKTextureAtlas(named: "purple")
            let purpleTextures = sorted(purpleAtlas.textureNames as! [String]).map { purpleAtlas.textureNamed($0) }
            let purpleAnimation = SKAction.animateWithTextures(purpleTextures, timePerFrame: 0.075)
            purpleAction = SKAction.sequence([dripSound,purpleAnimation])
        }

Now we need to add the images and sound to our project. Previously I created a group called images, but I am going to be putting sounds in here too, so I am going to rename it assets, a much better name.

Then File->Add Files to "EpicColorCrash"... and select the atlas directories we created in the last step.
Make sure Copy items if needed is selected and Create groups is selected. And click Add. Then download or create a sound for the drip.wav and add it to the project.


Build and run. Now you should be able to swipe between balls, get a cool little animation and a sound.
Here is the GameScene.swift file at the end of this step:
//
//  GameScene.swift
//  Epic Color Crash
//
//  Created by Daniel Burton on 7/25/15.
//  Copyright (c) 2015 Daniel Burton. All rights reserved.
//

import SpriteKit

class ColoredBall: SKSpriteNode {
}

class GameScene: SKScene {
    var lastBallDropped: CFTimeInterval = 0
    var newBallDelay: CFTimeInterval = 1.5
    var startBall: ColoredBall?
    var orangeAction: SKAction?
    var greenAction: SKAction?
    var purpleAction: SKAction?
    var dripSound = SKAction.playSoundFileNamed("drip.wav", waitForCompletion: false)

    func addColorBall(location: CGPoint, withColor color:String) {
        let sprite = ColoredBall(imageNamed: color)
        
        sprite.position = location
        sprite.name = color
        let body = SKPhysicsBody(circleOfRadius: 25)
        sprite.physicsBody = body
        body.allowsRotation = false
        body.friction = 0.0
        self.addChild(sprite)
    }
    
    func combineSprites(spriteA: ColoredBall, spriteB: ColoredBall, color: String) {
        spriteB.position.x = (spriteA.position.x + spriteB.position.x) / 2
        spriteB.position.y = (spriteA.position.y + spriteB.position.y) / 2
        switch color {
        case "orange":
            spriteB.runAction(orangeAction!)
        case "green":
            spriteB.runAction(greenAction!)
        case "purple":
            spriteB.runAction(purpleAction!)
        default:
            spriteB.texture = SKTexture(imageNamed: color)
        }
        spriteA.removeFromParent()
        spriteB.name = color
    }

    func primaryContact(spriteA: ColoredBall, spriteB: ColoredBall) {
        if spriteA.name == "red" {
            if spriteB.name == "yellow" {
                // make an orange ball
                combineSprites(spriteA, spriteB: spriteB, color: "orange")
            } else if spriteB.name == "blue" {
                // make a purple ball
                combineSprites(spriteA, spriteB: spriteB, color: "purple")
                
            }
        } else if spriteA.name == "yellow" {
            if spriteB.name == "red" {
                // make an orange ball
                combineSprites(spriteA, spriteB:spriteB, color: "orange")
            } else if spriteB.name == "blue" {
                // make a green ball
                combineSprites(spriteA, spriteB: spriteB, color: "green")
            }
        } else if spriteA.name == "blue" {
            if spriteB.name == "red" {
                // make a purple ball
                combineSprites(spriteA, spriteB: spriteB, color: "purple")
            } else if spriteB.name == "yellow" {
                // make a green ball
                combineSprites(spriteA, spriteB: spriteB, color: "green")
            }
        }
        
    }
    
    override func didMoveToView(view: SKView) {
        
        /* Setup your scene here */
        self.scaleMode = .AspectFit

        self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)
        if orangeAction == nil {
            let orangeAtlas = SKTextureAtlas(named: "orange")
            let orangeTextures = sorted(orangeAtlas.textureNames as! [String]).map { orangeAtlas.textureNamed($0) }
            let orangeAnimation = SKAction.animateWithTextures(orangeTextures, timePerFrame: 0.075)
            orangeAction = SKAction.sequence([dripSound,orangeAnimation])
        }
        if greenAction == nil {
            let greenAtlas = SKTextureAtlas(named: "green")
            let greenTextures = sorted(greenAtlas.textureNames as! [String]).map { greenAtlas.textureNamed($0) }
            let greenAnimation = SKAction.animateWithTextures(greenTextures, timePerFrame: 0.075)
            greenAction = SKAction.sequence([dripSound,greenAnimation])
        }
        if purpleAction == nil {
            let purpleAtlas = SKTextureAtlas(named: "purple")
            let purpleTextures = sorted(purpleAtlas.textureNames as! [String]).map { purpleAtlas.textureNamed($0) }
            let purpleAnimation = SKAction.animateWithTextures(purpleTextures, timePerFrame: 0.075)
            purpleAction = SKAction.sequence([dripSound,purpleAnimation])
        }

    }
    
    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        /* Called when a touch begins */
        
        for touch in (touches as! Set<UITouch>) {
            let location = touch.locationInNode(self)
            let balls = self.nodesAtPoint(location)
            if balls.count >= 1 {
                for aBall in balls {
                    startBall = aBall as? ColoredBall;
                    if startBall != nil {
                        return
                    }
                }
            }
        }
    }
    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {
        for touch in (touches as! Set<UITouch>) {
            let location = touch.locationInNode(self)
            let aBall:ColoredBall? = self.nodeAtPoint(location) as? ColoredBall
            if startBall != nil && aBall != nil && aBall != startBall {
                primaryContact(startBall!, spriteB: aBall!)
                startBall = nil
                return
            }
            
        }
    }

    override func update(currentTime: CFTimeInterval) {

        // if the time has come to drop a new ball
        if currentTime > (lastBallDropped + newBallDelay) {
                lastBallDropped = currentTime
                let colors = ["red", "yellow", "blue"]
                var xpos = Int(arc4random_uniform(UInt32(self.size.width-100) ))+50
                let ypos = self.size.height - 120
                let location = CGPoint(x: xpos, y: Int(ypos))
                var colorIndex = arc4random_uniform(3)
                addColorBall(location, withColor: colors[Int(colorIndex)])
        }

    }
    

}

Sunday, July 26, 2015

Creating Swirling Ball Animations -- Color Crash Step 3


Now that we have balls dropping into the game it is time to start adding in some game logic. Eventually the screen will be so full of balls that there isn't room for anymore, but I'll leave the game over logic for later, first I want to start combining balls. I want to make it so that swiping between two primary colored balls produces a secondary colored ball. When this happens I could just remove one of the balls and then change the other ball into the new color, but it would be nice if there was a animation that happens when the balls are combined. So I am going to need some animation images.

My daughter went to BYU and their school color is blue, she just married a guy who is going to the rival school the University of Utah whose color is red, so their wedding color was purple, and that is the first animation I'll do, turning a red and a blue into a purple.

In Gimp I will open up my purple.xcf file that we created in step 1 and zoom into 400%.
 
Now I am going to open the red.xcf and blue.xcf files as layers. In the menu File->Open as Layer and select both the red and blue files. I can see in the Layers - Brushes window that I have a bunch of transparent layers with nothing in them.
I don't need the empty layers. I'll select the empty layers and click on the little trash can to delete them. I now have a red layer a blue layer and a purple layer. Now I create a mask for the red layer by selecting the red layer and then in the menu Layer->Mask->Add Layer Mask... Select the White (full opacity) option and click on Add.
Now click on the new white mask layer next to the red layer to select it.
Now I want to make make a transparent spiral in the mask which will reveal some of the blue layer below. So in the Toolbox window I will select the pencil tool and set the brush size to be 5 and make sure the color is black.
I will now draw a spiral on the red ball which will reveal the blue ball below, and in the Layer - Brushes window you will see the spiral show up on the mask.
This will be the first image in my animation, so I will save it as purple001.xcf, then create a new directory called purple.atlas and and export it as purple001.png putting the png file in the atlas directory. 
OK, now I'll select the blue layer in the Layer - Brushes window and in the menu Layer->Mask->Add Layer Mask... select a White (full opacity) and Add. Then select the new mask layer.
Once again I will draw a spiral on the mask but last time I did a counter clockwise spiral and this time I will do a clockwise spiral to get a mixing effect. 
I want things to look like they are swirling so the red mask I am going to rotate counter clockwise. First I select the red mask in the Layers - Brushes window and then in the menu Select->All then click on the rotate tool in the Toolbox and click and drag counter clockwise a few degrees.

Then I'll click on the little anchorin the Layers - Brushes window to finish the rotation. And then save as purple002.xcf and export as purple002.png

I now select the red mask, rotate it a few degrees counter clockwise again then draw a new spiral in the mask.
Then I'll select the blue mask rotate it a few degrees clockwise and draw a new clockwise spiral using the pencil. We are now getting a nice mix of red blue and purple. I'll save this as purple003.xcf and export as purple003.png.

Then repeat the rotating the masks and drawing the spirals 2 more times each time saving then next image in the animation, purple004 and purple005.

Then copy the purple.png file from the images.atlas directory to the purple.atlas directory and rename it to purple006.png. I now have a 6 image animation that for combining a red and blue ball to create a purple ball.

I can now repeat this process with green blue and yellow, and orange red and yellow to create animations for green and orange. 
After creating the orange an green animations I can now go back to Xcode and select my images group and the menu File->Add Files to "Epic Color Crash" 
Now we are ready to do some more programming which will be the next step.

Saturday, July 25, 2015

Creating the Xcode Project (Swift/SpriteKit) -- Epic Color Crash Step 2

At the end of this project we will have three versions of this game, one is Swift and one in Objective-C using SpriteKit, and a cross platform version written in C++ using Cocos2d-x. This will give us a good feel for the differences in these options.

Preview: This is what you will have at the end of this step:

First the Swift/SpriteKit version

I initially wrote this in Swift using SpriteKit just because Swift and SpriteKit didn't exist when I did my last iOS programming projects and so it seemed like a great way to get to know the new language and the new framework.

I'm using Xcode version 6.4.

First I'm going to create an Xcode project, so I start up Xcode and select Create a new Xcode Project
If you don't get this dialog, then go to File->New->Project...


This is a game so we select... you guessed it "Game" and then click Next
In the next dialog we will select the name and environment for the game. For product name enter "Epic Color Crash". Then enter your Organization Name. I use my name here. Then your Organization Identifier. This needs to be unique from anyone else. The way to do this is to use a domain name that you own. Have several domain names that I own. I will be using epicbiking.com for promoting and supporting my applications so I will use epic biking.com as my Identifier except the convention is to put the domain name in reverse order so com.epicbiking. Then Xcode automatically selects com.epicbiking.Epic-Color-Crash as my Bundle Identifier. This is the unique name for my app and since I own epicbiking.com I don't have to worry that someone is already using that name.
Select the language: Swift
Game Technology: SpriteKit
Devices: Universal
So it should look like this with the com.epicbiking replaced with your own domain.
Make sure you select SpriteKit not SceneKit the names are close enough that it is easy to select the wrong one.

Select Next and it will ask you where to save the projects. I'll create a new directory in my home called Projects and put it there. My home resides on the new hard drive I installed so it will not eat up my startup disk space.
(Yes, my home is called pichu766, my son was into Pokemon and when I inherited his computer I didn't bother changing it.)
After creating the projects I get the shell of a project created. It is actually a functioning app that can be run in the simulator. However the first thing I notice is a little warning sign. In order to be able to distribute the game and get it on actual devices you need to have it signed. This will require that you have a Apple Developers license. I'm not going to cover getting a license set up. If you don't want to pay to be a developer than you will have to just run the app on the simulator. If you register as a developer or already are registered as a developer you can click the "Fix Issue" button.
This is great, we now have a project with a bunch of stuff already set up for us.

  • AppDelegate.swift file:  This is required for any app, but for what we are doing we won't need to be changing the defaults so we will ignore it.
  • GameScene.swift file: This is where we will do most of our work.
  • GameScene.sks file: This allows us to layout our scene without having to write code to create elements of the scene. We will modify this adding some of the interface items for our scene.
  • GameViewController.swift file: We will do a little work here. However we will be using SpriteKit scenes and will end up with a MenuScene that will end up doing a lot of what would normally be done in the main view controller.
  • Main.storyboard file: Again we will be using SpriteKit scenes and won't be changing this file.
  • Images.xcassets group: this contains the icons for our game and a spaceship image. Delete the spaceship image, we are not writing a spaceship game. In a future step we will create the icons and put them in here.
  • LaunchScreen.xib file: For now we will leave this alone.
  • In the Supporting Files there is a Info.plist file: Ignore this and the remaining files for now.

First thing we will do is delete out the hello world spaceship code from GameScene.swift.
In the didMoveToView function delete these lines:
        let myLabel = SKLabelNode(fontNamed:"Chalkduster")
        myLabel.text = "Hello, World!";
        myLabel.fontSize = 65;
        myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));
        

        self.addChild(myLabel)
In the touchesBegan function remove these line:
            let location = touch.locationInNode(self)
            
            let sprite = SKSpriteNode(imageNamed:"Spaceship")
            
            sprite.xScale = 0.5
            sprite.yScale = 0.5
            sprite.position = location
            
            let action = SKAction.rotateByAngle(CGFloat(M_PI), duration:1)
            
            sprite.runAction(SKAction.repeatActionForever(action))
            
            self.addChild(sprite)
OK, we now have an empty SpriteKit game that we can start building on.
Now we want to add our colored balls we created in the previous step to our game. SpriteKit can us image atlases that store multiple images in one file which reduces the overall size of the images and makes the rendering of a scene faster. We want to use this so I will move the images into a directory that only has the .png files in it. I'll call it images.atlas by putting .atlas at the end of the directory name Xcode will automatically do the work to create an image atlas. It really is cool all the things SpriteKit does for you so you can concentrate on your game.
Now I want to add these files to my project, so I select File->Add Files to "Epic Color Crash"...
I will select Copy Items if needed to create a copy of my images in my project, and select Create Groups so that it will set it up as a image atlas group.

Select Add and we now when we build the app it will create an image atlas for us and SpriteKit will know how to get the images we want out of the atlas. 
Later we will want to create a few other atlases so I am going to create a group called images and put the image atlas into that group. So I right click on the images.atlas group and select New Group from Selection and then name the new group images.
Now we are ready to start writing some code.

First I'm going to create a class called ColoredBall. To start with it is simply a subclass of SKSpriteNode with nothing added. But by creating it as a new class we can add functionality to it later.
So in GameScene.sprite just below the import SpriteKit we will add the empty class for our balls.

class ColoredBall: SKSpriteNode {
}

Now let's create a function that will create a new ColoredBall and add it to our scene. I'm going to add it as the first function in the GameScene class but really the order of the functions doesn't matter. I want to pass in the location and color of the new ball. So right after class GameScene: SKScene { I'll add:
    func addColorBall(location: CGPoint, withColor color:String) {

Next I want to create the actual ColoredBall object. It is really easy to create a colored ball using one of the images from our images.atlas, we simply create a new sprite (or ColoredBall which is a subclass of Sprite) and tell it the name of the image, between Xcode and SpriteKit all the work is done to find and extract the image from the atlas.
        let sprite = ColoredBall(imageNamed: color)

I set the position to the location passed in:
       sprite.position = location

And I'm going to set the name of the sprite to be the color of the ball this will make it easy to find all the blue balls or red or whatever.
        sprite.name = color

Now I want to use the SpriteKit's physics engine to make the balls fall bounce around etc. So I create a physics body that is a circle that is the same size as the images I created. I created the balls with a highlight at the top of the ball if it rotates around it will just look wrong, so I will tell the physics body not to rotate, also I want the balls to slip around and fill in the available space so I am going to give them no friction:
        let body = SKPhysicsBody(circleOfRadius: 25)
        body.allowsRotation = false
        body.friction = 0.0
Finally I attach the physics body to the set the sprite to have that physicsBody, and add the sprite to the scene.
        sprite.physicsBody = body
        self.addChild(sprite)
    }
Here is the new function:
    func addColorBall(location: CGPoint, withColor color:String) {
        let sprite = ColoredBall(imageNamed: color)
        
        sprite.position = location
        sprite.name = color
        let body = SKPhysicsBody(circleOfRadius: 25)
        sprite.physicsBody = body
        body.allowsRotation = false
        body.friction = 0.0
        self.addChild(sprite)
    }
Now I want to make it so balls start falling into my scene. SpriteKit uses a rendering loop for each frame before it is rendered. These are the steps in the loop: 

Call the scenes update. This is where we will do most of our work like adding sprites.
Then the scene evaluates and actions and then calls didEvaluateActions. The scene then simulates any physics and the calls didSimulatePhysics. Then constraints are applied and didApplyConstraints is called, didFinishUpdate is called, and finally the scene is rendered.

We can do all of our work in the update function and in the event handling functions. I don't want to drop a new ball on every update, instead I want a have a delay between ball drops, and as the levels increase we will make that delay shorter. So I am going to add to properties to my GameScene class, lastBallDropped and newBallDelay. After the class GameScene: SKScene { add properties for the time the last ball was dropped, and the delay between drops.
    var lastBallDropped: CFTimeInterval = 0
    var newBallDelay: CFTimeInterval = 1.5

Now we can add the code to drop balls during the update. The current time is passed into update. We will compare that time with the last time a ball was dropped and see if the new ball delay has expired. If it has we will save the time that the new ball is being dropped an drop a new ball.
        if currentTime > (lastBallDropped + newBallDelay) {
                lastBallDropped = currentTime

We want a random color for the ball and a random position to drop the ball so we will use arc4random_uniform to create our random numbers.
                let colors = ["red", "yellow", "blue"]
                var xpos = Int(arc4random_uniform(UInt32(self.size.width-100) ))+50
                let ypos = self.size.height - 120
                let location = CGPoint(x: xpos, y: Int(ypos))
                var colorIndex = arc4random_uniform(3)
And then finally add the ball:
                addColorBall(location, withColor: colors[Int(colorIndex)])

The GameScene.swift file should now look like this:
//
//  GameScene.swift
//  Epic Color Crash
//
//  Created by Daniel Burton on 7/25/15.
//  Copyright (c) 2015 Daniel Burton. All rights reserved.
//

import SpriteKit

class ColoredBall: SKSpriteNode {
}

class GameScene: SKScene {
    var lastBallDropped: CFTimeInterval = 0
    var newBallDelay: CFTimeInterval = 1.5

    func addColorBall(location: CGPoint, withColor color:String) {
        let sprite = ColoredBall(imageNamed: color)
        
        sprite.position = location
        sprite.name = color
        let body = SKPhysicsBody(circleOfRadius: 25)
        sprite.physicsBody = body
        body.allowsRotation = false
        body.friction = 0.0
        self.addChild(sprite)
    }

    
    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
    }
    
    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        /* Called when a touch begins */
        
        for touch in (touches as! Set<UITouch>) {
        }
    }
   
    override func update(currentTime: CFTimeInterval) {

        // if the time has come to drop a new ball
        if currentTime > (lastBallDropped + newBallDelay) {
                lastBallDropped = currentTime
                let colors = ["red", "yellow", "blue"]
                var xpos = Int(arc4random_uniform(UInt32(self.size.width-100) ))+50
                let ypos = self.size.height - 120
                let location = CGPoint(x: xpos, y: Int(ypos))
                var colorIndex = arc4random_uniform(3)
                addColorBall(location, withColor: colors[Int(colorIndex)])
        }

    }
    

}

We can now build the app and run it on a simulator. Colored balls will appear near the top and fall of the bottom of the screen. Not exactly what we want. We want them to stay in the scene. So lets add a border to contain the balls. Add one line to the didMovetoView function to create a physicsBody that is an edge loop. The physics engine will not apply physics to the edge loop but other objects that are affected by the physics engine will bounce off the edge instead of just going through it. We will just create the loop as a rectangle that is the size of our scene. All of this in one simple line:

    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)

    }

OK now it drops ball but we can see that our scene is actually bigger than the screen. Also we want the game to be the same no matter what device it is running on so that on an iPad you don't have a big area that holds hundreds of balls and on an old iPhone you have a scene that only holds a few dozen. So I am going to resize the scene and then have SpriteKit scale the scene to fit the device.

First I select the GameScene.sks file in the Navigator panel, and then in the Utilities panel on the right I click on the node inspector icon, a circle with four little circles in the corners (OK, I know circles don't have corners.) I can now set the background color to black and the size to 422 by 750. 



Now back in the didMoveToView function I set the scale mode AspectFit, scale to fit the full scene in on the screen but keep the x scale and y scale the same.
        self.scaleMode = .AspectFit

Now if we run it on any of the simulators we should get a consistent game area. Here is the GameScene.swift file so far:
//
//  GameScene.swift
//  Epic Color Crash
//
//  Created by Daniel Burton on 7/25/15.
//  Copyright (c) 2015 Daniel Burton. All rights reserved.
//

import SpriteKit

class ColoredBall: SKSpriteNode {
}

class GameScene: SKScene {
    var lastBallDropped: CFTimeInterval = 0
    var newBallDelay: CFTimeInterval = 1.5

    func addColorBall(location: CGPoint, withColor color:String) {
        let sprite = ColoredBall(imageNamed: color)
        
        sprite.position = location
        sprite.name = color
        let body = SKPhysicsBody(circleOfRadius: 25)
        sprite.physicsBody = body
        body.allowsRotation = false
        body.friction = 0.0
        self.addChild(sprite)
    }

    
    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        self.scaleMode = .AspectFit

        self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)

    }
    
    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        /* Called when a touch begins */
        
        for touch in (touches as! Set<UITouch>) {
        }
    }
   
    override func update(currentTime: CFTimeInterval) {

        // if the time has come to drop a new ball
        if currentTime > (lastBallDropped + newBallDelay) {
                lastBallDropped = currentTime
                let colors = ["red", "yellow", "blue"]
                var xpos = Int(arc4random_uniform(UInt32(self.size.width-100) ))+50
                let ypos = self.size.height - 120
                let location = CGPoint(x: xpos, y: Int(ypos))
                var colorIndex = arc4random_uniform(3)
                addColorBall(location, withColor: colors[Int(colorIndex)])
        }

    }
    

}

In the next step we will start adding in some game logic.

My Bicycle Store