【Swift】SpriteKitの使い方。Transitionを利用してシーンの切り替えを格好良くする。【Swift】SpriteKitの使い方。Transitionを利用してシーンの切り替えを格好良くする。2020年6月16日Transitionとは前回の記事で、ゲームのシーンを切り替える実装について説明したが、そのままだと一瞬で次のシーンが表示される。格好良くシーンを切り替えたいと思うことがある。そんなときにTransition(トランジション)が利用される。トランジションとは、シーンが切り替わるときの動きを定義するクラスである。このクラスを使えば、フェードアウト・フェードインやスクロールなどの様々な表現でシーンを切り替えられる。トランジションを使ってみる実際にトランジションを使ってシーンの切替えを格好良くしてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。事前準備ではシーンの切り替えまでを実装しておいた。この段階ではスタートボタンを押すとすぐに次のシーンが表示される。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_change_scene_result_movie.mp4TitleScene.swiftのtouchesBeganメソッドを以下のコードに変更する。トランジションのインスタンスを生成し、presentSceneメソッドの第2引数に与えている。//タッチしたノードを取得する。//タッチしたのがラベルノードの場合、スタートボタンなのかを確認する。//トランジションを作成する。//スタートボタンを押した場合はプレイ画面に切り替える。{//タッチしたノードを取得する。{//タッチしたのがラベルノードの場合、スタートボタンなのかを確認する。{//トランジションを作成する。SKTransition.fadeWithDuration(2.0)//スタートボタンを押した場合はプレイ画面に切り替える。transition:transition)}}}以下は実際のプレイ動画。フェードアウト、フェードインで画面が切り替わるようになった。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_fade_duration_movie.mp4トランジションの種類トランジションの種類と動きを確認しよう。仕様の詳細は公式リファレンスを参照されたし。以降は切り替え前のシーンを「前シーン」、切り替え後のシーンを「次シーン」と表現する。crossFadeWithDuration前シーンと次シーンが重ねて置かれて、前シーンが徐々に消えていくことで次シーンが見えてくる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_cross_fade_movie.mp4doorsCloseHorizontalWithDuration左右2つに割った次シーンで左右の引き戸を閉じるように次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_door_close_horizontal_movie.mp4doorsCloseVerticalWithDuration上下に割れた次シーンで引き戸を閉じるように次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_door_close_vertical_movie.mp4doorsOpenHorizontalWithDuration前シーンを左右に割って引き戸を開けるように次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_door_open_horizontal_movie.mp4doorsOpenVerticalWithDuration前シーンを上下に割って引き戸を開けるように次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_door_open_vertical_movie.mp4doorwayWithDuration前シーンを左右に割って、奥に押してドアを開けるようにしながら次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_doorway_movie.mp4fadeWithColor指定色を挟んでフェードアウト、フェードインで次シーンが現れる。以下の動画は白色を指定した場合。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_fade_color_movie.mp4fadeWithDurationフェードアウト、フェードインで次シーンが現れる。最初の実装例で説明したものと同じ。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_fade_duration_movie.mp4flipHorizontalWithDuration前シーンの裏面に次シーンがあり、前シーンが縦方向にひっくり返って次シーンが現れる。Horizontalと聞くと横方向にひっくりそうな気がするが、横方向の軸があって縦に回転するイメージである。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_flip_horizontal_movie.mp4flipVerticalWithDuration前シーンの裏面に次シーンがあり、前シーンが横方向にひっくり返って次シーンが現れる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_flip_vertical_movie.mp4moveInWithDirection次シーンが前シーンの上に被さるように現れる。上下左右のどの方向から現れるかを指定できる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_movein_movie.mp4pushWithDirection次シーンが前シーンを押し出しながら現れる。上下左右のどの方向から現れるかを指定できる。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/09/spritekit_transition_push_movie.mp4revealWithDirection前シーンと次シーンを重ねて置き、前シーンが画面外に出て行くことで次シーンが現れる。【Swift】SpriteKitの使い方。シーンエディタでフェードアクションを設定する。...【Swift】SpriteKitの使い方。物理運動の抵抗力を発生させて動きをスローにする。...【Swift】SpriteKitの使い方。鳥ノードをパタパタさせながら移動方向に合わせて身体の角度を変える。...【Swift】SpriteKitの使い方。シーンエディタでノードの移動アクションを設定する。...【Swift】SpriteKitの使い方。シーンエディタでノードのリサイズアクションを設定する。コメントをキャンセルメールアドレスが公開されることはありません。