2

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?

Neo42
  • 642
  • 3
  • 10
  • 31
  • You need to use SKCropNode, if you read the comments on the one you posted, you can see the author does that – Knight0fDragon Dec 07 '16 at 16:45
  • Ok. I'll try skcropnode based on this ref: https://developer.apple.com/reference/spritekit/skcropnode – Neo42 Dec 07 '16 at 17:06
  • yes, what you are doing is actually the inverse of that reference, which is where the .Subtract comes in. I do not remember 100% since this has been a while since I have done this, but I do not think .Subtract blends alpha channel, so you may have to do a custom green – Knight0fDragon Dec 07 '16 at 17:09

2 Answers2

2

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

Neo42
  • 642
  • 3
  • 10
  • 31
1

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

Community
  • 1
  • 1
Confused
  • 6,048
  • 6
  • 34
  • 75
  • I'd like to vote down because I don't think what you said is entirely true. And I've having some success with another source. – Neo42 Dec 08 '16 at 21:35
  • are you willing to contend this statement: "At this point, there doesn't seem to be an easy way to do this within SpriteKit." cause I'd be VERY happy to hear it if you can!!! – Confused Dec 08 '16 at 21:36