Overview

The following links can take you to previous/further sections of the tutorial:

TGB Shooter Tutorial Part 1 - Importing Images
TGB Shooter Tutorial Part 2 - Level and Player Setup
TGB Shooter Tutorial Part 3 - Know Your Enemy
TGB Shooter Tutorial Part 4 - Picking a Fight
TGB Shooter Tutorial Part 5 - Adding Particle Effects

For Part 2 - Level and Player Setup, please continue reading below.

TGB Basic Tutorial - Part 2

Resizing the Camera View

First, to set up our level, we should make sure that the game world is big enough. To do this, simply click on the picture of your player's ship and drag it into the scene view. The blue outline in the scene view (Figure 2.1) is the camera view, basically the view that the player will have of the game world at any one time. When you create game levels in TGB, you can create a level that is much larger than this camera view. However, only what is inside this camera view will be shown at any time. You should notice once you place your ship inside the camera view, that it's relatively large to the camera view. Since this is a side-scrolling shooter, the player should have a good view of what's ahead of them so they can prepare appropriately. As it stands, the camera view is much too small for that to happen.

Figure 2.1

Note: You can right click and drag to move your workspace around, you can also zoom in via a mouse scroll or click on the View drop down menu and choose a zoom option.


Figure 2.2 - The camera view is too small

To change the size of the camera's view, you can either click on the Camera Tool (as shown in Figure 2.3) to resize it visually (hold the Control key while resizing from the corner handles in order to keep the same aspect ratio), or you can edit the position and size values manually by deselecting everything in the level editor (which you can do by simply clicking on the background where nothing else is) and expanding the Camera section under the Edit tab on the right side of the window as shown in Figure 2.4. I much prefer setting the numerical values directly than by resizing since knowing the camera view's size can be critical when setting other values later on.

Figure 2.3

Figure 2.4

The values you should choose for the camera size in this tutorial are:

• X: 0
• Y: 0
• Width: 200
• Height: 150

These values are exactly twice the default size of the camera (100 x 75).

Adding the Sky Background

When you click on the Edit tab you will be confronted with a whole host of things to do to your sky (as shown in Figure 2.10). For now however, we are only interested in the Scene Object rollout. In the Scene Object rollout, you should see an option for the Layer. Remember what we said about layers in TGB, there are 32 layers, the larger the number, the further behind everything it goes. Since our sky is almost guaranteed to be the furthest back object in our game, we can confidently put our sky on layer 30 (as shown in Figure 2.11). You will notice that we did not put our sky on layer 31, that was done on purpose, in case we have something in our game that we decide we need to hide behind everything.

Note: I think it is important to note how much time is saved by using the Level Builder as a main means of building a game. For example, you will notice all of the options in the Scene Object rollout alone. Before GarageGames released the TGB Level Builder, programmers had to hand code all of these variables in .cs files and compile them before running their games. As you can see, with the Level Builder, the workflow has become much more streamlined and simplified most of the work is done by the Level Builder itself. This takes much of the repetitive workload off of the programmers' shoulders and gives them the flexibility to create a much more polished product as a result.

Once you have your sky on the appropriate layer, you should be able to see your ship again (as shown in Figure 2.12).

Figure 2.12

Adding Player Input

We now have our sky set up, as well as our player's ship in the level. However, there isn't anything for a player to do in the game so far. This section of the tutorial deals with adding player input into the game.

First, we will give the player's ship the ability to move around the game world. First, to group the code related to the player ship, we need to give it a class. To do that, select the ship and go into the Edit tab. Once we are in our Edit tab we need to expand the Scripting rollout (as shown in Figure 2.13) and set the Class to PlayerShip

Figure 2.13

Now that you have set up your ship to have a class, we can write the code that tells the ship what to do. To start with, we are going to give our player the ability to move their ship around the screen. To do that, we need to save our level and do a little coding in a text editor. Save the level using the "Save" menu item under the "File" menu, name it level1.t2d, and make sure it is saved into the "game/data/levels" folder inside of your game's project folder.

Open the "game/gameScripts" folder in your project folder. This is where your game scripts should be located. This folder is where we will create all of our script files that make up our game. Create a text file in this folder and name it player.cs. Be sure that when you create your file you add that .cs extension so TGB will recognize it as a script file. Now you can open your newly created player.cs in any plain text editing program. If you remember we set our ship's class to PlayerShip so we are going to add the following function to player.cs:

function PlayerShip::onLevelLoaded(%this, %scenegraph)
{
  // Store a reference to the player's ship in a global variable
  $pShip = %this;
  
   moveMap.bindCmd(keyboard, "up", "pShipUp();", "pShipUpStop();");
   moveMap.bindCmd(keyboard, "down", "pShipDown();", "pShipDownStop();");
   moveMap.bindCmd(keyboard, "left", "pShipLeft();", "pShipLeftStop();");
   moveMap.bindCmd(keyboard, "right", "pShipRight();", "pShipRightStop();");
}

This function does two things. First, it sets up our script so that when you see $pShip in code, it refers to the player ship in the level. Secondly, it binds the arrow keys to some movement functions (that we haven't created yet); one function when the player presses down on the key, the other when they let up on the key.

Beginner Note: If you are editing script in a text editor such as wordpad or notepad, it is good to note that when you save your file to make sure that you are saving it as a .cs file. Oftentimes you can accidentally save a file as scriptFile.cs.txt, meaning that it is a text file. Make sure that your text editor recognizes your script files as such, or else they won't work when you try to run them.

Add this code right below the onLevelLoaded function:

function pShipUp()
{
    $pShip.moveUp = true;
    $pShip.updateMovement();
}

function pShipDown()
{
    $pShip.moveDown = true;
    $pShip.updateMovement();
}

function pShipLeft()
{
    $pShip.moveLeft = true;
    $pShip.updateMovement();
}

function pShipRight()
{
    $pShip.moveRight = true;
    $pShip.updateMovement();
}

function pShipLeftStop()
{   
    $pShip.moveLeft = false;
    $pShip.updateMovement();
}

function pShipRightStop()
{
    $pShip.moveRight = false;
    $pShip.updateMovement();
}

function pShipUpStop()
{
    $pShip.moveUp = false;
    $pShip.updateMovement();
}

function pShipDownStop()
{
    $pShip.moveDown = false;
    $pShip.updateMovement();
}

These functions handle movement for the ship. Basically whenever your player presses a key, it accesses the appropriate movement function, sets a movement variable to “true”, and accesses a new function called updateMovement(). The updateMovement() function looks like:

function PlayerShip::updateMovement(%this)
{
    if (%this.moveLeft) {
      %this.setLinearVelocityX( -$pShip.hSpeed );
    }

    if (%this.moveRight) {
       %this.setLinearVelocityX( $pShip.hSpeed );
    }

    if (%this.moveUp) {
        %this.setLinearVelocityY( -$pShip.vSpeed );
    }

    if (%this.moveDown) {
        %this.setLinearVelocityY( $pShip.vSpeed );
    }

    if (!%this.moveLeft && !%this.moveRight) {
        %this.setLinearVelocityX( 0 );
    }

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

This update movement function is what makes the whole thing work. What it does is read the input given by any of the movement functions and decides which direction and speed to move the player. It also waits until a key is released and then stops the ship.

Now that we have our code completely written, we need to tell the engine to run player.cs when it runs the game. To do this, open the main.cs file in yourProjectName/game. When you get your file open, you need to find these lines of code:

// Exec game scripts
exec("./gameScripts/game.cs");

Once you have located those, add this line of code right below it:

exec("./gameScripts/player.cs");

This line of code tells your game to load the code that is in the player.cs file when the game starts. NOTE: DELETE THE . in the // Exec game scripts line that is in the main.cs file... the plane won't fly with the little dot there!

Now I want to draw your attention to these lines of code that we wrote in our updateMovement function in our player.cs file:

%this.setLinearVelocityX( $pShip.hSpeed );
%this.setLinearVelocityY( -$pShip.vSpeed );

You will notice that we are setting our velocity to hSpeed and vSpeed, two variables that don't exist yet. We need to create these variables for our ship before our ship will move around. Luckily, the Level Builder has built in an easy way to add variables to an object.

First, you will need to open up your project in the Level Builder again and select your ship. Once you have your ship selected you need to go back into the edit tab and find the Dynamic Fields rollout at the bottom of the list (as shown in Figure 2.16). Note: You may need to resize your right panel, by dragging outwards, to see the plus button.

Figure 2.16

You will notice that the Dynamic Fields rollout only has two things to do, add a field name, and a value for that field. With this option, you can add any variables to any object and set their value. This is useful because when you are testing gameplay, it is a lot easier to tweak with values easily found in the Level Builder than to search through pages of code trying to find where you used your variables. For our ship, we will be adding the two variables we used to control the speed of the ship hSpeed and vSpeed. Add a field for each of those variables and click the green plus sign to create it (as shown in Figure 2.18). I chose values of 100 and 80, respectively (as shown in Figure 2.17).

Figure 2.17	Figure 2.18

If for any reason you ever decided that you needed to delete a variable you had created in the dynamic field rollout, simply click on the red minus sign to delete it.

Now that we have our ship's code ready, it is time to test it! Click on the play button on the top bar (as shown in Figure 2.19) or go to PROJECT -> RUN GAME.

Figure 2.19

Once you are inside your game, you should be moving around smoothly! If you aren't moving like you are supposed to be, make sure that your code matches mine and that your variables are named correctly. When you get your ship working, you may want to tweak your speeds to get something you are happy with, thanks to them being dynamic fields, they can be easily changed in the Level Builder.

Setting World Boundaries for the Player Ship

You may have noticed that you can fly right off the map. This could very easily ruin gameplay since the player may lose his ship off the edge of the screen and not know where it is, or cheat and fly above the enemies. To keep the ship inside of the visible area you simply have to adjust the world limits for this object.

To do this, click on the ship. When your ship is selected, go to the Edit tab and expand the World Limits section. Change the value in the popup from OFF to CLAMP. This will cause the ship to be "clamped" within the bounds specified. The bounds specified in the image below (-100, -75, 100, 75) are exactly the bounds of the camera view. They can of course be set to whatever you want, but it's most logical in this game to set them to be the same as the camera view's.

Figure 2.20

Now that we have our player in the game, we should give him some opponents.

Continue on to Part 3 - Know Your Enemy