SpriteKit: Howto make holes in layer with blendMode

Question

I have a simple scene with some elements added to it.

Now i want focus on a specific element with a mask a cut a whole at the same position as the element I want to focus on. Very similar to what we can see on some games when they are started first time showing some kind of tutorial.

Basically I am adding a fullscreen layer with alpha=0.7 (so user still see all the content) but then add a circle at a specific position as this layers child and set blendMode=. Subtract so it "cuts" out a circle from this fullscreen layer so within this circle you have a clear view.

I have the following code after I have added all the elements onto the screen.

// before this code i added some basic elements like circles and backgrounds
let mask = SKSpriteNode(color: .blackColor(), size: self._screenSize)
mask.anchorPoint = CGPoint.zero
mask.position = CGPoint.zero
mask.zPosition = 100
mask.alpha = 0.7

let circle = SKShapeNode(circleOfRadius: Constants.Config.playersize*2)
circle.fillColor = .blackColor()
circle.lineWidth = 0
let circle_mask = SKSpriteNode(texture: SKView().textureFromNode(circle, crop: circle.frame))
circle_mask.blendMode = .Subtract
circle_mask.zPosition = 101

// now show the layer with alpha=0.7 and the circle mask being at the same position as my player element i want to focus on
mask.addChild(circle_mask)
circle_mask.position = player.position
self.addChild(mask)

But this simply adds the fullscreen layer, no circle holes. Looks like it is ignoring the circle_mask node. What am I doing wrong?

My plan is also to keep moving the circle mask to focus on other elements on this scene. As I understand. Subtract it should subtract only from its parent node, which is the fullscreen layer with alpa=0.7, right?

I just tried with SKCropNode. Added the fullscreen layer as a child into the crop node, then assigned the circle as mask. But now its cutting out nearly everything but just showing a circle of my fullscreen layer, i actually need the inverted result of this crop node.

The problem with blendMode is that is runs it on the final framebuffer, but what i need is to run it on the parent node only, so it does not cut everything behind the node when using .Subtract

You never add circle to circle mask, you just make it as a texture, it does not blend to anything. Make circle mask the full black box. And add circle as a child. Alpha blending will kick in and create the hole. Also masking does not work at an alpha level, it is simply on and off, so you need to add a transparent texture as your normal texture, then you have your circle mask to punch the hole — Knight0fDragon, Nov 20 '16 at 13:55
@Knight0fDragon: I don't get it. Isn't my code doing exactly what you described? My fullscreen layer has alpha=0.7 already. Now i add the circle sprite as child. But how do i make that "alpha blending" you are writing about. Obviously blendMode=.Subtract is wrong. At the end i add my mask with the circle child onto the scene. Can you provide some corrected code? — NovumCoder, Nov 20 '16 at 18:43
no it is not, now that I am on a PC i will try and write an answer for you — Knight0fDragon, Nov 20 '16 at 21:55

score 3 · Accepted Answer · answered Nov 20 '16 at 22:17

3

Here is an example on how to create a translucent layer with a hole punched into it:

-(NOTE: .subtract blend mode does not take alpha of the sprite into consideration, so you need to use a crop node)

self.backgroundColor = .red


//Our transparent overlay
let fullScreen = SKSpriteNode(color: .black, size: self.size)
fullScreen.position = CGPoint.zero
fullScreen.zPosition = 100
fullScreen.alpha = 0.7

//let's make a mask to punch circles in our shape
let mask = SKSpriteNode(color: .white, size: self.size)
mask.position = CGPoint.zero
mask.zPosition = 100
mask.alpha = 1

let circle = SKShapeNode(circleOfRadius: 20*2)
circle.fillColor = .white
circle.lineWidth = 0
circle.alpha = 1

//let circle_mask = SKSpriteNode()
circle.blendMode = .subtract
mask.addChild(circle)

//let's create the node to place on screen
let crop = SKCropNode()
crop.maskNode = mask
crop.addChild(fullScreen)

self.addChild(crop)

answered Nov 20 '16 at 22:17

Knight0fDragon

16,609
2
23
44

Thanks a lot. Works great. But can you explain why the circle has to be SKShapeNode? I converted it into SKTexture with textureFromNode using SKSpriteNode, that makes it stop working. – NovumCoder Nov 20 '16 at 22:44
You are not properly blending, you can only blend node on node – Knight0fDragon Nov 20 '16 at 23:19
Basically the alpha is not 0 in the black area, it is 1. If you pretender your texture with an alpha zero, it should work – Knight0fDragon Nov 21 '16 at 00:03
pretender should be prerender – Knight0fDragon Dec 13 '16 at 16:25
This is working on the simulator for me, but not on an actual iOS device (at least the way I've adapted it to my project). Are you able to confirm it works on a device? – Robert Dec 13 '16 at 18:41
That makes no sense lol the simulator and device should not be different. I almost always work on device, the simulator is just too slow for me. – Knight0fDragon Dec 13 '16 at 18:43
@Robert What version of iOS are you on, that could be a huge factor in this working – Knight0fDragon Dec 13 '16 at 18:44
Yeah, it is weird! Device on 10.1.1 and simulator on 10.1, I suppose it could be a regression in the latest version, but it might just be the way I'm using SpriteKit (it's currently an overlay on a `SCNView` and I've been getting some intermittent crashes in the underlying Metal engine on the device, too). – Robert Dec 13 '16 at 18:46
Oh as an overlay, then yeah we may have blend concerns, I rarely use SceneKit – Knight0fDragon Dec 13 '16 at 18:48
Its right. On 9.x it works, but on 10.x it doesn't. What is different here? How can i make it work on both? – NovumCoder Jun 15 '17 at 16:28
1

@Knight0fDragon: Any idea how cropNode is working on ios 10? Tried playing with blendMode and masking but still not working on 10.x ios – NovumCoder Jun 15 '17 at 17:08
I dunno, I will test when I have time – Knight0fDragon Jun 15 '17 at 17:26
@Marin, You need to make sure your alpha of your hole is 0, subtract does not do alpha – Knight0fDragon Feb 20 '18 at 05:11
1

Set the alpha of the hole to 0.001 and the blendmode to .replace. – mswyss Sep 10 '18 at 15:06
@mswyss blendmode replace does not make holes, it would just replace source color with destination color – Knight0fDragon Sep 10 '18 at 15:10

SpriteKit: Howto make holes in layer with blendMode

1 Answers1

Linked