How to use a SKEmitterNode in sprite kit to achieve a "fog of war" effect?

Question

I'm trying to use a SKEmitterNode to create a shader, kind of like in Pokemon when you are in a cave: http://www.serebii.net/pokearth/maps/johto-hgss/38-route31.png

Here is the code I have so far :

NSString *burstPath =
  [[NSBundle mainBundle] pathForResource:@"MyParticle" ofType:@"sks"];

  SKNode *area = [[SKNode alloc] init];

  SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[SKColor blackColor] size:CGSizeMake(self.frame.size.width, self.frame.size.width)];
  background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

  SKEmitterNode *burstNode =
  [NSKeyedUnarchiver unarchiveObjectWithFile:burstPath];
  burstNode.position = CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame));

  burstNode.particleBlendMode = SKBlendModeSubtract;
  [area addChild:background];
  [area addChild:burstNode];
  [self addChild:area];

Here is the SKEmitterNode : http://postimg.org/image/60zflqjzt/

I've had two ideas. The first one was to create a rectangular SKSpriteNode and remove the SKEmitterNode from the rectangular SKSpriteNode. That way, we have a black rectangle with a "hole" in the center, where we can see through.

The second one was to add the rectangular SKSpriteNode and the SKEmitter node to another SKNode (area), then set the particleBlendMode of the SKEmitterNode and finally set the alpha of the SKNode (area) in function of the color. For exemple, if the color of a pixel is black, the alpha value of that pixel will be 1.0 and another pixel is white, that other pixel's alpha value will be 0.0.

This question is a possible duplicate of How to create an alpha mask in iOS using sprite kit in some ways, but since no good answer has been given, I assume it isn't a problem.

Thank you very much.

score 3 · Answer 1 · answered Dec 01 '20 at 13:40

Now, with the powerful devices of this era (iPhone 12) is it possible to use 'SKEmitterNode' without lost too much frames per second. You must build an SKS (SpriteKit Particle File) with this image:

Then, set your vars like this picture:

So, go to your code and add your particle with something like this example:

let fog = SKEmitterNode(fileNamed: "fog")
fog.zPosition = 6
self.addChild(fog)
fog.position.y = self.frame.midY
fog.particlePositionRange.dx = self.size.width * 2.5

score 2 · Accepted Answer · answered Jun 21 '14 at 14:51

2

These are not the nodes you are looking for! ;)

Particles can't be used to make a fog of war, even if you could make them behave to generate a fog of war it would be prohibitively slow.

Based on the linked screenshot you really only need an image with a "hole" in it, a transparent area. The image should be screen-sized and just cover up the borders to whichever degree you need it. This will be a non-revealing fog of war, or rather just the effect of darkness surrounding the player.

A true fog of war implementation where you uncover the world's area typically uses a pattern, in its simplest form it would just be removing (fading out) rectangular black sprites.

answered Jun 21 '14 at 14:51

CodeSmile

64,284
20
132
217

Do you have any idea how i could add a flame flickering effect with the image ? And the downside to your answer is that I have to create an extra image each time I want a different radius :/ otherwise, it is a good idea :) – Maxime Delisle Jun 21 '14 at 18:38
Different radius is achievable by scaling the fog-of-war sprite. – CodeSmile Jun 21 '14 at 18:42
Any idea for the torch/flame flickering ? – Maxime Delisle Jun 21 '14 at 20:44
2

not really, maybe another transparent image with continuous opacity changes – CodeSmile Jun 21 '14 at 21:08

How to use a SKEmitterNode in sprite kit to achieve a "fog of war" effect?

2 Answers2