How to create complex transitions

The basics of transition effects

Transition effects always happen from one screen to another, see the following example:

The red screen is transitioning to the purple screen

Complex transitions

Sometimes there is a need for more complex transitions. One example would be 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(String, String) is called twice (or more) in scuccession, 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("blank", "slicing_transition");
game.getScreenManager().pushScreen("green", "sliding_out_transition");

A blank screen as an in-between between two transitions can be very easily created by extending ManagedScreen (or the subclass 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("next_screen_name", "blendingTransition")));

	stage.addAction(Actions.parallel(firstAction, secondActionSequence));
}