SpriteKitのSKActionでオブジェクトをアニメーションしてみよう

エンジニアブログ担当の近藤です。

前回に引き続きSpriteKitネタで、今回はオブジェクトのアニーメションです。
SpriteKitでオブジェクトをアニメーションをさせるには、
SKActionというクラスを使用します。
このクラスの中からいくつかのメソッドを使ってみましょう。

プロジェクト作成

前回の記事を参考にプロジェクトを作成します。

アニメーションの種類

今回は数あるアニメーション関係のメソッドの中から一部を紹介します。
ほかにもたくさん用意されている様ですので、
くわしくはSKActionのクラスリファレンスを参照してください。

実装

#import "MyScene.h"

@implementation MyScene

-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        /* Setup your scene here */

        self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];

        //スプライト１個目  
        SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"wonpla.png"];
        sprite.position = CGPointMake(200, 400);
        [self addChild:sprite];

        //スプライト２個目  
        SKSpriteNode *sprite2 = [SKSpriteNode spriteNodeWithImageNamed:@"slashofdragoon.png"];
        sprite2.position = CGPointMake(100, 200);
        [self addChild:sprite2];

        //アニメーションの再生時間を指定  
        NSTimeInterval durationTime = 1;

        //座標(x:200 y:200)へ移動  
        SKAction *moveTo = [SKAction moveTo:CGPointMake(200, 200) duration:durationTime];
        SKAction *moveBy = [SKAction moveByX:100 y:100 duration:durationTime];

        //現在の角度から〜度回転する  
        SKAction *rotateTo = [SKAction rotateByAngle:M_PI duration:durationTime];
        SKAction *rotateBy = [SKAction rotateByAngle:M_PI duration:durationTime];

        //スケールを２倍にする  
        SKAction *scaleTo = [SKAction scaleTo:2.0 duration:durationTime];
        SKAction *scaleBy = [SKAction scaleBy:2.0 duration:durationTime];

        //オブジェクトの横サイズを指定  
        SKAction *resizeToWidth =  [SKAction resizeToWidth:150 duration:durationTime];
        SKAction *resizeByWidth = [SKAction resizeByWidth:150 height:150 duration:durationTime];

        //オブジェクトの縦サイズを指定  
        SKAction *resizeToHeight =  [SKAction resizeToHeight:150 duration:durationTime];
        SKAction *resizeByHeight = [SKAction resizeToHeight:150 duration:durationTime];

        //赤色に変更  
        SKAction *changeColor = [SKAction colorizeWithColor:[UIColor redColor] colorBlendFactor:1 duration:durationTime];

        //透明度の設定  
        SKAction *fadeAlphaTo = [SKAction fadeAlphaTo:0.5 duration:durationTime];
        SKAction *fadeAlphaBy = [SKAction fadeAlphaBy:0.5 duration:durationTime];

        //テクスチャを変更してぱらぱら漫画のようなアニメーション  
        SKTexture *texture1 = [SKTexture textureWithImageNamed:@"wonpla.png"];
        SKTexture *texture2 = [SKTexture textureWithImageNamed:@"slashofdragoon.png"];
        NSArray *textureArray = [NSArray arrayWithObjects:texture1,texture2,texture1,texture2, nil];
        SKAction *textureAnimation = [SKAction animateWithTextures:textureArray timePerFrame:0.5];

        //groupで複数のSKActionを同時に再生するします。  
        NSArray *groupArray = @[rotateTo,scaleTo,moveTo,resizeToWidth,resizeToHeight,
                                changeColor,fadeAlphaTo,textureAnimation];

        SKAction *group = [SKAction group:groupArray];

        //sequenceで複数のSKActionを順番に再生します。  
        NSArray *sequenceArray = @[rotateBy,scaleBy,moveBy,resizeByWidth,resizeByHeight,
                                   changeColor,fadeAlphaBy,textureAnimation];
        SKAction *sequence = [SKAction sequence:sequenceArray];

        /*  
         上記で作成したSKActionをいろいろ組み合わせて再生してみましょう。  
         下記のrunActionメソッドで再生するアニメーションを指定します。  
         */

        //repeadActionで再生回数を指定してアニメーションする。  
        [sprite runAction: [SKAction repeatAction:sequence count:3]];

        //repeadActionForeverで無限にアニメーションをする。  
        [sprite2 runAction: [SKAction repeatActionForever: group]];

    }
    return self;
}

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

}

-(void)update:(CFTimeInterval)currentTime {
    /* Called before each frame is rendered */
}

@end

静止画なのでわかりにくいですが、上記のコードを実行すると２つのスプライトが回転や移動をするアニメーションが再生されます。
sequenceとgroupのメソッドでいろいろなアニメーションを組み合わせる事でもっと複雑な動きをさせる事も可能です。

これらの機能もやっぱりcocos2d-xとにた使い方ですね。
前回のパーティクルと今回のアニメーションの機能を駆使すればこれだけでゲームっぽい動きのあるアプリができそうですね。