エンジニア

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

投稿日:2014年5月14日 更新日:

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

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

プロジェクト作成

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

アニメーションの種類

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

+ (SKAction *)moveTo:(CGPoint)location duration:(NSTimeInterval)sec スプライトを指定した画面上の指定した座標へ移動します。
+ (SKAction *)moveByX:(CGFloat)deltaX y:(CGFloat)deltaY duration:(NSTimeInterval)sec スプライトを現在の位置を指定した座標へ移動します。
+ (SKAction *)rotateToAngle:(CGFloat)radians duration:(NSTimeInterval)sec; 角度を指定して回転します。
+ (SKAction *)rotateByAngle:(CGFloat)radians duration:(NSTimeInterval)sec 現在の角度から角度を指定して回転します。
+ (SKAction *)resizeToWidth:(CGFloat)width duration:(NSTimeInterval)duration; 横幅を指定サイズに変更します。
+ (SKAction *)resizeToHeight:(CGFloat)height duration:(NSTimeInterval)duration; 横幅を現在のサイズから指定したサイズに加算します。
  + (SKAction *)scaleTo:(CGFloat)scale duration:(NSTimeInterval)sec 現在の倍率を基準に、 指定した倍率に拡大します。
 + (SKAction *)scaleBy:(CGFloat)scale duration:(NSTimeInterval)sec 元の大きさを基準に、指定した倍率に拡大します。
+ (SKAction *)colorizeWithColor:(SKColor *)color colorBlendFactor:(CGFloat)colorBlendFactor duration:(NSTimeInterval)sec 指定した色を加算します。
+ (SKAction *)fadeAlphaTo:(CGFloat)alpha duration:(NSTimeInterval)sec 透明度の値を指定します。
+ (SKAction *)animateWithTextures:(NSArray *)textures timePerFrame:(NSTimeInterval)sec 配列に格納したテクスチャ(SKTexture)で、ぱらぱらアニメーションをさせます。
+ (SKAction *)group:(NSArray *)actions  指定したアニメーションを同時に再生します。
+ (SKAction *)sequence:(NSArray *)actions  指定したアニメーションを順番に再生します。
+ (SKAction *)repeatAction:(SKAction *)action count:(NSUInteger)count; countで指定した回数アニメーションを再生します。
+ (SKAction *)repeatActionForever:(SKAction *)action 無限にアニメーションを繰り返します。
実装
#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];

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

        //スプライト2個目  
        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];

        //スケールを2倍にする  
        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

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

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

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-エンジニア
-,

© WonderPlanet Inc.