Torque Game Builder from GarageGames is one of my favorite development suites, it’s straight forward with a low learning curve and an easy to navigate user interface but there are a couple of things that are a little tricky and take getting used to. One of those is the process of adding a simple Splash Screen to your project. In this article I will assume that you’ve never used the Torque Game Builder program before but that you have a basic understanding of the concepts of gaming. This tutorial is designed to do nothing more than load a screen, fade it from black and then back to black before loading your game.

So lets get started by loading Torque Game Builder and creating a new project (or loading an existing one). Once it’s opened we want to open the GUI Builder (GUI stands for Graphic User Interface) using the menu Project > GUI Builder or hitting the keyboard shortcut key F10. Once the GUI builder is opened, we are going to add a new GUI by using the menu File > New GIU which will pop up a dialog box allowing you to name your GUI, I want to name mine “ggSplash” because it’s going to be used to load the Garage Game Splash screen. Next we want to set the GUI Class and because it’s a simple fade in we’re going to use the GuiFadeinBitmapCtrl which will do most of the heavy lifting for us. Click Create to create the splash screen.

So this is where the Torque Game Builder GUI Builder gets a little tricky for novice developers, in the upper left hand corner of your newly create splash screen is an object tree which will contain the newly create GUI object with the fancy name GuiFadeinBitmapCtrl, click it to access the property menu below and you will see several options that you can set.

General > faceinTime – How long will it take to fade it in milliseconds (1000 = 1 second)

General > waitTime – How long will it last in milliseconds (1000 = 1 second)

General > fadeouttime – How long to fade out in milliseconds (1000 = 1 second)

GuiBitmapCtrl > bitmap – The file that you want to use as your graphic

There’s also a whole lot of very technical elements to this control but unless you understand them, you’re best to trust GarageGames default values. Using the four above you can effect how the control shows your splash screen. Once you’re done playing with the settings, save the file as “ggSplash.gui” and we’re ready to move onto the really tricky part.

Unfortunately for novice users, there will be some programming to complete in this part of the tutorial but don’t panic, I’ll try to walk you through it gently. First, let’s load the GUI into the games memory. In order to do this we need to change the code of the main game file which can be found in your game directory. The file is called “main.cs” but be careful … there are two of them. The first is in your root directory, for example if your game is called MyGame it’s found in a folder called “MyGame”, within that folder there is another folder named “game”, we want to open the game folder and then load the main.cs file. The best way to know that you’ve got the right one is to make sure your file has a function named initializeProject() near the top (by default it’s on line 10).

Now, in that file we need to add a special line of code to tell your game that you’ve create a new GUI interface. To do that, we must add an exec statement, this special statement tells your game to execute special code. To do this, let’s change our initializeProject() function to look like this:

function initializeProject()

{

// Load up the in game gui.

exec(“~/gui/mainScreen.gui”);

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

// Exec game scripts.

exec(“./gameScripts/game.cs”);

// This is where the game starts. Right now, we are just starting the first level. You will

// want to expand this to load up a splash screen followed by a main menu depending on the

// specific needs of your game. Most likely, a menu button will start the actual game, which

// is where startGame should be called from.

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

}

You’ll notice that I only added one line to the code above, I’ve added exec(”~/gui/ggSplash.gui”); just below exec(”~/gui/mainScreen.gui”); what this is doing is really simple, it’s telling your game to load the mainScreen into memory and also to load the Garage Games Splash screen.

So now your game knows you have a new page but it’s going to need to know when to load it. To do this, I am going to replace the line startGame( expandFilename($Game::DefaultScene) ); with the new line loadSplashScreen(); which will now look like this:

function initializeProject()

{

// Load up the in game gui.

exec(“~/gui/mainScreen.gui”);

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

// Exec game scripts.

exec(“./gameScripts/game.cs”);

// This is where the game starts. Right now, we are just starting the first level. You will

// want to expand this to load up a splash screen followed by a main menu depending on the

// specific needs of your game. Most likely, a menu button will start the actual game, which

// is where startGame should be called from.

loadSplashScreen();

}

Once that’s done we need to create a new function for the code to call at startup. In programming a function is a little like a recipe, basically we can keep looking it up when we need it and it always does the same thing. The function that we need to create now will be called loadSplashScreen(); and will load our splash screen. Here’s the code:

function loadSplashScreen()

{

canvas.setContent(ggSplash);

schedule(100,0,checkSplashTime);

}

function checkSplashTime()

{

if (ggSplash.done)

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

else

loadSplashScreen();

}

The second function is a helper for the first, what it’s doing here is setting the canvas (the screen) based on the values we laid out in the GUI Builder. Then, it’s checking every .1 second (100 milliseconds) to see if the process is done yet and if it is, it calls the default start screen for the game. Otherwise, it goes back and restarts the process of checking.

That’s it! That’s all there is to creating a splash screen in Torque Game Builder, not really complicated but a real pain for a novice coder. To give credit where credit is due, when I first started using TGB I used a great tutorial from http://www.videogamebiscuit.com to help me through some of the growing pains and most of my code above has evolved from there similar tutorial.