How to implement 'Fog of War' in SpriteKit or Cocos2D?

Question

Take a look at the image below from the game Warcraft 2. There's a darkened area (like a fog) that represents the limits of the 'field of view' -- to the effect that you would not see any enemy characters in the fog.

How would you implement this 'fog' in iOS (SpriteKit, Cocos2d, etc)? Mostly interested in hearing high-level strategies on implementing the fog itself -- within the node-based hierarchy of something like SpriteKit or Cocos2d.

And bonus: what do people call this 'fog' in the game industry?

[Update] 'Fog of War' (thanks @Jon)

Answer 1

One option is to overlay a texture that has a blend mode of Multiply set to it over your tiles. The overlay texture would be almost black (dark shades of grey) all around, except for the area you want to be fully visible, which would be white.

Multiply blend mode will darken all the black areas and the white areas would remain unaffected.

Here is a sample of what you would see if you have a texture that is white in the center and has a circular gradient fill that eventually becomes dark gray. This texture (in SpriteKit) is added to a SKSpriteNode on top of everything else; it's z-position is the highest in the scene.

Here's an online demo you can check out, where this concept is taken even further for more effects.

To get a result as highlighted in your question - assuming the viewable area is dynamic, you would need to generate such a texture on the fly - fill it with white tiles for areas you want to be visible, and dark tiles for areas you want to shade out. You can generate textures on the fly using SpriteKit's SKView's textureFromNode method, for example.