This tutorial is a very basic introduction to the Torque Game Builder engine and it’s also my first tutorial for the package, the resulting Code Free Pong For Mac and Windows game can be downloaded and played on Mac and Windows or you can download the Source Code directly to follow along.

Getting Started

Let’s get started by opening the Torque Game Builder and creating a new game called Pong. It will be an empty game to start with, so we’re going to have to import a couple of static graphics to get us started. I’ve already build the paddles and ball for your game, so you can download these files to get started without having to build them yourself. Now let’s import the files by switching to the Create panel and selecting the Create New icon () to import each of the two files.

The next step is to setup our game by importing some predefined files and is going to require that we first quit Torque Game Builder and save our level (I called mine LevelOne). Since Torque doesn’t recognize files added to the directory once it has started, we have to quit TGB for a few moments.

In your file manager, lets move the whole behaviors folder from our desktop to the appropriate folder which in my case is ../Pong/game/. We want to replace the existing behavior folder with the preprogrammed behaviors supplied by Garage Games. Once those files are copied, we can reload Torque Game Builder and continue building Pong by loading our previous game and then selecting File > Open Level or using the keyboard shortcut Control – O to load our existing level.

Setting Up the Ball

What we want to do now is drag the ball graphic into the middle of our screen and drop it, this will create a single white dot which will act as our ball. Switch from the Create Panel to the Edit Panel and look down the list until you see the Scripting tab, open it and lets name this object “ball” and then open the Collision tab. We want to set the ball to Send and Receive Collisions by clicking the appropriate check boxes. Once that’s done let’s switch the Collision Response to BOUNCE.

Now let’s take a quick look at what we’ve done here and make sure we understand it all. An understanding of the Torque basics will help us progress through the next part of the tutorial. We dragged a copy of the ball graphic into the picture, then we selected it and clicked Edit. Under that menu, we changed its name to ball. Next, we told it that the ball could both be hit and hit other things. Finally, we told it that when something hits it, the proper response is to bounce.

Adding Behaviors

In Torque a Behavior is a preprogrammed set of instructions used to help us get our games up and running faster, the team at GarageGames includes a variety of Behaviors in the TGB kit and we’re going to use them to create Pong. There are two behaviors we want to setup for our ball.

First, let’s add the Random Velocity behavior which will give our ball a random start angle at the beginning of the game. To add this, lets open the Behavior tab and use the pulldown menu to located it. Once that’s done, we’re going use the green + beside the menu to add it to our ball. If you’d like you can now preview the game and watch your ball spin wildly out of control in a random direction.

Back in Torque, we want to give your ball life and the ability for it to “die” so lets add the Takes Damage behavior and set its maximum number of lives to 19 since a game of Pong can only ever go to a maximum of 19 points.

Setting the World Limits

Now the ball can take damage and it can also bounce but we need to make the ball stay on screen so lets take a look at the World Limits tab and our limit mode to BOUNCE, this will ensure that if the ball hits the edges of the world it will bounce back.

To set the actual World Limits we have two options, we can type the appropriate world limit numbers into the box or we can do it graphically by rolling our mouse over the ball until we see an icon representing the World Limits. If we click onto that icon the screen will zoom out slightly and present you with a lightly shaded box. This box is your World Limits and represents where the call is allowed to travel in the game. Resize the box so the top and bottom are at the top and bottom of the outermost green box (which is the edges of our game screen) and do the same for the left and right but instead of being exactly on the edges, lets add a little space to let the ball fall off our screen. When you hit the Enter key, you’re returned to your game preview mode and you’ll see that the values in World Limits now represent the values of the box you resized.

My box has a Min. Bounds of X = -60 and Y = -38, the Max. Bounds are X = 60 and Y = 38. This represents the furthest from the center of the screen my ball is allowed to travel before it bounces and if you’d like to see it in action you can now preview the game which will show your ball randomly bouncing off the top and bottom of the screen as well as disappearing on the left and right but eventually bouncing back into the frame.

Killing the Ball

Our game is coming along great but the problem is obvious, when the ball goes off the left and the right side of our screen, the ball needs to die so lets drag a paddle in from the Create menu and then switch back to Edit. This isn’t really going to be a paddle but I want to show you how we can use the same graphic for multiple purposes in Torque Game Builder.

First, lets resize our paddle to stretch from the top of the outermost green line to the bottom of the outermost green line. Let’s go to the Scene Object tab where we should clean up the killzone values by setting it to Position Y = 0 (which will center it vertically) and set it’s X = 5 which puts it just to the right of our ball. I’m also going to set the Width = 1 and a Height = 80 to make sure it’s bigger than my World Limits. Under the Physics tab we want to check the option Immovable which will ensure the the ball doesn’t push it around.

That’s a great start but now we need to actually kill the ball. Let’s quickly switch to our Collision tab and tell Torque that this new object can Send Collisions but can’t Receive Collisions.

Under the Behaviors tab we want to add the Deals Damage behavior and we want to set the strength of the damage to 1 and deselect the deleteOnHit option. Now our wall deals 1 point of damage each time the ball hits it but it won’t disappear regardless of how many times it’s hit.

Let’s go back to our ball now by selecting it and make sure it’s in the center of the screen by changing our Scene Object settings to a Position of X = 0 and Y = 0. You can now preview the game and watch the ball die each time it hits the killzone wall.

Lets now move our killzone to it’s proper location but before we do, we want to copy it using the keyboard short cut Control – C and paste a new one with the keyboard shortcut Control – V. The first killzone should be moved to Position X = -55 and the second killzone will be at Position X = 55. Now both killzones are off the screen to the left and right but still within the World Limits we set previously. If you test your game the ball will now bounce off the top and bottom of the screen but respawn when it goes past the left and right edges of the screen.

Setting Up the Paddle

Now let’s switch back to the Create panel and drag a paddle into the screen. We want to use the same practices we used above to name this paddle “paddlep”. Under the Scene Object tab we will set the Position to X = 45 and Y = 0 which centers the paddle vertically and places it on the right hand side of our screen. Under the Collision tab we want to make this object Send Collision and Physics but not receive either. These are all fairly similar to what we did for our killzone so far but now I want to add the World Limits for our paddle by settings it’s Min. Bounds to X = 44 and Y = -40, it’s Max. Bounds should be X = 46 and Y = 40, this will set the area our paddle can move. We also want to change the Limit Mode to BOUNCE which will cause it to bounce when it hits the edges.

Adding movement to our paddle is easy with the Torque Game Builder, let’s add the Behavior Thruster Control and change the horizontalThrust to 0 and the verticalTrust to 50. This will cause the paddle to move up and down but lack the power to move left and right. Previewing the game now will let you bounce the ball off the paddle if you’re lucky enough for it to come your way.

Adding another Paddle

As will the killzones, we want to copy and paste the paddle and change it’s Scene Object settings to a Position of X = -45 and Y = 0. The World Zones need to also be changed to Min. Bounds to X = -44 and Y = -40, it’s Max. Bounds should be X = -46 and Y = 40. Remember to rename the paddle to paddlec, to reflect that this is the computers paddle.

Selecting the Thruster Control in the Behaviors panel will allow us to remove it so that we can add the behavior Move Toward Object, and we can set the object to ball using the pulldown menu with a speed of 50.

In Summary

So now we have a simple version of Pong using the Torque Game Builder. It’s pretty straight forward really, we need a ball which knows the size of the world it’s allowed in and it needs to bounce if it hits them. If it hits the sides of that world, it needs to die and if it hits the paddles it needs to bounce.

We’ve done all this without writing a single snippet of code and created a very simple game in about 20 minutes. There are a lot of neat tricks you can learn by experimenting with this tutorial, for example you could change this into a two player game easily by skipping the last step and changing the input keys or you could get rid of the keys altogether and have the players paddle follow the mouse using a behavior.

What’s Next?

This is a simple version of Pong with very little function and it’s designed as a tutorial for the Torque Game Builder but we could easily expand upon the game by adding more modern graphics, a score board and of course fixing the respawn point so it’s always in the middle of the screen.

Next weekend I’ll put together a new version of Pong with TGB using the scripting features. If you have any questions, please feel free to get in touch with me.

In the mean time, you can download the Code Free Pong For Mac and Windows and play it for yourself.

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.