Class

SKTransition

An SKTransition object is used to perform an animated transition between a SKScene object already presented by an SKView object and a new incoming scene.

Overview

Scenes are the basic building blocks of games. Typically, you design self-contained scenes for the parts of your game, and then transition between these scenes as necessary. For example, you might create different scene classes to represent any or all of the following concepts:

  • A loading scene to display while other content is loaded

  • A main menu scene to choose what kind of game the user wants to play

  • A scene to configure the details of the specific kind of game the user chose

  • A scene that provides the gameplay

  • A scene displayed when gameplay ends

When you present a new scene in a view that is already presenting a scene, you have the option of using a transition to animate the change from the old scene to the new scene. Using a transition provides continuity so that the scene change is not quite so abrupt.

Transitioning Between Two Scenes

Typically, you transition to a new scene based on gameplay or user input. For example, if the user presses a button in your main menu scene, you might transition to a new scene to configure the match the player wants to play. SKTransition shows how you might implement the event handler in a sprite. The handler first runs an animation on itself to highlight the button (not described here). Then, it creates a transition object and the new scene. Finally, it calls the view to present the new scene. The transition means that this change is animated.

Listing 1

Transitioning to a new scene

- (void)mouseUp:(NSEvent *)theEvent
{
    [self runAction: self.buttonPressAnimation];
    SKTransition *reveal = [SKTransition revealWithDirection:SKTransitionDirectionDown duration:1.0];
    GameConfigScene *newScene = [[GameConfigScene alloc] initWithSize: CGSizeMake(1024,768)]];
    [self.scene.view presentScene: newScene transition: reveal];
}

When the transition occurs, the scene property is immediately updated to point to the new scene. Then, the animation occurs. Finally, the strong reference to the old scene is removed. If you need to keep the scene around after the transition occurs, your app needs to keep its own strong reference to the old scene.

When organizing your game, it can be helpful to create a diagram that shows all the scenes in a game, the transitions that occur between scenes, and the data that must be passed to the new scene when a transition occurs. Unlike view controllers in iOS, Sprite Kit does not provide a built-in mechanism for passing data between scenes. If you need to provide data during a scene transition, you need to implement your own mechanism to configure the new scene. Typically, this means defining custom methods and properties on each scene.

Configuring Whether Animations Play During the Transition

The pausesIncomingScene and pausesOutgoingScene properties on the transition object define which animations are played during the transition. By default, both scenes are paused during the transition. However, you might want to enable animation on either scene during the transition.

The following figure illustrates which frames of the incoming and outgoing scenes are displayed on screen during a three frame transition with different permutations of pausesIncomingScene and pausesOutgoingScene.

Image from Qubit

For example, consider the code again in SKTransition. Because the button is going to run an action, this code expects the outgoing scene to be animated. But perhaps the incoming scene should not animate its content until the transition completes. Adding the code in SKTransition has the desired effect.

Listing 2

Pausing frame processing during a transition

reveal.pausesOutgoingScene = YES;
reveal.pausesIncomingScene = NO;

Symbols

Creating Transition Objects

class func crossFade(withDuration: TimeInterval)

Creates a cross fade transition.

class func doorsCloseHorizontal(withDuration: TimeInterval)

Creates a transition where the new scene appears as a pair of closing horizontal doors.

class func doorsCloseVertical(withDuration: TimeInterval)

Creates a transition where the new scene appears as a pair of closing vertical doors.

class func doorsOpenHorizontal(withDuration: TimeInterval)

Creates a transition where the new scene appears as a pair of opening horizontal doors.

class func doorsOpenVertical(withDuration: TimeInterval)

Creates a transition where the new scene appears as a pair of opening vertical doors.

class func doorway(withDuration: TimeInterval)

Creates a transition where the previous scene disappears as a pair of opening doors.

class func fade(with: UIColor, duration: TimeInterval)

Creates a transition that first fades to a constant color and then fades to the new scene.

class func fade(withDuration: TimeInterval)

Creates a transition that first fades to black and then fades to the new scene.

class func flipHorizontal(withDuration: TimeInterval)

Creates a transition where the two scenes are flipped across a horizontal line running through the center of the view.

class func flipVertical(withDuration: TimeInterval)

Creates a transition where the two scenes are flipped across a vertical line running through the center of the view.

class func moveIn(with: SKTransitionDirection, duration: TimeInterval)

Creates a transition where the new scene moves in on top of the old scene.

class func push(with: SKTransitionDirection, duration: TimeInterval)

Creates a transition where the new scene moves in, pushing the old scene out of the view.

class func reveal(with: SKTransitionDirection, duration: TimeInterval)

Creates a transition where the old scene moves out of the view, revealing the new scene underneath it.

init(ciFilter: CIFilter, duration: TimeInterval)

Creates a transition that uses a Core Image filter to perform the transition.

Configuring Whether Scenes Are Paused During the Transition

var pausesIncomingScene: Bool

A Boolean value that determines whether the incoming scene is paused during the transition.

var pausesOutgoingScene: Bool

A Boolean value that determines whether the outgoing scene is paused during the transition.

Constants

SKTransitionDirection

For some transitions, the direction in which the transition is performed.

Relationships

Inherits From