TGB/BasicTutorial1

From TDN

This page is a Work In Progress.


Contents

Overview

The following links can take you to 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


Tutorial Notes


This tutorial has been updated to be accurate with TGB 1.7.3. It's still not complete to create the full shooter demo game, but is complete enough to cover all of the basics needed to be well on one's way to creating it. You can download the full TGB shooter demo game and pick through it to learn a lot of things this tutorial does not currently cover.



Introduction


Here, we are going to give you a quick example of how to use TGB. By the end of this tutorial, you'll have seen how to load sprites and particle-effects, set-up collision detection, accept player input, and even add a hint of gameplay!

We all treat TGB pretty much as a black box - rather than explaining how everything works inside TGB, our goal here is just to get you up and running as quickly as possible. This tutorial is written so that pretty much anyone can understand it; experienced programmers will no doubt want to skip over some of the explanatory stuff. Note though that we are not trying to provide a whole programming tutorial here. We assume you are at least capable of looking at simple script code without it exploding your mind.  ;) If you want more information on TorqueScript, please see the Torque Documentation.

Alright, let's see how to get some stuff up on the screen!

Image:TGB_Tutorials_Shooter.jpg

Getting Started


The Level Builder allows users to easily start new projects through a simple project creation wizard. This gives designers a much more flexible approach to creating new projects, since the Level Builder automatically creates all of the files a user needs to make a game. This section, of the shooter tutorial, will help you work through the process of starting a brand new game project from scratch.

Creating a Project


To start, open Torque Game Builder. By default, the Level Builder will start with the last project that was loaded. This makes it really easy to pick up where you left off (as shown in Figure 1.2). If you have been playing around with the Level Builder before reading this you will see whatever you worked on last.

To create a new project, select New Project from the File menu. When you do this, the New Project dialog will appear.

Image:TGB_BasicTutorial1_2.JPG Image:TGB_BasicTutorial1_3.JPG
Figure 1.2Figure 1.3


In this dialog (Figure 1.3), you can name your project whatever you wish, or choose a template from an existing project. Choose a name you are happy with (I chose shooterTutorial for my project), leave the template as Empty Game and click Create. At this point, the Level Builder will clear itself and show you an empty workspace, as shown here:

Image:TGB_Tutorials_Shooter_NewProject.jpg
Figure 1.4

When you create a new project, the TGB Level Builder automatically sets up the base file hierarchy for your project. Windows and Mac users can find their project directory (assuming you've used the default install direcory) in the following locations:
Windows: C:\Program Files\TorqueGameBuilder\games\yourProjectName
Mac: /Users/yourUserName/MyGames/yourProjectName

Importing Audio, Images, and Particle Effects


You can download the art and other assets for this project from this wiki. When you open the downloaded file, you'll see a data folder, with audio, images, and particles inside of it. We won't be using all of these resources, but they're available here for you to use to expand on the finished tutorial if you wish. Copy all of the images, audio, and particle effect files from inside of these folders into the respective folders inside of your shooter game's project folder at the path listed above. Go ahead and replace any existing files if asked.


Although we've now copied these images into the game folder, you won't see them show up in Torque Game Builder automatically; We need to specifically import each image that we'll be using, and tell TGB how exactly we want the image to be used. First, click on the Create a new ImageMap button:


Image:TGB_Tutorials_Shooter_CreateImageMap.jpg
Figure 1.5

Once you click on this button, a dialog should appear asking you to select your image (on Mac OS X, the standard "open file" dialog will open) (as shown in Figure 1.7). The file browser should automatically navigate you to yourProjectName/data/images folder, but double-check to be sure.



Image:TGB_BasicTutorial1_7.JPG
Figure 1.7


First we need to import a ship for the player in an image named playerShip.png. Find that image in the list and click select (as shown in Figure 1.8).


Image:TGB_BasicTutorial1_8.JPG Image:TGB_Tutorials_Shooter_ImportPlayerShipMacOSX.jpg
Figure 1.8

After creating an image map for the player's ship, you will see it show up in the Static Sprites section of the project library.

Image:TGB_Tutorials_Shooter_PlayerShipImported.jpg
Figure 1.9

The player's ship image is a single image. Torque Game Builder, can also handle multiple pieces, or frames, within the same image file. For example, when the player's ship is blown up, it breaks into several pieces. Find the image named "debrisPlayer.png". This image contains four frames of the player's ship broken into four pieces. Create an image map for this image as you did with the player's ship in one piece.


Image:TGB_Tutorials_Shooter_PlayerDebris1.jpg

In the Static Sprites section, double-click on the image map for the debris. The window that will pop up contains all of the settings which tell TGB how to interpret and use the image.


Image:TGB_Tutorials_Shooter_PlayerDebris2.jpg

Under Image Settings is a popup labeled "Image Mode". Click on this popup and change the value from FULL to CELL. The FULL image mode tells TGB that the image is one single frame. The CELL image mode tells TGB that there are multiple frames in the image, and that they are combined using a logical grid. In this particular image the image frames are square 128x128 cells, two across, and two high.


Image:TGB_Tutorials_Shooter_PlayerDebris3.jpg

After you select the CELL image mode, you'll see your image broken into four parts:


Image:TGB_Tutorials_Shooter_PlayerDebris4.jpg

After saving the changes to the image map, you will now see a little button tab under the image in the Static Sprites section of the project library. You can click on this button the flip through the different frames of the image.


Image:TGB_Tutorials_Shooter_PlayerDebris5.jpg


Now that you know how to import images, import the following images using the FULL image mode:

  • bg_blank_sky.png
  • enemyMissile.png
  • enemyShip1.png
  • playerMissile.png


And import the following images using the CELL image mode, adjusting the cell width and height values if necessary.

  • particles1.png
  • particles2.png
  • particles3.png
  • particles5.png
  • particles6.png



Reload the Project


After importing all of the images, select the "Reload Project" menu item from the "Project" menu. All of the particle effects that you copied into to the "particles" folder earlier, are automatically loaded by TGB, and now that you have created the necessary image maps for the images that the particle effects use, you'll see the particle effects in the Particle Effects section in the library. If you hover with the mouse over any of the effects, you'll see it animate.



Once you have all of your images imported, we can begin making our game world.

Continue on to Part 2 - Level and Player Setup