This is the first article in a series of tutorials about Torque Game Builder. For these tutorials, basic knowledge of Torque is assumed. I am not going to write complete beginner courses, but specific howto’s. And I’m gonna start with a tutorial on how to make a splash screen. If you have bought the indie license version of any Torque product, you are required to show the Torque logo on startup, and a splash screen is perfect for that. The GUI builder contains everything you need to do just that.
So let’s get started! Start Torque Game Builder and open the GUI builder (F10 or Project -> GUI Builder). Go to File -> New Gui; a dialog box will pop up. First, name the new GUI you will be creating; let’s name this one “Splash”. Next, select the GUI class. To create a splash screen, we’re gonna use the GuiFadeinBitmapCtrl class. With this class, you can show a bitmap with a fade-in and fade-out effect, wich is perfect for splash screens. Now you have a GUI containing an empty GuiFadeinBitmapCtrl object.
Now you have to put an image in it. There’s one thing you need to keep in mind here. This control always gets stretched out to fill the entire screen, even if you resize and reposition it, so use a screen filling image. You can select the image you want to use in the GuiBitmapCtrl category, on the bottom right part of the screen. And finally, you’ll have to set the fade effects. You’ll notice three fields in the category “General”: fadeinTime, fadeoutTime and waitTime. These are quite self-descriptive. The first two are the time needed to fade in and out, and the third field is the time between the fade effects. All times are in milliseconds. Make sure “done” is unchecked. Save the GUI (File->Save GUI) and name it “splashScreen.gui”.
And now it’s time to do some coding to get the splash screen up and running! In the directory “game”, wich is located in your project directory, open the file “main.cs”. The function “initializeProject()” is executed when your game is launched, and that’s where we’re gonna initialize the splash screen. First, the GUI file needs to be loaded. Look for the following line of code in the “initializeProject()” function:

// Load up the in game gui
exec(”~/gui/mainScreen.gui”);

Add this line behind that one:

exec(”~/gui/splashScreen.gui”);

Next, we’re gonna replace the default startup function of the game. Locate following line of code and disable it by putting two slashes (//) in front of it:

startGame(expandFilename($Game::DefaultScene));

And add this code behind it:

loadSplash();

That’s it for the initializeProject() function. Now we need to write two more functions to get it working:

function loadSplash()
{
canvas.setContent(Splash);
schedule(100,0,checkSplash);
}
function checkSplash()
{
if (Splash.done)
startGame(expandFilename($Game::DefaultScene));
else
loadSplash();
}

And that’s all there is to it! When you run the game now, the splash screen will fade in, remain visible for a while and fade out again. After that, the game will start. Instead of starting the game, you will probably want to modify the code to start a title screen with a menu, but that’s for another tutorial.