Seminar Games Development with iOS (WS13/14)

“Tell me and I will forget.

Show me and I will remember.

Involve me and I will understand.

Step back and I will act.”

 

iOS Particle Effects with Sprite Kit Tutorial

 

Table of contents

 

1. What is a particle effect?

2. Why you should use particle effects

3. What you will learn

4. Programming a particle effect

5. Exercise 1: Properties

6. The Particle Editor

7. Exercise 2: Particle Editor

8. Summary

9. Outlook

 

 

 

1. What is a particle effect?

A particle system is a set of seperate small objects, so called particles, it's position and motion is controlled by the emitter. These systems are used to simulate 'highly chaotic' effects, such as fire, water, smoke, explosions and so on. [1],[2]

 

2. Why you should use particle effects

With SpriteKit in iOS7 it's really easy to create and implement particle systems and add them to your project. Particle systems are the most efficient way to create special effects and render them on screen. And of course: They really look great!

                        

 

3. What you will learn

In this tutorial you will learn how to create and implement particle systems in iOS7 via instantiating a particle system and setting it's values in code or via the new Particle Editor in Xcode. With the Particle Editor you can create a particle file, design your particle system and link it to your project.

 

4. Programming a particle effect

So let's start with the basics you need to know. SpriteKit has it's own class for particle systems, the SKEmitterNode Class. It automatically creates and renders small particle sprites. You need to create one instance of this class, set the birth rate of new particles and provide starting values for a particle's properties. Speaking of properties, there are a lot of different values you have to set. Every particle system has a total of 44 different properties, each one influences the look and behaviour of individual particles and of the particle system as a whole. Fortunately you don't need to set all of them in order to see something on the screen.      Let's have a look at the some of the most important properties.

 

• Range properties

Some properties have an extra range property. It determines the range of randomness that is allowed for a property. For example let's say you create your fire particle system with the property fire.particleSpeed = 100. That means that your particles move with average speed of 100 points per second. When you set fire.particleSpeedRange = 50, your particles are allowed to move in the range between 100 - 50 and 100 + 50 points per second. So each of your particles moves at a random speed between 50 and 150 points per second.

 

• Creation of particles

particleBirthRate is the number of particles generated every second.

numParticlesToEmit is the number of particles the emitter should generate before stopping. If the value is 0 the emitter generates an endless stream of particles.

 

• Lifetime

particleLifetime defines the average lifetime of a particle in seconds. So this is the time a particle is on screen before it vanishes.

• Position

particlePosition is the average starting position of a particle. It is defined via it's x and y position, so your best bet is to give it a CGPoint instead of a single float value.

particleZPosition is the average starting depth of a particle.

 

• Velocity and acceleration

particleSpeed is the initial speed of a particle in points per second.

emissionAngle is the average initial direction of a particle. So this means that this is the angle in which the particle is emitted.

 

         

    90 degrees                                                                       30 degrees

 

 

xAcceleration is the horizontal acceleration of a particle.

yAcceleration is the vertical acceleration of a particle.

• Rotation

particleRotation is the initial rotation of a particle.

 

         

     45 degrees                                                                      180 degrees

• Scale

particleScale is the initial scale factor of a particle. This means that it changes the size of a particle.

 

         

   scale factor 2.0                                                        scale factor 0.5

• Texture

particleTexture is the texture to use to render a particle. It defines the look of your particle using an image file. If you forgot to set the texture, your particles will look like colored squares. You can use this line to set the texture:

 

         

         

5. Exercise 1: Properties

Now it's time for our first exercise! Download the template project here. We need to add some explosion particle systems to this super realistic space simulator for the iPad. Everytime one of the falling stars hits our spaceship it should explode like in Star Wars! Your task is to create an explosion particle system and set the properties via code.

Open SpaceshipScene.m and in the method (void)didBeginContact:(SKPhysicsContact *)contact add:

In (SKEmitterNode *)newExplosion add the following:

Now uncomment the code and set the right values for the properties in (SKEmitterNode *)newExplosion to create a nice little explosion when your ship gets hit. Rebuild and Test your project after every change to see the results. Don't forget to add your explosion to the parent node.

Exercise 1: possible solution

If you didn't make it by yourself, here are some values which should work:

This was not exactly fast and easy. But fortunately theres a better way to do this!

6. The Particle Editor

Xcode has a built in Particle Editor where you can directly see the results when changing some values. The implementation works with just a few lines of code because you don't need to set any properties.

Let's create our first particle file! In Xcode go to File->New->File then choose Resource and add a SpriteKit Particle File to your project. In the next screen you can choose between different particle templates. We need the fire template for the following exercise but feel free to try out some of the other templates too! After you have created the particle file you should see this emitter Inspector in Xcode:

As you can see all the important properties are listed here. On the top there is the background pop-up menu, it changes the color of the Editor background. When the game is built, the background color is saved, but is not used at runtime.

Below the background you can set the particle texture. You can choose any image file you have added to your project, but keep in mind that the larger or more complex your image is, the more resources it uses.

And below the particle texture, you can set all the desired properties. There are properties determining the life cycle of your particle systems with birthrate, lifetime and maximum particles to emit. Then theres the particle generation section with emission angle, particle speed, acceleration and position range. Be careful here: Position range determines the random range in which the particles are emitted from the initial emitter position, not the position of the particle system itself!

The geometry modifier section with scale and rotation changes the look of a particle. And last but not least, the color modifier section determines the blending and color of your particles. You can even set multiple color values depending on the current lifecycle of a particle. To do that, simply click anywhere on the color ramp and set the desired color. Drag the colors where you want them in the lifecycle along the color ramp.

7. Exercise 2: Rocket Trail Effects

Now it's time for our second exercise! Our spaceship needs some rocket trail effects to make it look more realistic.

Use your fire template particle file and play around with the different values to create something that looks like a rocket trail!

When you're done go back to the SpaceshipScene.m file.

In (SKEmitterNode *)newFireEmitter we need a path to our SpriteKit particle file:

And now we need to instantiate a new SKEmitterNode with our file path and return it:

In order to see our particle on screen at the right position we need to add some lines in the (SKSpriteNode *)newSpaceship method.

Instantiate the rocket trail for our spaceship:

Add the particle system to the spaceship node:

And finally, build and run your project.

Something seems to be wrong with our rockettrail. It's your turn to figure out what is wrong!

Hint: maybe you need to set a few properties before adding the emitter node to the spaceship.

Exercise 2: possible solution

If you couldn't figure it out, have a look at this:

8. Summary

Ok now what have we learned today? Particle systems can create beatiful special effects with little effort, but programming particle effects is cumbersome and takes a lot of time. In iOS7 we can use the Particle Editor, which makes it very easy to change the large amount of different properties and instantly see their effect.

This is it! I hope you enjoyed my little tutorial and use some of those great particle systems in your app. ;-)

Happy coding!

9. Outlook

Here are some further readings for you if you want to learn more about the topic:

• Apple Particle Emitter Editor guide:

https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/xcode_guide-particle_emitter/Introduction/Introduction.html

• SKEmitterNode Class Reference:

https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKEmitterNode_Ref/Reference/Reference.html

References

• [1] Particle Systems Talk by Allen Martin
• [2] Particle Systems Wikipedia
• [3] SKEmitterNode Class Reference
• [4] Particle Emitter Editor Guide

Projects

• Template
• Solution