如何使用sprite工具包在iOS中创建alpha蒙版 [英] How to create an alpha mask in iOS using sprite kit

问题描述

我想要达到的效果是在黑暗区域有一圈光。效果类似于口袋妖怪游戏中的效果，当你在一个黑暗的洞穴中，只有有限的视野围绕着你。根据我的尝试和阅读，我无法在具有alpha级别的sprite工具包中的节点上创建掩码。我设法创造的面具都有硬边，基本上只是裁剪。在苹果开发者页面上阅读有关具有maskNode属性的SKCropNode，它说如果掩码中的像素的alpha值小于0.05，则图像像素被屏蔽掉。不幸的是，这听起来像像素将被完全掩盖或完全包含，其间没有alpha值。如果我想说的话很难理解，这里是我所取得成就的图像：
https://www.dropbox.com/s/y5gbk8qvuq4ynh0/iOS%20Simulator%20Screen%20shot%20Jan% 2020％2C％202014％201.06.23％20 PM.png

The effect that I am trying to achieve is having a circle of light in an area of darkness. The effect is similar to that in pokemon games, when you are in a dark cave and only have limited vision surrounding you. From what I have tried and read, I have been unable to create a mask over nodes in sprite kit that has alpha levels. The masks I manage to create all have a hard edge, and basically just crop. Reading on the apple developer page about the SKCropNode, which has the maskNode property, it says "If the pixel in the mask has an alpha value of less than 0.05, the image pixel is masked out." This unfortunately sounds to me like the pixels will either be completely masked out or completely included, with no alpha values in between. If what I am trying to say has been hard to follow, here is an image of what I have achieved: https://www.dropbox.com/s/y5gbk8qvuq4ynh0/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.06.23%20PM.png

这是我想要实现的目标的图像：
< a href =https://www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.05.54%20PM.png =noreferrer> https： //www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.05.54%20PM.png

and here is an image of what I would like to achieve: https://www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.05.54%20PM.png

我设法获得上述结果的方式是，我掩盖了硬边缘圆圈，然后只添加了一个渐变的图像，从外部的黑色到内部的透明。这种方法不起作用的原因是因为我需要有多个圆圈，并且用我刚才提到的方法，当圆圈相交时，可以看到透明圆圈外面的黑暗。

The way that I managed to get the above result, was I masked out the hard edge circle and then just added an image that has a gradient going from black on the outside to transparent on the inside. The reason this approach doesn't work is because I need to have multiple circles, and with the method I just mentioned, when the circles intersect the darkness on the outside of the transparent circle can be seen.

总之，我需要的是一种方法，让一个圆圈在中心开始变暗，然后淡出。然后，如果圆圈是黑暗的，那么可以看到它背后的图像，并且圆圈是透明的，其后面的图像是看不到的。再次，抱歉，如果我说的话很难理解。这是我正在使用的代码。其中一些是从其他帖子中找到的。

In conclusion, what I need is a way to have a circle that starts dark in the center, and then fades out. Then, have it so where the circle is dark, the image behind it can be seen, and where the circle is transparent, the image behind it cannot be seen. Again, sorry if what I am saying is difficult to follow. Here is the code I am using. Some of it was found from other posts.

SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[SKColor redColor] size:CGSizeMake(500, 500)];
    background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

    SKCropNode *cropNode = [[SKCropNode alloc] init];
    SKNode *area = [[SKNode alloc] init];

    int x = 65; //radius of the circle

    _circleMask = [[SKShapeNode alloc ]init];
    CGMutablePathRef circle = CGPathCreateMutable();
    CGPathAddArc(circle, NULL, 0, 0, x/2, 0, M_PI*2, YES);
    _circleMask.path = circle;
    _circleMask.lineWidth = x*2;
    _circleMask.strokeColor = [SKColor whiteColor];
    _circleMask.name=@"circleMask";
    _circleMask.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

//Here is where I just added in the gradient circle To give the desired appearance, but this isn't necessary to the code
    //_circleDark = [SKSpriteNode spriteNodeWithImageNamed:@"GradientCircle"];
    //_circleDark.position = [cropNode convertPoint:_circleMask.position fromNode:area];

    [area addChild:_circleMask];

    [cropNode setMaskNode:area];
    [cropNode addChild:background];
    //[cropNode addChild:_circleDark];

    [self addChild:cropNode];

此方法还允许我移动圆圈，显示其背后的图像的不同部分，这就是我想要的。要做到这一点，我只需将其设置为在用户点击屏幕时更改_circleMask.position。

This method has also allowed me to move the circles around, revealing different parts of the image behind it, which is what I want. To do this I just set it to change the _circleMask.position when the user taps the screen.

另外，为了清楚这一点，万一有人感到困惑，黑色只是场景的背景颜色，图片位于其上方，然后圆圈是掩模节点的一部分。

Also, just to make this clear in case anyone was confused, the black is just the background color of the scene, the picture is on top of that, and then the circle is part of the mask node.

推荐答案

我有一个想法...我希望它会有所帮助。

I have an idea... I hope it would help.

使用你想要的渐变制作一个PNG，从白色到黑色，没有透明度。

Make a PNG with the gradient you want from white to black with no transparency.

对所需的每个灯使用单独的精灵节点和png，并将它们全部添加到SKEffectNode或SKCropNode节点。由于它们都在单独的上下文中呈现，因此无关紧要。将每个精灵节点设置为屏幕混合模式。

Use a separate sprite node with the png for each light you want and add them all to a SKEffectNode or SKCropNode node. It doesn't matter which since they are both rendered in a separate context. Set each sprite node to screen blending mode.

然后，将父SKEffectNode或SKCropNode添加到场景时，将其设置为乘法混合模式。

Then, when adding the parent SKEffectNode or SKCropNode to the scene, set it to multiply blend mode.

最后，放映会很好地合并灯光，而乘法会使白色区域透明。

In the end, the screening will merge the "lights" together nicely, while the multiply will make the white area transparent.

这篇关于如何使用sprite工具包在iOS中创建alpha蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！