如何使用sprite工具包在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%20 PM.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 图像时，在合成两个精灵时将保留这种透明度。