Draw a Hole in a Rectangle with Spritekit

Draw a hole in a rectangle with SpriteKit?

Here's the code.

import SpriteKit

class GameScene: SKScene {

    override func didMove(to view: SKView) {

        let effect = SKEffectNode()
        addChild(effect)

        let rect = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 400, height: 200))
        rect.fillColor = .green
        effect.addChild(rect)


        let hole = SKShapeNode(circleOfRadius: 40)
        hole.position = CGPoint(x: 200, y: 100)
        hole.fillColor = .white
        hole.blendMode = .subtract
        rect.addChild(hole)

    }
}

As you can see I create an SKEffectNode. Then I add to it the rectangle. Finally I add the hole to the rectangle.

how do I cut a hole in a sprite image or texture to show what is behind it using spriteKit in swift

Using this

https://developer.apple.com/reference/spritekit/skcropnode

and

https://www.hackingwithswift.com/read/14/2/getting-up-and-running-skcropnode

"anything in the colored part will be visible, anything in the transparent part will be invisible."

I have my first success. I need to work on positioning next, obviously.

var taMain  =  SKTexture(imageNamed: "landscape144.jpg")
var sprite1 = SKSpriteNode()
sprite1 = SKSpriteNode(texture: taMain)
sprite1.xScale = 2
sprite1.yScale = 2
sprite1.zPosition = 1


var cropNode:SKCropNode =  SKCropNode()
cropNode.xScale = 1
cropNode.yScale = 1
cropNode.position = CGPoint(x: 0, y: 0)
cropNode.zPosition = 2

cropNode.maskNode =   SKSpriteNode(imageNamed:  "maskimage3.png") 
cropNode.maskNode?.position = CGPoint(x: 0, y: 0)

cropNode.addChild(sprite1)
self.addChild(cropNode)

and during touchesbegan

for touch: AnyObject in touches {
//uncomment 2 lines to help you get your image positioned on screen.  
//   it moves the whole cut image + hole
//let location = touch.locationInNode(self)
//    cropNode.position = location   

//Or uncomment these 2 lines to move just the mask
//let location = touch.locationInNode(cropNode) 
//    cropNode.maskNode?.position =  location //moves just the hole
}

During the touchesbegan you can uncomment the line "cropNode.position = location" if you want to move the image and the hole together and figure out a good location for it on screen. OR you can uncomment "cropNode.maskNode?.position = location" if you want to move the hole.

Moving the hole only works if your maskimage has enough to cover your whole image that you're cutting from. Otherwise you end up losing more of your image than you intended. So, for my purposes I'll probably end up making an image and maskimages that are exactly the same height/width. Then, depending on what I need I'll load up different maskimages.

My images:

---

Mask with transparent hole 144 by 144 pixels

---

Landscape 144 by 144 pixels

---

Results in iphone 6 simulator - xcode 6.2

---

Larger Mask with transparent hole

How to draw SKNode PhysicsBody for debugging?

This works as of iOS 7.1 and in all OSX versions supporting SpriteKit.

In this example I'm using the variable mySKView to hold the SKView of the game.

Set the "showPhysics" property of your SKView to true/YES. This is usually done by adding the following line after the line "mySKView.showsFPS = true". Usually in the viewcontroller owning the SKView.

Obj-C:

mySKView.showsPhysics = YES;

Swift

mySKView.showsPhysics = true

---

Related Topics