How to implement transition between screens

Question

Last night I showed my game to my friends and they said it was a bit jumpy.

The example he gave was in the pokemon games when a battle starts music plays, the screen flashes then pixels out then the pokemon slide on from the side and the battle menu appears.

In my game you are walking along and the all of a sudden you are staring at the battle menu, I do see his point.

I am using a switch statement for my game loop, 1 is a fields and 2 is battle, in battle I run an if statement, if battle active do battle else display results screen/wait for user input.

I thought about making a state for the transition but them I would need a stater for field -> battle, battle -> field, town -> field and the list goes on an on seeming like lots of repeated code to me but I cant think of a way to pause the state while i play an animation like pokemon

With that sort or architecture how would transition between screens smoothly like my mate suggests?

C++ and directX

Edit: the problem I have is that once the state is changed the update routeen for that state is not called so all the sprites disappear as they are textures and only the background remains so I cannot just play a animation then change state or it will look even worse.

Answer 1

I built a generic transition system for a 2d engine for iPhone. I'm going to try to explain it. This is only an approach, the implementation has more things that are not relevant.

Suppose that your engine is hierarchical, if it is not, there are a lot of of reasons why a game engine must be hierarchical. We can have two interfaces IState and ITransition inheriting from the SceneNode class. Like this:

Well, SceneNode can be updateable, this means that the parent calls the children method "update" and enabled, that receive or not input events ( so you can disable the user events when the transition is executing ).

Every state has a name, and every transition has the old and new state between the transition exists.

Ok. Now we can have two managers, Transition and StateManager, the purpose of these managers is to have a registry of all Transitions and States and offer features. These managers can be singleton to be accessible from everywhere.

With addTransition we attach a custom transition to a pair of menus, the order is important. When we call changeState, the manager is responsible of test if a transition has been added and execute it if exist.

With this simple architecture, we are to program a transition between the MainMenu to Battle.

The current scene graph is:

My transition implementation:

TransitionMenuToBattle : public ITransition
{
    public:
        void enter()
        {
            getOldState()->setActive( false );
            getRoot()->addChild( this );

            addChild( blackSprite );
        }

        void update( float delta )
        {
            // make fade of blackSprite
            // ...

            if ( blackSprite->getAlpha() == OPAQUE )
            {
                getRoot()->addChild( getNewState() );
                getNewState()->setActive( false );
            }

            if ( blackSprite->getAlpha() == INVISIBLE )
                exit();
        }

        void exit()
        {
            getRoot()->removeChild( this );
            getNewState()->setActive( true );
        }
};

When enter method finishes, the scene graph is:

When exit method is called in update:

when exit method finishes:

when the game begins we need to add the transition:

TransitionFactory::get()->addTransition( "StateMainMenu", "StateBattle", new TransitionMenuToBattle( ) );

Then, for example in a button callback from MainMenu, we can put the call TransitionFactory::get()->changeMenu( "StateMainMenu", "StateBattle" ); or wrap this method into:

IState::changeMenu( std::string newMenu )
{
    TransitionFactory::get()->changeMenu( getStateMenu(), newMenu );
}

You can complicate the transition much as you want. The transition has access to the two states and it can do things like overlap elements of two. The transition can receive the things that needs in his constructor. If TransitionManager detects that there is no transition added between two states can have a default behavior.

Answer 2

You could just make a single "transition" state, with which state you're going to and from indicated as a couple of variables in the object.

Answer 3

If you're not willing to change your architecture from a switch statement to using the state design pattern (which is fine, as you know your code best) then it's gonna be pretty ugly.

Assuming you're using an architecture with a fairly standard Update loop, perhaps you could have a flag checking whether a transition is required and on the next Update check for the flag being set right at the beginning of your update loop and if it's on, then play a transition and wait until the transition has completed before turning the flag off.

Quick, dirty pseudocode would be:

bool bStateChangeRequested;

while( bUpdate )
{
    if( bStateChangeRequested )
    {
        PlayTransition();
        WaitForTransitionToComplete();
    }

    DoStateStuff();
}

Hope that helps, although I'd highly recommend the state design pattern for solving this. It'll make everything so much cleaner and better organised, so a definite thing to think about in future iterations.

Answer 4

In your switch statement call to a transition routine. For a ridiculously oversimplified pseudo answer:

void changeState ( int destinationState, int *currentState ) {
    // check that destination state is valid
    // check that current state can transition to destination state
    doTransition ( *currentState, destinationState);
    *currentState = destinationState
}

[Edit] To call this using a switch statement that already exists you would do something like this:

switch (destinationState): {
1: {changeState ( 1, &currentState); break; } // switch from some state to fields
2: {changeState ( 2, &currentState); break; } // switch from some state to battle
}

Then you do still need to write doTransition() that would actually do that transition animation. doTransition would do your fade in/fade out/whatever you wanted it to do.

Answer 5

I use the SFML library to do all my graphics and windows and stuff, but one way of doing it is with a few variables:

#include <SFML/Graphics.hpp>

bool FaderHappens = false;
bool FaderTrue = false;
bool gameStarted = false;
bool gameStartedSub1 = false;
float FaderVar = 0;
int main() {
  while (window.isOpen())
  {
    sf::RenderWindow window(sf::VideoMode(840, 680), "Your Program Name",sf::Style::Default);

    window.setFramerateLimit(65);
    sf::RectangleShape Fader(sf::Vector2f(850, 550));
    while (window.pollEvent(event))
    {
      if (event.type == sf::Event::Closed)
        window.close();
    }
    window.clear();

    if (YOUR_EVENT) {
      FaderHappens = true;
      FaderTrue = true;
    }
    if (FaderTrue == true && FaderHappens == true) {
      if (gameStartedSub1 == false) {
        FaderVar = FaderVar + 63.75;
      }
    }
    if (FaderVar == 255 && FaderHappens == true && FaderTrue == true) {
      if (gameStarted == false && gameStartedSub1 == false) {
        gameStartedSub1 = true;
      }
      FaderTrue = false;
    }
    if (FaderTrue == false && FaderHappens == true) {
      FaderVar = FaderVar - 63.75;
    }
    if (FaderVar == 0 && FaderTrue == false && FaderHappens == true) {
      FaderHappens = false;
    }
    Fader.setFillColor(sf::Color(0, 0, 0, FaderVar));
    window.draw(Fader);
    window.display();
  }
}

This should give you a basic understanding of the logic that goes into making a fading animation. The 63.75s can be changed to make the animation slower or faster, though note that the number you put in must be the number 255 divided by any whole number (otherwise it would loop forever). I am sorry if something is mixed up, as I took this from my own project and was trying not to show irrelevant code. I believe it to be clean of any mistakes though.