如何使用 Sprite Kit 在 iOS 中创建 alpha 遮罩

我想要达到的效果是在黑暗区域中有一个光圈。其效果类似于口袋妖怪游戏中的效果，当你处于黑暗的洞穴中并且周围的视野有限时。根据我的尝试和阅读，我无法在具有 alpha 级别的精灵套件中的节点上创建遮罩。我设法创建的蒙版都有硬边，而且基本上只是裁剪。在苹果开发者页面上阅读有关 SKCropNode 的信息，该节点具有 maskNode 属性，它表示“如果蒙版中的像素的 alpha 值小于 0.05，则图像像素将被屏蔽。”不幸的是，在我看来，像素要么被完全屏蔽，要么完全包含在内，中间没有 alpha 值。如果我想说的话很难理解，下面是我所取得的成就的图片：https://www.dropbox.com/s/y5gbk8qvuq4ynh0/iOS%20Simulator%20 Screen%20shot%20 Jan%2020%2C%202014%201.06.23%20 PM.png

这是我想要实现的目标的图像：https://www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20 Screen%20shot%20 Jan%2020%2C%202014%201.05.54%20 PM.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 。

另外，为了澄清这一点，以防有人感到困惑，黑色只是场景的背景颜色，图片位于其之上，然后圆圈是蒙版节点的一部分。

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