How to get smooth transition within slick?

Question

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?

Answer 1

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.
menu.alpha = 1 //We render only the menu.
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.

    if renderMenu:
        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.

Answer 2

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

See Javadoc: enterState

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 {
    [...]
    if(App.keys.menuEnter.pressed(i))
    {

        sbg.enterState(2, new FadeOutTransition(Color.white, 1000), new FadeInTransition(Color.white, 1000) );
    }
    [...]
}

If you look at the method signature of enterState you see, that the overload will take the state id, a fade out and a fade in transition. I simply took two of the transitions and looked at the constructor of them. There you already see, what options are possible (color and duration in the case of the fade in/out).

Just try out the classes, look at the methods and constructors and try to find out how they work, if to few documentation is provided.

Edit: Make sure that your update and render methods work, even if init hasn't run yet. I think the transitions may cause the render method to be called before init.