如何在 swift 中使用 spriteKit 在 sprite 图像或纹理中切出一个洞以显示其背后的内容

Question

我想在 spriteKit 中显示一堆可拖动的图像。有些图像需要我动态地在图形上切一个洞，这样我才能看到图像背后的内容。当我在图像周围拖动时，我将能够通过我在图像中切出的孔看到其他图像。

如果你需要视觉效果，想想拼图。

下面的这个stack exchange link看起来很简单很有前途，但是白色的圆圈抠图好像没有显示出来。至少不在模拟器中。我得看看我的 iphone 通过 testflight 是否能获得更好的结果。

Answer 1

这称为反向掩码。在这一点上，在 SpriteKit 中似乎没有一种简单的方法可以做到这一点。

你将不得不伪造它。最简单的方法是复制背景，并积极地掩盖它。

这看起来像个洞，但不是洞。

将此正向掩码复制放置在孔所在的位置，在其中包含 "hole" 的 "cheese" 上方。

这是我之前尝试找出如何在 SpriteKit 中执行此操作的尝试：How to cut random holes in SKSpriteNodes

Answer 2

使用这个

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

和

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."

我的第一次成功。显然，接下来我需要进行定位工作。

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)

在触摸开始期间

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
}

在触摸开始期间，如果您想将图像和孔一起移动并在屏幕上找到合适的位置，您可以取消注释行 "cropNode.position = location"。或者如果你想移动洞，你可以取消注释 "cropNode.maskNode?.position = location"。

仅当您的蒙版图像足以覆盖您要剪切的整个图像时，移动孔才有效。否则，您最终会失去比预期更多的形象。因此，出于我的目的，我可能最终会制作完全相同的图像和蒙版图像 height/width。然后，根据我的需要加载不同的掩码图像。

我的图片：

带透明孔的蒙版 144 x 144 像素

横向 144 x 144 像素

在 iphone 6 模拟器中的结果 - xcode 6.2

带透明孔的大面罩

如何在 swift 中使用 spriteKit 在 sprite 图像或纹理中切出一个洞以显示其背后的内容

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

swift

sprite-kit

skeffectnode