Game Development Community

Fade in / fade out transitions (including GUIs) without source code changes

by Bruno Campolo · in Torque Game Builder · 09/13/2009 (4:07 pm) · 2 replies

After reading various forum posts saying the only way to do it was by modding the engine source...

Here are some high-level instructions on how to achieve fade in and fade out transitions between screens such that the entire screen contents fade in and out (including gui controls) WITHOUT source code changes:

1) Startup the gui builder and drop a GuiFadeinBitmapCtrl on your canvas and size it to fit nicely.
2) Call this gui control "fadeOutGui" and set the fadeInTime and waitTime to 0 and the fadeoutTime to 1000 or whatever number you choose. Do not set a bitmap image and leave the other parameters to their defaults. Save this gui as "fadeOut.gui" and make sure to exec it in your script.
3) Create a new gui same as step 1, but call it "fadeInGui" and set the fadeInTime to 1000 and the waitTime and fadeOutTime to 0. Do not set a bitmap image and leave the other parameters to their defaults. Save this gui as "fadeIn.gui" and make sure to exec it in your script.

4) Create a helper function to transition your gui screens like so:
function transitionScreen(%guiToPop, %guiToPush)
{
   Canvas.pushDialog(fadeOutGui);
   schedule(1000, 0, transitionScreenLoad, %guiToPop, %guiToPush);
}

function transitionScreenLoad(%guiToPop, %guiToPush)
{
   Canvas.popDialog(%guiToPop);
   // DO WHATEVER YOU WANT HERE, LIKE LOAD LEVELS, ETC
   Canvas.pushDialog(%guiToPush);
   Canvas.pushDialog(fadeInGui);
   Canvas.popDialog(fadeOutGui);
   schedule(1000, 0, transitionScreenDone);
}

function transitionScreenDone()
{
   Canvas.popDialog(fadeInGui);
}

Then call your new function like so:
transitionScreen(loginGui, gamePlayGui);  // OR WHATEVER YOUR GUI NAMES HAPPEN TO BE

Have Fun!
Bruno Campolo's profile picture
Torque Owner Bruno Campolo

About the author

Creator of Bantam City Games, a one-man independent game development studio. To learn more, check out 'A Game Developer's Saga', a game development blog at: http://www.bantamcity.com/blog

Recent Threads

  • TGB onMouseEnter onMouseLeave problem
  • TGB onMouseEnter onMouseLeave problem
  • Alt+Tab and Alt+Enter don't work when GuiTextCtrl present
  • commandToClient networking questions
  • The 24 Hour Game Experiment
    • NextNext Thread
    PrevPrevious Thread
    More from Torque Game Builder


    Sailendu Behera
    #1
    09/14/2009 (3:16 am)
    Nice little snippet, thanks..

    Torque Owner Giuseppe Bertone
    DGform s.r.l.
    #2
    01/21/2010 (10:06 am)
    Really useful, many thanks for sharing. :-)

    I suggest some little modifications. Instead of using 1000 as a fixed value, you can change it with a $globalVariable in gui and in functions. Also, you can use only 2 functions:

    function transitionScreen(%guiToPop, %guiToPush)
{
   Canvas.pushDialog(fadeOutGui);
   //$fadeOutTime is used in fadeOut.gui file also
   schedule($fadeOutTime, 0, transitionScreenLoad, %guiToPop, %guiToPush);
}

function transitionScreenLoad(%guiToPop, %guiToPush)
{
   Canvas.popDialog(%guiToPop);
   // DO WHATEVER YOU WANT HERE, LIKE LOAD LEVELS, ETC
   Canvas.pushDialog(%guiToPush);
   Canvas.pushDialog(fadeInGui);
   Canvas.popDialog(fadeOutGui);
   //$fadeInTime is used in fadeOut.gui file also
   Canvas.schedule($fadeInTime, popDialog, fadeInGui);
}