From TDN

Creating Pong in TGB in 10 Easy Steps! By Matthew “Spindle” Harris Blur Games http://www.blurgames.com

Welcome to the step by step guide to creating pong in TGB in only 10 steps. Currently this will only be multiplayer, but if community shows interest AI and other features will be added.

Step One – Get the graphics Link http://www.blurgames.com/pongTGBImages.zip

The zip file contains paddleOne.png, paddleTwo.png, ball.png, gglogo.png. Feel free to substitute your own images.

Step Two – Create the TGB project

Open up your TGB editor if you haven’t already done so and go to File -> New Project. A dialog will pop up. Enter PongTGB as the project name and leave the project template as Empty Game. Then hit the create button.

Step Three – Import the Sprites

Go to your TorqueGameBuilder/Games/PongTGB/data/images folder and copy and paste paddleOne.png, paddleTwo.png, ball.png, gglogo.png into the directoy. Now hit the “Create a new ImageMap” Button. A dialog will pop up. Make sure the current path is your images folder. Select ball.png and hit the Select button. The image map will automatically be name ballImageMap. Leave it like this. Make sure the Image Mode is set to Full and the Filter Mode is set to smooth. Check Filter Pad. Prefer Speed and Preload should already be checked, and allow unload unchecked. Hit the save button. You have now created your first Sprite/ImageMap. Do the same for paddleOne.png, paddleTwo.png, and gglogo.png.

Step Four – Drag Sprites to the scene

You will notice the four imagemaps under static sprites. Grab one of each and drag it to your scene. Starting to look like pong eh?

Step Five – Setting the Objects Attributes for the Ball in the editor

Select the ball sprite and click on the edit panel in the editor. Under the scene Object rollout set the Position of X and Y to 0 and 0 respectively. Set the Size of width and height to 12 and 12 respectively. Under the scripting rollout enter ball for the name and ballClass for the class. Under the collision rollout make sure Send Collision and Receive Collision is checked. Send physics, Receive Physics and Callback should be unchecked. Detection mode should be set to Polygon. (We will discuss setting up the collision bounds in a few steps). This is the part where we use the editor to our advantage. On the World Limits rollout set Limit Mode to BOUNCE, set the Min. Bounds X/Y to -100/-75 respectively and Max. Bounds X/Y to 100/75 respectively. The ball is all setup, do not worry about the other rollouts.

Step Six – Setting the Object Attributes for the Paddles in the editor

Do the following steps for both paddles one at a time, there is a slight different however. For the scripting rollout for paddle one enter playerOne as the name and playerOneClass as the class. For the scripting rollout for paddle two, enter playerTwo for the name and playerTwoClass for the class. Also position X of the first paddle is -96 and position X for the second paddle is 96. (Why 96? Because its our world limits on the x axis – half the width of the paddle. This positions it on the x axis against the wall)The following changes apply to both paddles. In the Scene Object rollout set position Y to 0. Set the Size Width and Height to 32 and 8 respectively. Set the Rotation to 90. In the collision rollout make sure Sent Collision, Receive Collision, Send Physics, Receive Physics is checked and Callback unchecked. Detection Mode should be polygon. (We will discuss setting up collision bounds in a few steps). In the World Limits rollout set the Limit Mode to CLAMP, set the Min. Bounds X/Y to -100/-75 respectively and Max. Bounds X/Y to 100/75 respectively. Again here we are utilizing the TGB editor making it work for us. The two paddles are all set up.

Step 7 – Layer Arrangement.

Click on the GG logo and set its position X/Y to 0/0 respectively. Also set the size Width/Height to 154.365/30.300 . Weird numbers I know but I like to keep the aspect ratio the same. Also set the GG logo to layer 1 (which is actually the second layer). A note about layers, there are 32 of them in GG, the higher the layer number the further back it is in the scene. Select the playerOne paddle and set the layer to 0 (first layer). Select the playerTwo paddle and set the layer to 0. Select the ball and set the layer to 0.

Step 8 – Collision bounds.

Hover over the playerOne paddle and select the edit this objects collision polygon. This will zoom in and temporarily rotate the sprite. Click four times on the surface and drag the blue handles to the corners of the sprite. Hit Enter/Return. Do the same for the playerTwo paddle. Now select the ball and select the edit this objects collision polygon button. Evenly distribute 16 handles around the circumference of the ball. You are done setting up collision bounds

Step 9 – Take a break.

Step 10 – The Code.

Create a cs file named pongtgb in your torquegamebuilder/pongTGB/gamescripts folder. Name is pongtgb.cs. Now this is very important. Go into your pongTGB folder and add this line of code: exec("./gameScripts/pongtgb.cs"); under exec("./gameScripts/game.cs"); in your initializeProject() function. Go back to the gamescripts directory and open pongtgb.cs. Paste or rewrite the following code. The code should be self explanatory.

//---------------------------------------------------------------------------------------------
// Torque Game Builder
// Copyright (C) GarageGames.com, Inc.
//---------------------------------------------------------------------------------------------
function playerOneClass::onLevelLoaded(%this, %scenegraph)
{
    $playerOne = %this;

    // key bindings for player one
    moveMap.bindCmd(keyboard, "w", "playerOneUp();", "playerOneUpStop();");
    moveMap.bindCmd(keyboard, "s", "playerOneDown();", "playerOneDownStop();");
}

function playerTwoClass::onLevelLoaded(%this, %scenegraph)
{
    $playerTwo = %this;

    // key bindings for player two.
    moveMap.bindCmd(keyboard, "UP", "playerTwoUp();", "playerTwoUpStop();");
    moveMap.bindCmd(keyboard, "DOWN", "playerTwoDown();", "playerTwoDownStop();");
}

function ballClass::onLevelLoaded(%this, %scenegraph)
{
    $ball = %this;

    // start the ball off at a speed of 100 at a 45 degree angle
    $ball.setLinearVelocityPolar(45, 100);
}

// player one movement
function playerOneUp()
{
    $playerOne.moveUp = true;
}

function playerOneDown()
{
    $playerOne.moveDown = true;
}

function playerOneUpStop()
{
    $playerOne.moveUp = false;
}

function playerOneDownStop()
{
    $playerOne.moveDown = false;
}

// player two movement
function playerTwoUp()
{
    $playerTwo.moveUp = true;
}

function playerTwoDown()
{
    $playerTwo.moveDown = true;
}

function playerTwoUpStop()
{
    $playerTwo.moveUp = false;
}

function playerTwoDownStop()
{
    $playerTwo.moveDown = false;
}

// check if the ball collides.
function ballClass::onCollision(%srcObj, %dstObj, %srcRef, %dstRef, %time, %normal, %contactCount, %contacts )
{
    // this just makes sure the paddles stay put on their x axis
    if(%dstObj.class $= "playerOneClass")
    {
        $playerOne.setPositionX(-96);
    }   

    if(%dstObj.class $= "playerTwoClass")
    {
         $playerTwo.setPositionX(96);
    }         
}

// movment for player one
function playerOneClass::updateMovement(%this)
{
     if (%this.moveUp)
     {
         %this.setLinearVelocityY(-100);
     }

     if (%this.moveDown)
     {
         %this.setLinearVelocityY(100);
     }

     if (!%this.moveUp && !%this.moveDown)
     {
          %this.setLinearVelocityY(0);
     }

}

// movement for player two
function playerTwoClass::updateMovement(%this)
{
     if (%this.moveUp)
     {
         %this.setLinearVelocityY(-100);
     }

     if (%this.moveDown)
     {
         %this.setLinearVelocityY(100);
     }

     if (!%this.moveUp && !%this.moveDown)
     {
          %this.setLinearVelocityY(0);
     }

}

// update the scene
function t2dSceneGraph::onUpdateScene()
{
    $playerOne.updateMovement();
    $playerTwo.updateMovement();
}

Here is a Mac Build of the Project. Windows Coming soon!

http://www.blurgames.com/PongTGBMac.zip