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

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

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.

Solution

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.