Implementing transitions between screens

Using transitions between game screens is a great way to provide smoothness between screen changes, for example, fade out one screen and then fade in the next one. The next video shows an example of those effects our Vampire Runner game.

In this post, we will show a possible implementation of transitions between screens using LibGDX, however the code should be independent enough to be easily ported to other frameworks.

Although we implemented it using the our own concept of GameState, we will try to use LibGDX Screen concept in this post to simplify understandability.

Implementation

The implementation is based in the concept of TransitionEffect. A TransitionEffect holds the render logic of one of the effects of the transition being performed.

class TransitionEffect {

	// returns a value between 0 and 1 representing the level of completion of the transition.
	protected float getAlpha() { .. }

	void update(float delta) { .. } 

	void render(Screen current, Screen next);

	boolean isFinished() { .. }

	TransitionEffect(float duration) { .. }
}

An implementation example of a TransitionEffect is a FadeOutTransitionEffect to perform a fade out effect:

class FadeOutTransitionEffect extends TransitionEffect {

	Color color = new Color();

	@Override
	public void render(Screen current, Screen next) {
		current.render();
		color.set(0f, 0f, 0f, getAlpha());
		// draw a quad over the screen using the color
	}

}

Then, in order to perform a transition between Screens, we need a custom Screen with the logic to apply render each transition effect and to set the next Screen when the transition is over. This is a possible implementation:

class TransitionScreen implements Screen {
	Game game;

	Screen current;
	Screen next;

	int currentTransitionEffect;
	ArrayList<TransitionEffect> transitionEffects;

	TransitionScreen(Game game, Screen current, Screen next, ArrayList<TransitionEffect> transitionEffects) {
		this.current = current;
		this.next = next;
		this.transitionEffects = transitionEffects;
		this.currentTransitionEffect = 0;
		this.game = game;
	}

	void render() {
		if (currentTransitionEffect >= transitionEffects.size()) {
			game.setScreen(next);
			return;
		}

		transitionEffects.get(currentTransitionEffect).update(getDelta());
		transitionEffects.get(currentTransitionEffect).render(current, next);

		if (transitionEffects.get(currentTransitionEffect).isFinished())
			currentTransitionEffect++;
	}
}

Finally, each time we want to perform a transition between two screens, we have to create a new TransitionScreen with the current and next Screens and a collection of effects we want. For example:

	Screen current = game.getScreen();
	Screen next = new HighscoresScreen();

	ArrayList<TransitionEffect> effects = new ArrayList<TransitionEffect>();

	effects.add(new FadeOutTransitionEffect(1f));
	effects.add(new FadeInTransitionEffect(1f));

	Screen transitionScreen = new TransitionScreen(game, current, next, effects);

	game.setScreen(transitionScreen);

As we mention before, we use our own concepts in our implementation. If you want to see our code take a look at the classes ApplicationListenerGameStateBasedImpl, GameState and GameStateTransitionImpl (do not expect the best code in the world).

Conclusion

Adding transitions between the game screens gives users a feeling of smoothness, and we believe it worth the effort.

Also, we like the current design lets you implement different effects for the transitions, we only shown fade out and fade in as example because they are really simple to implement and we are using only those for our games.

As always, hope you like the post.

VN:F [1.9.22_1171]
Rating: 4.4/5 (19 votes cast)
Implementing transitions between screens, 4.4 out of 5 based on 19 ratings

Tags: , , ,

  • Ziggy

    The class  names look a little different from what I remember. Will I see some changes the next time I update my code?

  • arielsan

    Don't know when you updated the code for the last time, so yeah, you will probably see some changes, maybe in stuff you don't use at all.

    About these new classes, they are a bit experimental and I am using them for our current game but there is no need to change to use them unless you want this custom transition effects feature (which could be implemented over the previous classes too, they weren't removed from commons-gdx). As all this stuff is experimental, I recommend you to stay with the older classes, at least for now.

  • http://www.ziggysgames.com/ Ziggy

    OK, thanks. I updated last night and saw some changes, but no conflicts. I'm also trying to use GL20, and I've updated the transition classes to use the libgdx ShapeRenderer. I don't know any OpenGL, so I didn't know how to create and color a mesh with 2.0. That's where I was afraid I might get conflicts, but it seemed to merge OK.

  • ruff

    I read your article. But I can't seem to find the classes. I wonder where I can find the libgdx implementation of screen transition? 
    Can you help me?

  • arielsan

    Hi ruff, those classes are not on LibGDX code, if you want to see the code just follow the links above (in the blog post).

  • Helg

    Thank you.

  • http://www.facebook.com/people/Александр-Сидоров/1700059134 Александр Сидоров

    i can't compile commons-gdx-master in my libgdx project :(