Как вырезать дыру в изображении или текстуре спрайта, чтобы показать, что за этим стоит, используя spriteKit в swift
Я хотел бы отобразить кучу перетаскиваемых изображений в spriteKit. Некоторые изображения потребуют, чтобы я динамически вырезал дыру в графике, чтобы я мог видеть, что находится за изображениями. И когда я перетаскиваю изображения, я смогу видеть другие изображения через отверстия, которые я вырезал в изображениях.
Если вам нужен визуал, подумайте о кусочках головоломки.
Эта ссылка обмена стека ниже выглядела очень простой и многообещающей, но вырез белого круга, кажется, не отображается. По крайней мере, не в симуляторе. Я должен посмотреть, получу ли я лучший результат на своем iphone через testflight.
2 ответа
Используя это
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)
и во время прикосновений началось
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", если хотите переместить отверстие.
Перемещение лунки работает только в том случае, если вашего маскирующего изображения достаточно для покрытия всего изображения, из которого вы вырезаете. В противном случае вы теряете больше своего изображения, чем вы хотели. Таким образом, для моих целей я, вероятно, в конечном итоге создаю изображение и маскирующие изображения, которые имеют одинаковую высоту / ширину. Затем, в зависимости от того, что мне нужно, я загружаю разные маски.
Мои изображения:
Маска с прозрачным отверстием 144 на 144 пикселя
Пейзаж 144 на 144 пикселей
Результаты в симуляторе iphone 6 - xcode 6.2
Большая маска с прозрачным отверстием
Это известно как обратная маскировка. На данный момент, кажется, нет простого способа сделать это в SpriteKit.
Вам придется подделать это. Самый простой способ сделать это - скопировать фон и замаскировать его.
Это похоже на отверстие, но не отверстие.
Поместите эту реплику с положительной маскировкой там, где будет отверстие, над "сыром", в котором есть "дыра".
Вот моя предыдущая попытка выяснить, как это сделать в SpriteKit: Как вырезать случайные дыры в SKSpriteNodes