Question

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

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

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

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

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。

另外，为了清楚地表明任何人感到困惑，黑色只是场景的背景色，图片位于其上方，然后圆圈就是遮罩节点的一部分。

Answer 1

一个非常简单（也许更少......或更高性能）的版本就是简单地在顶部添加一个SKSpriteNode，它在透明背景上有你的插图。换句话说，如果在Photoshop中查看，当您从中心向外看时，您会看到圆圈中可见的棋盘格数量减少，最终显示纯黑色。在您的应用中使用PNG图像时，当合成两个精灵时，将保留此透明度。

Answer 2

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

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

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

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

最后，放映将合并＆＃34;灯＆＃34;很好地，乘法将使白色区域透明。

如何使用sprite工具包在iOS中创建alpha蒙版

2 个答案: