Objective-C:Sprite Kit シーン間の画面遷移(トランジション)アニメーションサンプル

Sprite Kit であらかじめ用意されているトランジションを利用すれば、簡単に画面遷移時のアニメーションを表現することが可能です。

今回はこの画面遷移のサンプルコードと、実際の挙動をアニメーションgif で書き出しました。サンプルコードをコピペするだけで、目的のトランジションを即利用可能ですので、是非ご活用下さい。

[ 2014.12.13 gif画像の表示崩れを修正しました。]

Sprite Kit シーンの移動

シーンの準備

MyScene(Sprite Kit テンプレートのデフォルトシーン) に MyScene2 クラスを追加します。
img_skscene_transition_01

シーン移動のサンプルコード

MyScene, MyScene2 の各画面をタップで、互いのシーンを行き来するようにします。

MyScene.m

#import "MyScene.h"
#import "MyScene2.h"

@implementation MyScene

-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        self.backgroundColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"HelveticaNeue-Bold"];
        label.text = @"1";
        label.fontSize = 128.0f;
        label.fontColor = [SKColor blackColor];
        label.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
        [self addChild:label];
    }
    return self;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    [self.view presentScene:myScene2];
}

@end

MyScene2.m

#import "MyScene2.h"
#import "MyScene.h"

@implementation MyScene2

-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        self.backgroundColor = [SKColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
        SKLabelNode *label = [SKLabelNode labelNodeWithFontNamed:@"HelveticaNeue-Bold"];
        label.text = @"2";
        label.fontSize = 128.0f;
        label.fontColor = [SKColor whiteColor];
        label.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
        [self addChild:label];
    }
    return self;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    [self.view presentScene:myScene];
}

@end

ここまでをビルドすれば、画面タッチで2つのシーンが切り替わります。
img_skscene_transition_a00

以降のサンプルコードではこの2つのシーンを使用し説明していきます。

Sprite Kit シーン間の画面遷移(トランジション)・インデックス

リンクをクリックでサンプルコードへジャンプします。

Sprite Kit シーン間の画面遷移(トランジション)・サンプルコード

crossFadeWithDuration:

img_skscene_transition_a01

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition crossFadeWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition crossFadeWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


doorsCloseHorizontalWithDuration:

img_skscene_transition_a02

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsCloseHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsCloseHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


doorsCloseVerticalWithDuration:

img_skscene_transition_a03

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsCloseVerticalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsCloseVerticalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


doorsOpenHorizontalWithDuration:

img_skscene_transition_a04

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsOpenHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsOpenHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


doorsOpenVerticalWithDuration:

img_skscene_transition_a05

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsOpenVerticalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorsOpenVerticalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


doorwayWithDuration:

img_skscene_transition_a06

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorwayWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition doorwayWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


fadeWithColor:duration:

img_skscene_transition_a07

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition fadeWithColor:[SKColor redColor] duration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition fadeWithColor:[SKColor blueColor] duration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


fadeWithDuration:

img_skscene_transition_a08

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition fadeWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition fadeWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


flipHorizontalWithDuration:

img_skscene_transition_a09

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition flipHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition flipHorizontalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


flipVerticalWithDuration:

img_skscene_transition_a10

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition flipVerticalWithDuration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition flipVerticalWithDuration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


moveInWithDirection:duration:

img_skscene_transition_a11

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition moveInWithDirection:SKTransitionDirectionUp duration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition moveInWithDirection:SKTransitionDirectionDown duration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


pushWithDirection:duration:

img_skscene_transition_a12

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition pushWithDirection:SKTransitionDirectionLeft duration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition pushWithDirection:SKTransitionDirectionRight duration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end


revealWithDirection:duration:

img_skscene_transition_a13

MyScene.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene2 *myScene2 = [MyScene2 sceneWithSize:self.size];
    SKTransition *transition = [SKTransition revealWithDirection:SKTransitionDirectionDown duration:1.0f];
    [self.view presentScene:myScene2 transition:transition];
}
@end

MyScene2.m

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    MyScene *myScene = [MyScene sceneWithSize:self.size];
    SKTransition *transition = [SKTransition revealWithDirection:SKTransitionDirectionRight duration:1.0f];
    [self.view presentScene:myScene transition:transition];
}
@end

まとめ

カスタムクラスでオリジナルのトランジションを作成しなくても、用意されたものを上手に使用するだけで、大抵のゲームアプリは作成出来てしまいます。

Sprite Kit は後発だけあって、かなりよく出来たゲームフレームワークだと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents