Scene Kit Tutorial with Swift Part 5: Particle Systems

In this 5-part Scene Kit tutorial series, you’ll learn how to make your first 3D iOS game: a game like Fruit Ninja called Geometry Fighter! By Chris Language.

Leave a rating/review
Save for later
Share
Note: This is an abbreviated chapter from the 3D iOS Games by Tutorials, to give you a sneak peek of what’s inside the book, released as part of 3D iOS Games by Tutorials Week. We hope you enjoy!

Thumb

Welcome back to our Scene Kit Tutorial with Swift series!

This tutorial series will show you how to create your first game with Scene Kit, Apple’s built-in 3D game framework.

In the first part of the series, you learned how to make an empty Scene Kit project as a good starting point.

In the second part of the series, you started making your game, learning about Scene Kit nodes along the way.

In the third part of the series, you learned how to make your geometry move through the power of Scene Kit physics.

In the fourth part of the series, you learned how to make your geometry spawn over time through the Scene Kit render loop.

In this fifth and final part of the series, you’ll add some cool particle systems to the game and wrap it up along the way! :]

Let’s dive back in!

Note: This tutorial begins where the previous tutorial left off. If you didn’t follow along, no sweat – you can simply use the starter project for this tutorial.

Getting Started

Picture yourself in the movie theatre, popcorn in hand; on the screen, a bad guy from The Fast and the Furious smashes his roaring, high-performance dragster into a highly volatile fuel tanker which explodes in a massive fireball of death and carnage. Yeah! :]

Now think of that same scene, but without the massive fireball explosion: you can almost feel the collective disappointment of audiences around the world. :[

Just like a Hollywood blockbuster, your game needs special effects to amp up the excitement level; these special effects come in the form of what’s known as particle systems. You can use particle systems for a multitude of effects, from moving star fields, to burning rocket boosters, to rain and snow, to metal sparks – and yes, even massive exploding fireballs!

Let’s take a look at how you can add some of these neat special effects to Geometry Fighter.

SCNParticleSystem

In Scene Kit, SCNParticleSystem manages the creation, animation and removal of particles from the scene graph.

A particle is essentially a small image sprite. The particle system doesn’t add the individual particles into the scene graph itself, so you don’t have direct access to each particle – the particle system manages the particles and their look, size, and location.

However, you can influence the particle system by modifying various properties on it, such as:

  • Appearance: Each particle of the system can be rendered as a single image, or an animated sequence of images. You can adjust the size, tint color, blending mode and other rendering parameters of the particles generated.
  • Life Span: The system uses a particle emitter, which gives birth to each individual particle. The lifespan of the particle determines how long it stays visible in the scene.
  • Emitter behavior: You can control various parameters of the emitter, such as where particles spawn and the spawn rate.
  • Variation: Introducing variations into your particle system can make it look more, or less, random.
  • Movement: You can adjust how particles move once they’ve spawned. Particles use a simplified physics simulation to speed up performance, but the particles can still interact with objects managed by the physics engine.
Note: You can find the starter project for this chapter under the /starter/Geometry Fighter/ folder, or carry on with the completed project from the last chapter.

Particle System Editor

Before you add a particle system to your game world, you’ll need a group to house this particle system to keep your project organized. Right-click on the GeometryFighter group and select New Group, like so:

CreateParticlesGroup0

Name this new group Particles. Right-click on the group and select New File. Select the iOS\Resource\SceneKit Particle System template and click Next to continue:

AddParticleSystem0

On the next screen, select Fire for Particle system template then click Next. Save the file as Trail.scnp and click Create. Once you’re done, you should see the following in your scene:

AddParticleSystem1

Hot stuff! :] Say “hello” to Xcode’s built-in particle system editor.

Here’s a quick overview of the various sections of the editor as annotated above:

  1. Center Stage: The center holds a visual representation of your particle system. You can use this to get an idea of what the end result will look like.
  2. Gesture Controls: You can use gestures to manipulate the camera view; it’s similar to how you’d move the camera around in a scene.
  3. Pause/Play Button: You can pause your particle system simulation and inspect it in more detail. While paused, the pause button changes to a play button you can use to resume the simulation.
  4. Restart Button: This lets you restart your particle simulation from the beginning.
  5. Camera Reset Button: Use this to reset your camera view to its default position.
  6. Color Button: This lets you set an appropriate background color for your editor; for example, it’s easier to see snowflakes against a black background.
  7. Particle System Properties: Selecting the Attributes Inspector reveals a host of properties which you’ll learn about in the next section.

Configuring the Trail Particle System

In this section, you’ll take an in-depth look at the particle system attributes on the right-hand side of the editor. As you go through each section, copy the values of each setting in the screenshots into your own particle system.

Keep an eye on the particle system editor as you change each attribute; you’ll see how each parameter affects the behavior of the particle system. Later on, you’ll use this particle effect in your game to create a trail of particles falling from your spawned objects.

Emitter Attributes

The particle emitter is the origin from where all particles spawn. Here’s the emitter attributes:

TrailParticleSettings0

  • Birth rate: Controls the emitted rate of particles. Set this to 25, instructing the particle engine to spawn new particles at a rate of 25 particles per second.
  • Warmup duration: The amount of seconds the simulation runs before it renders particles. This can be used to display a screen full of particles at the start, instead of waiting for the particles to fill the screen. Set this to 0 so that simulation can be viewed from the very beginning.
  • Location: The location, relative to the shape, where the emitter spawns its particles. Set this to Vertex, which means the particles will use the geometry vertices as spawning locations.
  • Emission space: The space where emitted particles will reside. Set this to World Space so that the emitted particles are emitted into the world space, and not the local space of the object node itself.
  • Direction mode: Controls how spawned particles travel; you can move them all in a constant direction, have them travel radially outwards from the surface of the shape, or simply move them in random directions. Set it to Constant, keeping all emitted particles moving in a constant direction.
  • Direction: Specifies a directional vector to use when direction mode is constant. Set this vector to (x: 0, y: 0, z:0), setting the direction to nothing.
  • Spreading angle: Randomizes the emitting angle of spawned particles. Set this to , thus emitting particles exactly in the previously set direction.
  • Initial angle: The initial angle at which to emit particles. Set this to as this does not matter with a zero direction vector.
  • Shape: The shape from which to emit particles. Set the shape up as a Sphere, thus using a sphere shape as the geometry.
  • Shape radius: This existence of this attribute depends on which shape you’re using; for an spherical emitter, this determines the size of the sphere. Set this to 0.2, which defines a sphere just large enough for what you need.
Note: Note that some of the attributes have two input areas, one of which has a Δ= symbol next to it (see Birth Rate and Initial angle). The first input area contains the base value, and the Δ= input area contains the delta value. Each time a particle is spawned, it uses the base value plus a random value in the range (-delta value, +delta value). This allows you to get some random variance for these properties.

Contributors

Over 300 content creators. Join our team.