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

Question

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

如果您需要视觉效果，请考虑拼图。

下面的这个堆栈交换链接看起来非常简单和有希望，但是白色的圆圈切口似乎没有显示。至少不在模拟器中。我将不得不看看我是否通过 testflight 在我的 iphone 上获得了更好的结果。

用 SpriteKit 在矩形上画一个洞？

Answer 1

使用这个

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

和

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

“彩色部分的任何东西都是可见的，透明部分的任何东西都是不可见的。”

我有我的第一个成功。显然，接下来我需要进行定位。

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)

在 touchesbegin 期间

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
}

在 touchesbegan 期间，如果您想将图像和孔一起移动并在屏幕上找出一个合适的位置，您可以取消注释“cropNode.position = location”行。或者，如果您想移动孔，您可以取消注释“cropNode.maskNode?.position = location”。

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

我的图片：

---

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

---

横向 144 x 144 像素

---

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

---

带透明孔的大面罩

Answer 2

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

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

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

将这个正掩蔽的复制品放在洞所在的位置，上面有“洞”的“奶酪”。

这是我之前尝试找出如何在 SpriteKit 中执行此操作：如何在 SKSpriteNodes 中切割随机孔