ios - 如何使用 sprite kit 在 iOS 中创建 alpha 蒙版

Question

我想要达到的效果是在黑暗区域有一圈光。这种效果类似于口袋妖怪游戏中的效果，当你在黑暗的洞穴中并且周围的视野有限时。根据我的尝试和阅读，我无法在具有 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%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。

此外，为了防止有人混淆，黑色只是场景的背景色，图片在其上，然后圆圈是 mask 节点的一部分。

Answer 1

这个的一个非常简单(可能更少...或更高性能)的版本是简单地在顶部添加一个 SKSpriteNode，使您的小插图位于透明背景上。换句话说，如果在 Photoshop 中查看，当您从中心向外移动时，您会看到圆圈中可见的棋盘格数量在减少，最终显示为纯黑色。如果在您的应用中使用 PNG 图像，则在合成两个 Sprite 时将保留这种透明度。