Sprite Kit であらかじめ用意されているトランジションを利用すれば、簡単に画面遷移時のアニメーションを表現することが可能です。
今回はこの画面遷移のサンプルコードと、実際の挙動をアニメーションgif で書き出しました。サンプルコードをコピペするだけで、目的のトランジションを即利用可能ですので、是非ご活用下さい。
[ 2014.12.13 gif画像の表示崩れを修正しました。]
Sprite Kit シーンの移動
シーンの準備
MyScene(Sprite Kit テンプレートのデフォルトシーン) に MyScene2 クラスを追加します。
シーン移動のサンプルコード
MyScene, MyScene2 の各画面をタップで、互いのシーンを行き来するようにします。
MyScene.m
[code]
#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
[/code]
MyScene2.m
[code]
#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
[/code]
ここまでをビルドすれば、画面タッチで2つのシーンが切り替わります。
以降のサンプルコードではこの2つのシーンを使用し説明していきます。
Sprite Kit シーン間の画面遷移(トランジション)・インデックス
リンクをクリックでサンプルコードへジャンプします。
- crossFadeWithDuration:
- doorsCloseHorizontalWithDuration:
- doorsCloseVerticalWithDuration:
- doorsOpenHorizontalWithDuration:
- doorsOpenVerticalWithDuration:
- doorwayWithDuration:
- fadeWithColor:duration:
- fadeWithDuration:
- flipHorizontalWithDuration:
- flipVerticalWithDuration:
- moveInWithDirection:duration:
- pushWithDirection:duration:
- revealWithDirection:duration:
Sprite Kit シーン間の画面遷移(トランジション)・サンプルコード
-
crossFadeWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
doorsCloseHorizontalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
doorsCloseVerticalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
doorsOpenHorizontalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
doorsOpenVerticalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
doorwayWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
fadeWithColor:duration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
fadeWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
flipHorizontalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
flipVerticalWithDuration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
moveInWithDirection:duration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
pushWithDirection:duration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code] -
revealWithDirection:duration:
-
-
MyScene.m
[code]
-(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
[/code]MyScene2.m
[code]
-(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
[/code]
まとめ
カスタムクラスでオリジナルのトランジションを作成しなくても、用意されたものを上手に使用するだけで、大抵のゲームアプリは作成出来てしまいます。
Sprite Kit は後発だけあって、かなりよく出来たゲームフレームワークだと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。