swiftsprite-kitskeffectnode

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

I would like to display a bunch of draggable images in spriteKit. Some of the images will require me to cut a hole in the graphic dynamically so I can see what is behind the images. And as I drag around the images I'll be able to see the other images through the holes I've cut in the images.

If you need a visual, think of jigsaw puzzle pieces.

This stack exchange link below looked very simple and promising, but the white circle cutout doesn't seem to display. At least not in the simulator. I'll have to see if I get a better result on my iphone via testflight.

Draw a hole in a rectangle with SpriteKit?

Solution

  • 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

    Mask with transparent hole 144 by 144 pixels

    Landscape 144 by 144 pixels

    Landscape 144 by 144 pixels

    Results in iphone 6 simulator - xcode 6.2

    Results in iphone 6 simulator - xcode 6.2

    Larger Mask with transparent hole

    Larger Mask with transparent hole