刮开一个 SKNode 并在它下面露出 SKNode ，效果就像擦拭雾化玻璃一样

Question

基本上我想在 SpriteKit 中实现这样的目标：https://github.com/moqod/iOS-Scratch-n-See。

在 SKScene 中，我有一个汽车图像，2-3 层不同类型的污垢图像，一层肥皂，一层水滴，这些层我的意思是它们都是 UIImage 形式并且等于汽车框架的尺寸（我最终可以用作 SKTexture 和 SKNode）。 上面提到的项目将 UIImageView 添加到另一个上，而不是擦除图像。 我需要管理很多层，比如如果选择了肥皂工具，我想调出污垢图像层，擦除用户触摸的任何地方的污垢图像，在它下面我将放置肥皂图像（半透明），现在可见在它下面的汽车图像。 合并它们（一半擦除/一半存在污垢+肥皂+汽车图像）后，我将获得另一个图像并将其显示在顶部，因此这会给用户留下一个印象，就好像他在汽车上涂抹肥皂并去除污垢一样。 如果你能明白我要解释的内容。

我想使用上述项目并在 SpriteKit 上完成这些任务。

我不能使用 z-position 将图像放在前面和向后移动，因为它仅适用于 SKSpriteNode 并且上面的示例在 UIKit (UIImages) 上编码以擦除图像而不是节点。

我不能在彼此之间添加透明的 SKScene，例如：Making a SKScene's background transparent not working... is this a bug?，与在该项目中添加 UIImageView 的方式相同，因为我正在开发 IOS 7 并希望我的应用程序与之兼容。 最后的手段是我需要放弃 SpriteKit 并在 UIKit 上工作。

是否有任何逻辑可以在 SKSpriteNode 上滑动并通过更改其 alpha 值或其他方式使其特定的滑动区域透明？

非常欢迎任何帮助或建议。谢谢。

Answer 1

您可以使用 Sprite Kit 的 SKCropNode 实现“从头开始查看”。 SKCropNode 对其子节点应用掩码。掩码用于隐藏裁剪节点的部分或全部子节点。对于这个应用程序，子节点是您希望通过“刮擦”来发现的图像。

基本步骤

1. 从空白图像开始作为蒙版的纹理
2. 在蒙版中添加圆圈，用户触摸隐藏的图像以发现下面的图片

以下是如何做到这一点的示例：

首先，定义这些属性

@property UIImage *image;
@property SKSpriteNode *maskNode;
@property SKNode *node;

然后将场景的内容添加到 didMoveToView。

-(void)didMoveToView:(SKView *)view {

    self.node = [SKNode node];
    _node.name = @"tree";

    // Create a node that will hold the image that's hidden and later uncovered by "scratching"
    CGPoint position = CGPointMake (CGRectGetWidth(self.frame)/2,CGRectGetHeight(self.frame)/2);
    SKSpriteNode *imageNode = [SKSpriteNode spriteNodeWithImageNamed:@"hidden_pic.png"];
    imageNode.position = CGPointZero;

    CGSize size = imageNode.size;

    // This is the layer that you "scatch" off
    SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[SKColor grayColor] size:size];
    background.position = position;
    background.name = @"background";
    [_node addChild:background];

    // This is the mask node. Initialize it with an empty image, so it completely hides the image
    UIImage *image = [self blankImageWithSize:size];
    self.image = image;
    SKTexture *texture = [SKTexture textureWithImage:image];
    SKSpriteNode *maskNode = [SKSpriteNode spriteNodeWithTexture:texture];
    maskNode.position = CGPointZero;
    maskNode.name = @"mask";
    self.maskNode = maskNode;

    [_node addChild:maskNode];

    // This is the node that crops its children
    SKCropNode *cropNode = [SKCropNode node];
    cropNode.position = position;
    cropNode.maskNode = maskNode;
    cropNode.zPosition = 100;
    cropNode.name = @"crop";

    [_node addChild:cropNode];


    [cropNode addChild:imageNode];

    [self addChild:_node];
}

这会创建一个空图像。用于作为初始蒙版图片，使图片完全隐藏。

- (UIImage*) blankImageWithSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

此方法在图像上的指定点绘制一个圆。它用于更新掩码节点的图像。面具上绘制的每个圆圈都会揭示更多隐藏的图片。

#define kCircleRadius   22

- (UIImage *)imageByDrawingCircleOnImage:(UIImage *)image atPoint:(CGPoint)point
{
    UIGraphicsBeginImageContext(image.size);

    [image drawAtPoint:CGPointZero];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(context, 1, -1);
    CGContextTranslateCTM(context, 0, -image.size.height);

    CGRect rect = CGRectMake(point.x-kCircleRadius, point.y-kCircleRadius,
                             kCircleRadius*2, kCircleRadius*2);
    UIBezierPath* roundedRectanglePath = [UIBezierPath bezierPathWithOvalInRect:rect];
    [[UIColor blackColor] setFill];
    [roundedRectanglePath fill];

    CGContextAddPath(context, roundedRectanglePath.CGPath);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

该方法将指定点转换为掩码节点的坐标，调用 一种在遮罩节点中绘制圆的方法，并更新遮罩节点的 纹理。

- (void) drawCircleInImageAtPoint:(CGPoint)point
{
    CGPoint location = [self convertPoint:point toNode:_maskNode];
    location = CGPointMake(location.x+_maskNode.size.width/2, location.y+_maskNode.size.height/2);
    UIImage *newImage = [self imageByDrawingCircleOnImage:_image atPoint:location];
    SKTexture *texture = [SKTexture textureWithImage:newImage];
    self.image = newImage;
    _maskNode.texture = texture;
}

这些方法处理触摸事件。它将 cicles 添加到用户触摸屏幕的遮罩节点图像中。

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    /* Called when a touch begins */

    for (UITouch *touch in touches) {
        CGPoint location = [touch locationInNode:self];
        NSArray *nodes = [self nodesAtPoint:location];
        for (SKNode *node in nodes) {
            if ([node.name isEqualToString:@"crop"]) {
                [self drawCircleInImageAtPoint:location];
            }
        }
    }
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    /* Called when a touch begins */

    for (UITouch *touch in touches) {
        CGPoint location = [touch locationInNode:self];
        NSArray *nodes = [self nodesAtPoint:location];
        for (SKNode *node in nodes) {
            if ([node.name isEqualToString:@"crop"]) {
                [self drawCircleInImageAtPoint:location];
            }
        }
    }
}