如何在 iOS 中使用 sprite kit 创建一个 alpha 蒙版

Question

我想要达到的效果是在黑暗区域中有一圈光。效果类似于口袋妖怪游戏中的效果，当您在黑暗的洞穴中并且周围视野有限时。根据我的尝试和阅读，我无法在具有 alpha 级别的精灵套件中的节点上创建蒙版。我设法创建的面具都有硬边，基本上只是裁剪。在苹果开发者页面上阅读有关具有 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

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

用你想要的从白到黑的渐变制作一个PNG，不透明。

为您想要的每个灯光使用带有 png 的单独精灵节点，并将它们全部添加到 SKEffectNode 或 SKCropNode 节点。哪个都没有关系，因为它们都在单独的上下文中呈现。将每个精灵节点设置为屏幕混合模式。

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

最后，加网会将“灯光”很好地融合在一起，而乘法会使白色区域变得透明。

Answer 2

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