2015年5月28日木曜日

SpriteKitでの画面切り替え効果SKTransition

SpriteKitで画面(Scene)を切り替える際のトランジションの種類。
newSceneに新たなSKSceneを事前に作っておき、self.view上にあるsceneを切り替える形となる。
具体的なコードは以下。
SKTransition *tr = [SKTransition crossFadeWithDuration:2.0];
[(SKView *)self.view presentScene:newScene transition:tr];

SKTransitionクラスで設定するトランジションの種類は以下。

duration(切り替え時間)は全て2秒としている。

SKTransition *tr = [SKTransition crossFadeWithDuration:2.0];
クロスフェイド。元画面がフェードアウトするのと一緒に新画面がフェードインする。

SKTransition *tr = [SKTransition doorsCloseHorizontalWithDuration:2.0];
SKTransition *tr = [SKTransition doorsCloseVerticalWithDuration:2.0];
SKTransition *tr = [SKTransition doorsOpenHorizontalWithDuration:2.0];
SKTransition *tr = [SKTransition doorsOpenVerticalWithDuration:2.0];
水平方向/垂直方向に、真ん中から扉が開く/真ん中に閉じるように新画面が現れる。

SKTransition *tr = [SKTransition doorwayWithDuration:2.0];
真ん中から左右に扉が開き、奥から少し小さい新画面が拡大しながら出てくる。
お城で殿の御成りといった感じ。

SKTransition *tr = [SKTransition fadeWithColor:[UIColor redColor] duration:2.0];
一度指定した色に向けてフェードアウトし、新画面がさらにフェードインする。

SKTransition *tr = [SKTransition fadeWithDuration:2.0];
元画面がフェードアウトして暗くなり、新画面がフェードインする。
crossFadeとの違いは、暗くブラックアウトすること。

SKTransition *tr = [SKTransition flipHorizontalWithDuration:2.0];
SKTransition *tr = [SKTransition flipVerticalWithDuration:2.0];
カードをめくるようにそれぞれ、Horizontalが縦回転、Verticalが横回転する。
感覚としては逆のような気がするが、回転軸が水平(Horizontal)か垂直(Vertical)ってことなんだろうな?

SKTransition *tr = [SKTransition moveInWithDirection:SKTransitionDirectionDown duration:2.0];
旧画面の上に、上下左右の方から滑るように新画面が入ってくる。
SKtransitionDirectionはUp/Down/Left/Rightがあるが、それぞれそちらの方向から画面が入ってくる。(Downなら下から新画面が入ってくる)

SKTransition *tr = [SKTransition pushWithDirection:SKTransitionDirectionUp duration:2.0];
旧画面を押し出すように上下左右から新画面が入ってくる。
これもSKtransitionDirectionで指定した方向から画面が入る。

SKTransition *tr = [SKTransition revealWithDirection:SKTransitionDirectionLeft duration:2.0];
moveInの逆に、旧画面が上下左右に滑り出て行って、背後の新画面が現れる。
SKtransitionDirectionの指定は他と違い、旧画面の出て行く方向。

SKTransition *tr = [SKTransition transitionWithCIFilter:(CIFilter)  duration:2.0];
CoreImageのフィルターを使うことができる。
扱えるフィルターは、inputImageinputTargetImageのパラメータを持つもののみだそうだ。(CIFilter)の部分にフィルターを書くのだが、よくわかんない。
単にフィルターを指定するだけでなく、事前にパラメータをいくつか設定する必要があるようだ。
トランジションの幅が広がるが、具体的なやり方はわかったら追記する。

0 件のコメント:

コメントを投稿