Swift 3: cut a hole in a SKSpriteNode

Question

First of all: I know, that this questions has already many answers here, but they didn't helped me to solve this this problem.

I program a little game. At the first launch there is a little tutorial, where bit by bit each element of the game is explained. In each step I want to highlight one of these elements. So I put a black SKSpriteNode with an alpha of 0.9 in front of the elements. If an element should be highlighted, the SpriteNode should become transparent at this point. So I made an SKCropNode and a mask as shown in my code below (I just show you the essential parts):

import SpriteKit

class FirstLaunch: SKScene {

    var fullScreen:SKSpriteNode!
    var mask:SKSpriteNode!
    var circle1:SKShapeNode!
    var circle2:SKShapeNode!
    var crop:SKCropNode!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(size: CGSize) {
        super.init(size: size)

        fullScreen = SKSpriteNode(color: .black, size: self.size)
        fullScreen.anchorPoint = .zero
        fullScreen.position = .zero
        fullScreen.alpha = 0.9

        mask = SKSpriteNode(color: .white, size: self.size)
        mask.anchorPoint = .zero
        mask.position = .zero
        mask.alpha = 1

        circle1 = SKShapeNode(circleOfRadius: 55)
        circle1.fillColor = .white
        circle1.lineWidth = 0
        circle1.alpha = 1
        circle1.blendMode = .subtract

        //spaceship is one of my elements, which have to be highlighted at some point
        circle1.position = spaceship.position
        mask.addChild(circle1)

        //At one point I need two highlights at the same time
        circle2 = SKShapeNode(circleOfRadius: 55)
        circle2.fillColor = .white
        circle2.lineWidth = 0
        circle2.alpha = 1
        circle2.blendMode = .subtract

        crop = SKCropNode()
        crop.maskNode = mask
        crop.addChild(fullScreen)

        addChild(crop)
    }
}

I found this solution here: https://stackoverflow.com/a/40710050/8162321 I tested it on different devices and simulators. My problem is, that it works perfect in the simulators of both Xcode 8 and Xcode 9 Beta, but neither on an iPhone with iOS 10.3.3 nor on an iPhone with iOS 11 Beta. On the iPhones the whole app worked perfectly except of the highlight point.

Images:

One tutorial-point on the simulator

The same on the iPhone

Can you tell me why it is different? I never seen something like that before.

Answer 1

I had the same Problems. It tooks me 3 weeks to find out.

Set the aplha of the hole to 0.001 and the blendmode to .replace.
Then it will work on device (for me on iOS 12).

import SpriteKit

class FirstLaunch: SKScene {

    var fullScreen:SKSpriteNode!
    var mask:SKSpriteNode!
    var circle1:SKShapeNode!
    var circle2:SKShapeNode!
    var crop:SKCropNode!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(size: CGSize) {
        super.init(size: size)

        fullScreen = SKSpriteNode(color: .black, size: self.size)
        fullScreen.anchorPoint = .zero
        fullScreen.position = .zero
        fullScreen.alpha = 0.9

        mask = SKSpriteNode(color: .white, size: self.size)
        mask.anchorPoint = .zero
        mask.position = .zero
        mask.alpha = 1

        circle1 = SKShapeNode(circleOfRadius: 55)
        circle1.fillColor = .white
        circle1.lineWidth = 0

        // Here is the required change
        circle1.alpha = 0.001
        circle1.blendMode = .replace

        //spaceship is one of my elements, which have to be highlighted at some point
        circle1.position = spaceship.position
        mask.addChild(circle1)

        crop = SKCropNode()
        crop.maskNode = mask
        crop.addChild(fullScreen)

        addChild(crop)
    }
}