How to create complex transitions

The basics of transition effects

Transition effects always happen from one screen to another, as can be seen in the following example. To be specific, the effects are always rendered using the whole visible area (= window) of the screens you are transitioning from and to. This means that if there are any black bars (for example due to the use of a StretchViewport) these bars are also included in the transition!¹

The red screen is transitioning to the purple screen

Complex transitions

Sometimes there is a need for more complex transitions. One example would be the chaining of different transition effects:

The blue screen is falling out and then the red screen is coming in

For implementing something like this the queueing mechanics of libgdx-screenmanager have to be utilized. If pushScreen(ManagedScreen, ScreenTransition) is called twice (or more) in a row, all those transitions are rendered one after another. Thus, the effect above can be achieved in the following way (for a full example take a look here):

game.getScreenManager().pushScreen(new BlankScreen(), new VerticalSlicingTransition(batch, 5, 1F));
game.getScreenManager().pushScreen(new GreenScreen(), new SlidingOutTransition(batch, SlidingDirection.DOWN, 0.7F));

A blank screen as an in-between between two transitions can be very easily created by using ManagedScreenAdapter (or the subclass of ManagedScreen you're using in your game) and leaving its method bodies empty.

By overriding getClearColor() the background color of this screen can be changed (this would be the way for implementing a fade-to-color transition). In other cases it may prove useful to use a screen that is rendering a static image as an intermediary between two transitions.

Utilising Scene2d actions

Furthermore, transitions can be combined with Scene2d's Actions:

// This can, for example, be used in a button click listener in the main menu of your game
@Override
protected void onClick() {
	// Fade out UI elements over 0.45 seconds
	Action firstAction = Actions.alpha(0F, 0.45F, Interpolation.pow2In);

	// After 0.35 seconds start the transition, so the screens begin to blend
	SequenceAction secondActionSequence = new SequenceAction();
	secondActionSequence(Actions.delay(0.35F));
	secondActionSequence.addAction(Actions.run(() -> application
		.getScreenManager().pushScreen(nextScreen, blendingTransition)));

	// Add the actions
	stage.addAction(Actions.parallel(firstAction, secondActionSequence));
}

---

¹ Note 1:

To circumvent this behaviour, either use a transition effect where this is not noticeable (e.g., a blending transition or certain shader transitions) or create a custom version of the transition effect in question by adapting viewports and batch.draw(...) calls as needed.