How to fix your SKEmitterNode particle effect - Sprite Kit Tip 1

/

Using special effects in your game is a great way to achieve a unique style or interesting visuals. In this short post, you'll learn how to leverage special effects compositing with the SKEffectNode and the SKEmitterNode.

Subscribe to the iPhone mailing list to learn how to build your iPhone game.

Want to watch the tutorial video? Skip to the bottom.

Out of the box the SKEmitterNode will default to an Additive blend mode (Add) – which can cause special effect glitches. Over dark backgrounds your particles will look like they did in the particle editor, but over white backgrounds they will be washed out and super white (not what you wanted!).

Look at the rocket thrusters for the difference between additive and alpha blend modes

Look at the rocket thrusters for the difference between additive and alpha blend modes

Layer hierarchy and blending control is how you can achieve any kind of special effect in your iPhone game.

I use the SKNode to represent my player, which then has two child nodes: the SKSpriteNode (image) and the SKEffectNode (the particle effect wrapper). Using this structure you can get the same benefits of creating a custom class using the SKNode hierarchy without all the code. 

Inside your didMoveToView() method in your GameScene.swift file, add the following to wrap your SKEmitterNode object in an SKEffectNode object before adding it to your game scene

// The playerNode is the top level object for the main character
//   It composites the image, particle effects, and any other graphics together as a single entity
playerNode = SKNode()
playerNode.position = CGPoint(x: 200, y: 200)
playerNode.zPosition = 5   // The depth should be above any other game objects, but less than any UI
addChild(playerNode)

// Load ship image and display it
playerShip = SKSpriteNode(imageNamed: "PlayerShip1")
playerShip.physicsBody = SKPhysicsBody(texture: playerShip.texture, size: playerShip.size)

// Afterburner - thruster
var playerThrusterPath = NSBundle.mainBundle().pathForResource("Thruster", ofType: "sks")!
var playerThruster = NSKeyedUnarchiver.unarchiveObjectWithFile(playerThrusterPath) as! SKEmitterNode

// Reduce the scale a bit after you play around with the particle effects editor
playerThruster.xScale = 0.5
playerThruster.yScale = 0.5

// Control the composition of the effect (blending) using an SKEffectNode
//  this prevents the white washout with the engine being blended (additive) to the background image
//  you'll see that different colors blend differently as the player moves around.
//  Use this code to fix that issue!
// SKEffectNode's default blend mode is Alpha, so you don't need to change anything to get this to work
//  out of the box.

var playerThrusterEffectNode = SKEffectNode()
playerThrusterEffectNode.addChild(playerThruster)
playerThrusterEffectNode.zPosition = 0  // Below the ship, you could do a flame effect on top for damage

playerThrusterEffectNode.position.y = -20  // move the effect down a bit (based on art/your tastes)

// Make sure you only add the thruster once to the scene hierarchy or you'll see a crash!
playerNode.addChild(playerThrusterEffectNode)

Try using the code to fix your blending mode glitches – and if that doesn't work let me know.

It can be a little challenging to achieve different visual effects if you don't understand how to composite graphics together in an app or game.

Tutorial Video - How to fix your SKEmitterNode particle effect

 

Want to learn more?

I've been making apps and games for a long time. After working at Apple I decided that I wanted to teach other people how to turn their ideas into apps. If you want to take the first step, but aren't sure where to go – take my iPhone game course.