Screen fade out effects for transitions

[Sullivan]

Hi,
I'd like to share with you this simple effect that I have written yesterday for my game.
I was searching for a solution to make a fade out from black for the beginning of my game: you know, is not very nice start a game without any smooth transition. So I was thinking to make a very simple shader to solve the problem, when I thought to an absolutely simpler, and a little "old school" solution...
It's quite banal, so probably most of you will not take care of this post, but maybe I can help someone to speed up his workflow (a bit at least ).
But let me explain what exactly this code do: it just draw a full screen black rectangle with different alpha values... that's it!

Ok now let's see some code:
First of all you need this two variables:

Code: Select all

 
  int transition_alpha = 255;  //the alpha value of the rectangle
  irr::f32 transition_time_start = -1;  //when the transition start...
 

And this two functions:

Code: Select all

 
  //Call this function when you want to start the effect 
  void startTransitionFadeOut()
  {
      transition_time_start = device->getTimer()->getTime();
  }
 
  //this function do the real work and must be placed between "smgr->drawAll();" and "driver->endScene();"
  //you need to pass to it the speed of the transition and the current time
  void updateFadeOut(irr::f32 speed, irr::f32 current_time)
  {
      float difference = (current_time - transition_time_start)/1000;
 
      driver->draw2DRectangle(irr::video::SColor(transition_alpha,0,0,0),
                                  irr::core::rect<irr::s32>(0,0 ,driver->getScreenSize().Width, driver->getScreenSize().Height));
      if(difference >= speed/1000)
      {
          transition_alpha--;
          transition_time_start = current_time;
      }
  }
 

Here a full example of the usage:

Code: Select all

 
#include <irrlicht.h>
 
irr::IrrlichtDevice *device;
irr::video::IVideoDriver* driver;
 
int transition_alpha = 255;  //the alpha value of the rectangle
irr::f32 transition_time_start = -1;  //when the transition start...
 
void startTransitionFadeOut()
{
        transition_time_start = device->getTimer()->getTime();
}
 
void updateFadeOut(irr::f32 speed, irr::f32 current_time)
{
        float difference = (current_time - transition_time_start)/1000;
 
        driver->draw2DRectangle(irr::video::SColor(transition_alpha,0,0,0),
                                  irr::core::rect<irr::s32>(0,0 ,driver->getScreenSize().Width, driver->getScreenSize().Height));
 
        if(difference >= speed/1000)
        {
            transition_alpha--;
            transition_time_start = current_time;
        }
}
 
int main()
{
        device = irr::createDevice( irr::video::EDT_OPENGL, irr::core::dimension2d<irr::u32>(640, 480), 16,
                        false, false, false, 0);
 
        if (!device)
                return 1;
 
        device->setWindowCaption(L"Fade Out - demo");
 
        driver = device->getVideoDriver();
        irr::scene::ISceneManager* smgr = device->getSceneManager();
 
        smgr->addCameraSceneNode(0, irr::core::vector3df(0,30,-40), irr::core::vector3df(0,5,0));
 
        startTransitionFadeOut();
 
        while(device->run())
        {
 
                driver->beginScene(true, true, irr::video::SColor(255,100,101,140));
 
                smgr->drawAll();
 
                if(transition_alpha != 0)
                {
                    updateFadeOut(5, device->getTimer()->getTime());
                }
 
                driver->endScene();
        }
 
        device->drop();
 
        return 0;
}
 

[Saumane]

http://irrlicht.sourceforge.net/docu/cl ... fader.html

[Sullivan]

ops... I didn't know that...

[kiel814]

Hey Sullivan! Back when I was writing games for a living, I used the "black rectangle" technique more than once.
It may be a little primitive, but it's simple and effective. And I'm sure there are other commercial games out there using it (not only the ones made by me).

The simplest answer is usually the best answer

[serengeor]

And I'm sure there are other commercial games out there using it (not only the ones made by me).

I think I saw one using it a few days back (aion I think)
It was a bit bugged so the first few pixels on the left were visible.

[REDDemon]

I used the built-in inout fader so much for the loading screens in my apps. XD this one seems nice too.

[teto]

Wow I didn't know such a thing was embedded ! I've also created my own system which mayve have one advantage over this one: you can chain fadings. Sadly I don't see an EGUI_EVENT_TYPE for IGUIInOutFader. Some events like:
EGET_FADEIN_FINISHED
EGET_FADEOUT_FINISHED
could be generated
(even maybe EGET_FADE*_STARTED though that couldprove useless)