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?

回答1:

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

回答2:

This is known as inverse masking. At this point, there doesn't seem to be an easy way to do this within SpriteKit.

You will have to fake it. The easiest way to do this is replicate the background, and positively mask it.

This looks like a hole, but is not a hole.

Place this positively masked replication where the hole would be, above the"cheese" that's got the "hole" in it.

Here is my previous attempt to find out how to do this in SpriteKit: How to cut random holes in SKSpriteNodes

来源：https://stackoverflow.com/questions/41004925/how-do-i-cut-a-hole-in-a-sprite-image-or-texture-to-show-what-is-behind-it-using

标签

swift

sprite-kit

skeffectnode