ios - 抓取一个 SKNode 并显示其下方的 SKNode ，效果类似于删除有雾的玻璃

Question

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

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

我想使用上面提到的项目并在 SpriteKit 上完成这些任务。

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

我不能互相添加透明的 SKScenes，例如: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. 在用户触摸隐藏图像以揭开下面图片的 mask 中添加圆圈

这是一个如何做到这一点的例子:

首先，定义这些属性

@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;
}

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

#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;
}

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

- (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;
}

这些方法处理触摸事件。它将圆环添加到用户触摸屏幕的 mask 节点图像。

-(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];
            }
        }
    }
}