代码之家  ›  专栏  ›  技术社区  ›  Neo42

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

  •  2
  • Neo42  · 技术社区  · 9 年前

    我想在spriteKit中显示一组可拖动的图像。一些图像将需要我在图形中动态地切割一个孔,以便我可以看到图像背后的内容。当我在图像周围拖动时,我将能够通过我在图像中切割的孔看到其他图像。

    如果你需要视觉效果,可以考虑拼图。

    下面的堆栈交换链接看起来很简单,很有前途,但白色圆圈的剪影似乎没有显示出来。至少不是在模拟器中。我必须看看我是否能通过testflight在iphone上获得更好的结果。

    Draw a hole in a rectangle with SpriteKit?

    2 回复  |  直到 9 年前
        1
  •  2
  •   Neo42    9 年前

    使用

    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
    }
    

    只有当你的面具足以覆盖你要切割的整个图像时,移动这个洞才有效。否则,您最终会失去比预期更多的图像。因此,出于我的目的,我可能最终会制作一个高度/宽度完全相同的图像和面具。然后,根据我的需要,我会加载不同的面具。

    我的图像:


    具有透明孔144×144像素的掩模

    Mask with transparent hole   144 by 144 pixels


    景观144乘144像素

    Landscape   144 by 144 pixels


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

    Results in iphone 6 simulator  - xcode 6.2


    带透明孔的较大掩模

    Larger Mask with transparent hole

        2
  •  1
  •   Community Mohan Dere    8 年前

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

    你必须假装。最简单的方法是复制背景,并积极地屏蔽它。

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

    将这个正掩模复制放在洞所在的位置,在有“洞”的“奶酪”上方。

    以下是我之前在SpriteKit中尝试的方法: How to cut random holes in SKSpriteNodes