SpriteKit:如何使用blendMode在图层中打洞 [英] SpriteKit: Howto make holes in layer with blendMode

问题描述

我有一个简单的场景，其中添加了一些元素.

I have a simple scene with some elements added to it.

现在，我想使用蒙版将重点放在特定元素上，并在与我要关注的元素相同的位置处切开一个整体.非常类似于我们在首次启动某些游戏时看到的内容，并显示了某种教程.

Now i want focus on a specific element with a mask a cut a whole at the same position as the element I want to focus on. Very similar to what we can see on some games when they are started first time showing some kind of tutorial.

基本上，我要添加一个带有alpha=0.7的全屏图层(因此用户仍然可以看到所有内容)，然后在该图层的子图层的特定位置添加一个圆圈并设置blendMode=.减去，以便从该全屏图层切出"一个圆圈，以便在这个圆圈内可以看到清晰的视图.

Basically I am adding a fullscreen layer with alpha=0.7 (so user still see all the content) but then add a circle at a specific position as this layers child and set blendMode=. Subtract so it "cuts" out a circle from this fullscreen layer so within this circle you have a clear view.

在将所有元素添加到屏幕上之后，我将获得以下代码.

I have the following code after I have added all the elements onto the screen.

// before this code i added some basic elements like circles and backgrounds
let mask = SKSpriteNode(color: .blackColor(), size: self._screenSize)
mask.anchorPoint = CGPoint.zero
mask.position = CGPoint.zero
mask.zPosition = 100
mask.alpha = 0.7

let circle = SKShapeNode(circleOfRadius: Constants.Config.playersize*2)
circle.fillColor = .blackColor()
circle.lineWidth = 0
let circle_mask = SKSpriteNode(texture: SKView().textureFromNode(circle, crop: circle.frame))
circle_mask.blendMode = .Subtract
circle_mask.zPosition = 101

// now show the layer with alpha=0.7 and the circle mask being at the same position as my player element i want to focus on
mask.addChild(circle_mask)
circle_mask.position = player.position
self.addChild(mask)

但这只是添加了全屏图层，没有圆孔.看起来它正在忽略circle_mask节点.我在做什么错了?

But this simply adds the fullscreen layer, no circle holes. Looks like it is ignoring the circle_mask node. What am I doing wrong?

我的计划还是继续移动圆形蒙版，以专注于此场景中的其他元素.我认为.减去它应该仅从其父节点减去，该父节点是带有alpa=0.7的全屏图层，对吧?

My plan is also to keep moving the circle mask to focus on other elements on this scene. As I understand. Subtract it should subtract only from its parent node, which is the fullscreen layer with alpa=0.7, right?

我刚刚尝试了SKCropNode.将全屏图层作为子级添加到裁剪节点中，然后将圆指定为蒙版.但是现在，除了显示全屏图层的一个圆圈之外，它几乎可以裁剪所有内容，实际上我需要此裁剪节点的反转结果.

I just tried with SKCropNode. Added the fullscreen layer as a child into the crop node, then assigned the circle as mask. But now its cutting out nearly everything but just showing a circle of my fullscreen layer, i actually need the inverted result of this crop node.

blendMode的问题是在最终的帧缓冲区上运行它，但是我需要仅在父节点上运行它，因此在使用.Subtract时，它不会削减节点后面的所有内容

The problem with blendMode is that is runs it on the final framebuffer, but what i need is to run it on the parent node only, so it does not cut everything behind the node when using .Subtract

推荐答案

下面是一个示例，该示例如何创建一个打有孔的半透明层:

Here is an example on how to create a translucent layer with a hole punched into it:

-(注意:.subtract混合模式未考虑精灵的alpha，因此您需要使用裁剪节点)

-(NOTE: .subtract blend mode does not take alpha of the sprite into consideration, so you need to use a crop node)

self.backgroundColor = .red


//Our transparent overlay
let fullScreen = SKSpriteNode(color: .black, size: self.size)
fullScreen.position = CGPoint.zero
fullScreen.zPosition = 100
fullScreen.alpha = 0.7

//let's make a mask to punch circles in our shape
let mask = SKSpriteNode(color: .white, size: self.size)
mask.position = CGPoint.zero
mask.zPosition = 100
mask.alpha = 1

let circle = SKShapeNode(circleOfRadius: 20*2)
circle.fillColor = .white
circle.lineWidth = 0
circle.alpha = 1

//let circle_mask = SKSpriteNode()
circle.blendMode = .subtract
mask.addChild(circle)

//let's create the node to place on screen
let crop = SKCropNode()
crop.maskNode = mask
crop.addChild(fullScreen)

self.addChild(crop)

这篇关于SpriteKit:如何使用blendMode在图层中打洞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！