【Swift】SpriteKitの使い方。Transitionを利用してシーンの切り替えを格好良くする。(Swift 2.2、XCode 7.3)

2016年9月15日2020年6月16日

Transitionとは

前回の記事で、ゲームのシーンを切り替える実装について説明したが、そのままだと一瞬で次のシーンが表示される。

もっと、格好良くシーンを切り替えたいと思うことがある。そんなときにTransition（トランジション）が利用される。

トランジションとは、シーンが切り替わるときの動きを定義するクラスである。このクラスを使えば、フェードアウト・フェードインやスクロールなどの様々な表現でシーンを切り替えられる。

トランジションを使ってみる

実際にトランジションを使ってシーンの切替えを格好良くしてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」

事前準備ではシーンの切り替えまでを実装しておいた。この段階ではスタートボタンを押すとすぐに次のシーンが表示される。

TitleScene.swiftのtouchesBeganメソッドを以下のコードに変更する。

トランジションのインスタンスを生成し、presentSceneメソッドの第2引数に与えている。

    //画面タッチ時の呼び出しメソッド
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        
        //タッチしたノードを取得する。
        let location = touches.first!.locationInNode(self)
        if let node = nodeAtPoint(location) as? SKLabelNode {
            
            //タッチしたのがラベルノードの場合、スタートボタンなのかを確認する。
            let startButton = self.childNodeWithName("start") as? SKLabelNode
            if(node == startButton) {
                
                //トランジションを作成する。
                let transition = SKTransition.fadeWithDuration(2.0)
                
                //スタートボタンを押した場合はプレイ画面に切り替える。
                let result = PlayScene(fileNamed: "PlayScene")
                self.view!.presentScene(result!, transition:transition)
            }
            
        }
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//画面タッチ時の呼び出しメソッド

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

//タッチしたノードを取得する。

let location = touches.first!.locationInNode(self)

if let node = nodeAtPoint(location) as? SKLabelNode {

//タッチしたのがラベルノードの場合、スタートボタンなのかを確認する。

let startButton = self.childNodeWithName("start") as? SKLabelNode

if(node == startButton) {

//トランジションを作成する。

let transition = SKTransition.fadeWithDuration(2.0)

//スタートボタンを押した場合はプレイ画面に切り替える。

let result = PlayScene(fileNamed: "PlayScene")

self.view!.presentScene(result!, transition:transition)

}

}

}

以下は実際のプレイ動画。フェードアウト、フェードインで画面が切り替わるようになった。

トランジションの種類

トランジションの種類と動きを確認しよう。仕様の詳細は公式リファレンスを参照されたし。⇒「SKTransition」

以降は切り替え前のシーンを「前シーン」、切り替え後のシーンを「次シーン」と表現する。

crossFadeWithDuration

前シーンと次シーンが重ねて置かれて、前シーンが徐々に消えていくことで次シーンが見えてくる。

doorsCloseHorizontalWithDuration

左右2つに割った次シーンで左右の引き戸を閉じるように次シーンが現れる。

doorsCloseVerticalWithDuration

上下に割れた次シーンで引き戸を閉じるように次シーンが現れる。

doorsOpenHorizontalWithDuration

前シーンを左右に割って引き戸を開けるように次シーンが現れる。

doorsOpenVerticalWithDuration

前シーンを上下に割って引き戸を開けるように次シーンが現れる。

doorwayWithDuration

前シーンを左右に割って、奥に押してドアを開けるようにしながら次シーンが現れる。

fadeWithColor

指定色を挟んでフェードアウト、フェードインで次シーンが現れる。以下の動画は白色を指定した場合。

fadeWithDuration

フェードアウト、フェードインで次シーンが現れる。最初の実装例で説明したものと同じ。

flipHorizontalWithDuration

前シーンの裏面に次シーンがあり、前シーンが縦方向にひっくり返って次シーンが現れる。Horizontalと聞くと横方向にひっくりそうな気がするが、横方向の軸があって縦に回転するイメージである。

flipVerticalWithDuration

前シーンの裏面に次シーンがあり、前シーンが横方向にひっくり返って次シーンが現れる。

moveInWithDirection

次シーンが前シーンの上に被さるように現れる。上下左右のどの方向から現れるかを指定できる。

pushWithDirection

次シーンが前シーンを押し出しながら現れる。上下左右のどの方向から現れるかを指定できる。

revealWithDirection

前シーンと次シーンを重ねて置き、前シーンが画面外に出て行くことで次シーンが現れる。