如何在 SpriteKit 场景中降低 UIView 元素

Question

我有一个常规的 SpriteKit 场景。事实上，它是由“Sprite Kit”创建的默认场景，用于绘制宇宙飞船。

我想在背景上画画。

我已经成功添加了一个 UIImageView 作为主 skView 的子视图。我可以用线条之类的东西来绘制它。

但我似乎无法成功地将 UIImageView 放在主 skview 后面。

我该怎么做？这是我的示例代码。

（在 UIImageView 中，我只是每 0.1 秒绘制一次随机线。）

@implementation GameViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Configure the view.
    SKView * skView = (SKView *)self.view;
//    skView.showsFPS = YES;
//    skView.showsNodeCount = YES;
    /* Sprite Kit applies additional optimizations to improve rendering performance */
    //skView.ignoresSiblingOrder = YES;

    // Create and configure the scene.
    GameScene *scene = [GameScene unarchiveFromFile:@"GameScene"];
    scene.scaleMode = SKSceneScaleModeAspectFill;

    [skView presentScene:scene];
}

-(void)viewWillLayoutSubviews{

    self.imageView = [UIImageView new];
    self.imageView.frame = self.view.frame;
    [self.view addSubview:self.imageView];
    [self startRepeatingTimer];
}

-(void)viewDidLayoutSubviews{

    // this doesn't work. was just trying it out.
    int i = [[self.view subviews] count];
    [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:i-1];

}

///// DRAW RANDOM LINES EVERY 0.1 SECONDS ON THE UIIMAGEVIEW SUBVIEW
- (IBAction)startRepeatingTimer {

    [self.repeatingTimer invalidate];
    self.repeatingTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(drawOnImage:) userInfo:nil repeats:YES];
}

- (void)drawOnImage:(NSTimer*)theTimer {

    //setup
    float w = self.view.frame.size.width;
    float h = self.view.frame.size.height;

    UIGraphicsBeginImageContextWithOptions(self.view.frame.size,NO,0.0);
    [self.imageView.image drawInRect:CGRectMake(0, 0, w, h)];
    CGContextRef c = UIGraphicsGetCurrentContext();

    //draw
    CGContextMoveToPoint(c, drand48()*w,drand48()*h);
    CGContextAddLineToPoint(c, drand48()*w,drand48()*h);
    CGContextSetLineCap(c, kCGLineCapRound);
    CGContextSetLineWidth(c, 1.0f );
    CGContextSetRGBStrokeColor(c, drand48(), drand48(), drand48(), 1.0);
    CGContextStrokePath(c);

    // set the image
    self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}

Answer 1

这是一种在背景图像上绘制随机线条的 SpriteKit 友好方式。基本步骤是

1. 创建空白图像
2. 将图像转换为 SKTexture
3. 使用纹理创建精灵
4. 在图像上随机画一条线
5. 使用图像更新精灵的纹理
6. 等待 0.1 秒
7. 迭代步骤 4-6

在 GameScene.m 中，添加以下内容

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

    self.scaleMode = SKSceneScaleModeResizeFill;

    // 1. Create an empty UIImage
    self.image = [self blankImageWithSize:view.frame.size];
    // 2. Convert the image to a texture
    SKTexture *texture = [SKTexture textureWithImage:_image];
    // 3. Create a sprite from the texture
    SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithTexture:texture];

    // Center the sprite in the view
    sprite.position = CGPointMake(CGRectGetMidX(view.frame), CGRectGetMidY(view..frame));
    // Set zPosition such that the sprite is underneath other nodes
    sprite.zPosition = -1000;
    [self addChild:sprite];

    self.sprite = sprite;

    // 4. and 5. Create an SKAction that draw lines on the image and then update the
    // sprite's texture
    SKAction *drawAction = [SKAction runBlock:^{
        [self drawOnImage];
        _sprite.texture = [SKTexture textureWithImage:_image];
    }];
    // 6. create a 0.1 second delay
    SKAction *wait = [SKAction waitForDuration:0.1];
    SKAction *action = [SKAction sequence:@[drawAction,wait]];

    // 7. Iterate
    [self runAction:[SKAction repeatActionForever:action]];

    // Create a label and add it to the scene to show the image is
    // in the background
    SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];

    myLabel.text = @"Hello, World!";
    myLabel.fontSize = 65;
    myLabel.position = CGPointMake(CGRectGetMidX(view.frame), CGRectGetMidY(view..frame));

    [self addChild:myLabel];

}

此方法创建一个空白图像

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

此方法在图像上画线

- (void)drawOnImage {

    //setup
    float w = _image.size.width;
    float h = _image.size.height;

    UIGraphicsBeginImageContextWithOptions(_image.size,NO,0.0);
    [_image drawInRect:CGRectMake(0, 0, w, h)];
    CGContextRef c = UIGraphicsGetCurrentContext();

    //draw
    CGContextMoveToPoint(c, drand48()*w,drand48()*h);
    CGContextAddLineToPoint(c, drand48()*w,drand48()*h);
    CGContextSetLineCap(c, kCGLineCapRound);
    CGContextSetLineWidth(c, 1.0f );
    CGContextSetRGBStrokeColor(c, drand48(), drand48(), drand48(), 1.0);
    CGContextStrokePath(c);

    // set the image
    _image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}