0

通常の SpriteKit シーンがあります。実は宇宙船を描く「Sprite Kit」から作成されたデフォルトのシーンです。

背景に描きたい。

メイン skView のサブビューとして UIImageView を正常に追加しました。これに線などで描くことができます。

しかし、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();
}
4

1 に答える 1

2

背景画像にランダムな線を描画する 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();
}
于 2014-11-23T09:33:29.540 に答える