Adding particle effects

The easiest way to add cool visual effects to your game is through particle effects. Have you wondered how to add a rain effect in the background of your scene, how to  add sparks coming out of a volcano,  or how to make  a planet in your game emit a glow? All of these effects can be created using particle effects.

First, let’s try to create a SpriteKit Particle File to see what kind of particle effects are available out of the box. You can add a new SpriteKit Particle File to the project by going to the Resource tab in the iOS template file selection.

In iOS8 we have the effects available, shown in this figure:

After adding one of these particle template files you will either see one scene (sks) and one image (png) file, or just one scene (sks) file added to your project.

The scene file is where you can see the particle effect in action and in the case of our rain effect you will see a scene file that uses the image file named spark.png as a template particle in the rain effect.

Let’s now add this rain effect to our scene. To do this we need the Particle scene file name that we just created, to then pass that to SKEmitterNode.

import SpriteKit

let rainParticle = SKEmitterNode(fileNamed: "RainParticle") 

After creating an instance of it we need to add it to the node in which we want to show the particle effect. This node can be our main scene or a SKNode object. All we do in our example is add it to the visible scene using the addChild method:

addChild(rainParticle)

You will also need to set the position on the rainParticle object in order to see it on the game scene, since it could be out of view. In this example we set the position of the particle to start at the top of the game scene frame and centered horizontally. Below is our code to implement a rain effect in a GameScene with black background:

class GameScene: SKScene { override func didMoveToView(view: SKView) { self.backgroundColor = UIColor.blackColor() let rainParticle = SKEmitterNode(fileNamed: "RainParticle") rainParticle.position = CGPoint(x: frame.width / 2, y: frame.height) rainParticle.particleBirthRate = 1000 addChild(rainParticle) } }

This looks pretty good if you run it, except for the fact that it does not rain purple, which is the color set for the particle by default. So let’s see how we can change these settings by going into the SKNode Inspector for our particle scene.

Going back to Xcode you will find the SKNode Inspector as the third tab item in the Utilities sidebar on the right. Under this you will see various options you can set to control how the particle effect works. You can adjust the following properties:

• Birthrate
• Lifetime
• Position
• Angle
• Speed
• Acceleration
• Transparency (Alpha)
• Scale
• Rotation
• Color Blend
• Color Ramp

You can change these properties using the inspector or you can also do it programatically like we did in our previous example where we set the particleBirthrate to one thousand.

You can play around with these properties in Xcode to get a feel of what you can do to achieve the effect you are looking for. In our case, if we want the rain to fall vertically all we have to do is set the emissionAngle to negative ninety degrees, or positive two hundred seventy degrees, since the degree system starts anti clockwise starting from the x-axis of the scene. Also another thing to note is that the angle measurements are to be done in radians rather than degrees.

Radians is another unit to measure angles like degrees. The difference is that one full circle is made up of 360 degrees where as a full circle in radians is made up of . To learn more, checkout an article on Radians on Wikipedia.

rainParticle.emissionAngle = CGFloat(-90 * M_PI / 180)

Using what we have learned, let’s apply this to our game and have Mr. Steve emit some particle effects to give his character some life. This will be similar to our Rain example, but we will use a Spark particle effect.

To create the Spark particle effect we must create two files. One is a spark image to source from, and the other is a scene file displaying the particle effect. We will configure our effect using the SKNode Inspector. We want to give off a few sparks when Mr. Steve gets some powerups in the game.

In our project we named our particle file PowerUpParticle. To have it appear on top of Mr. Steve we can add it as a child node to our HeroNode, which is a SKSpriteNode. When we create our HeroNode (Mr. Steve) for the first time, we set its instance variable called powerUpParticle by defining it in the class as a private variable:

private var powerUpParticle = SKEmitterNode(fileNamed: "PowerUpParticle")

When defining a variable like this on a class level in Swift, it causes the variables to be defined when the an instance of that class is initialized. This comes in handy since it helps avoid writing initializer methods, especially if all you are doing is setting variables in an object.

These instance variables get set for each instance right before the initializer methods are called, so you can expect them to be created and assigned. Knowing this, we set our powerUpParticle to be paused by setting its property to true.

powerUpParticle.paused = true

Then we setup a method called didGetPowerUp in our HeroNode to be called every time we have a collision with a powerup node. In that we will set the pause and hidden property to false for our particle emitter, so it starts emitting the spark particle effect giving a visual queue of having acquired the powerup. Then using a helper function called callbackAfter, we set the particle’s pause and hidden to true again after half a second to hide it from our game scene.

public func didGetPowerUp() {
    ...
    powerUpParticle.paused = false
    powerUpParticle.hidden = false
    callbackAfter(0.5) {
        self.powerUpParticle.paused = true
        self.powerUpParticle.hidden = true
        ...
    }
    ...
}

Using the technique of hiding and pausing the particle effect, we manipulate the visual effect shown on Mr. Steve.