# How to get smooth transition within slick?

When a player clicks start, my app immediately switches to the first level. My question is how do I incorporate a smooth transition within Slick?

I'm not sure this kind of functionality is engine-specific. If you have a way of setting a global alpha, then you could do it just fine.

Interpolate the scene alpha and the menu alpha through time, for example, for one second...

timeStarted = currentTime() //Time in milliseconds since the program started, probably 0 if this is the actual start of the program.
scene.alpha = 0 //The scene is transparent at start.
renderMenu = true //After the menu alpha reaches 0, we can stop rendering it.
transitionTime = 1000 //How long does the transition last?

do:
timePassed = currentTime() - timeStarted

if timePassed > transitionTime:
renderMenu = false //Transition over, no point in rendering a transparent menu.
scene.alpha = 1 //We can render the scene fully now.
else:
scene.alpha = timePassed/transitionTime //From 0 to 1.
menu.alpha = 1 - timePassed/transitionTime //From 1 to 0.

menu.render() //It's important to just render it, not actually search for GUI events.

scene.render()


Edit:

We have two objects, scene and menu here... The scene is the actual game, while the menu is, well, your start GUI. alpha denotes how translucent (transparent is the wrong word for this) a picture will render. If it was 0, you wouldn't see the picture (it would be transparent). If it was 1, the picture would be opaque, which means that you can't see whats behind the picture. renderMenu is simply a flag that tells your game whether to render the menu (eg "start" and "highscore" buttons) or not.

What we do here is increase the alpha of the game, and decrease the alpha of the menu, making it slowly fade away. If you set transitionTime to 10000, the transition would last 10 seconds. It is also important to understand that this isn't Java, but pseudocode. You probably have different names for these things in your code.

I hope I cleared things up.

• Not quite understanding the variables you posted – ChocoMan Jul 31 '12 at 10:17
• "variable" is a pretty vague description of what you don't understand. Couldn't you be more specific? – jcora Aug 1 '12 at 13:25
• The first 5 lines, especially the currentTime() method I dont understand what they are exactly. Are these float, long, int? What exactly is scene and menu? – ChocoMan Aug 3 '12 at 8:43
• Here, see the edit. – jcora Aug 3 '12 at 10:32
• Do you have problems anymore? – jcora Aug 5 '12 at 11:11

You can apply transition effects when changing a game state, just use the overloaded method:

On this javadoc page you can see, what transitions are available: JavaDoc: Transition

I have just tried it out in my current prototype and its pretty easy to do. Example of how I made a transition from my main menu state to the gameplay state (the main menu looks pretty ugly and isn't a menu at all, thats because I haven't implemented it yet ;) but I think it should suffice as example.

http://youtu.be/pYHbV_xyBoM

The code I used to produce this simple transition from the menu to white and then to the game state looks like this:

@Override
public void update(GameContainer gc, StateBasedGame sbg, int d)
throws SlickException {
[...]
{