MENU
コンテンツ再構築中
  1. ホーム
  2. Note
  3. Objective-C:Sprite Kit シーン間の画面遷移（トランジション）アニメーションサンプル

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

Advertising
Note

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

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

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

INDEX

Sprite Kit シーンの移動

シーンの準備

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

img_skscene_transition_01

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

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つのシーンが切り替わります。

img_skscene_transition_a00

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

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

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

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

crossFadeWithDuration:


img_skscene_transition_a01

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:


img_skscene_transition_a02

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:


img_skscene_transition_a03

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:


img_skscene_transition_a04

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:


img_skscene_transition_a05

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:


img_skscene_transition_a06

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:


img_skscene_transition_a07

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:


img_skscene_transition_a08

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:


img_skscene_transition_a09

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:


img_skscene_transition_a10

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:


img_skscene_transition_a11

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:


img_skscene_transition_a12

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:


img_skscene_transition_a13

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で共有していただければ幸いです。

Note
Objective-C Sprite Kit
Please share it!
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

INDEX