Build Your Environment

Find where you installed TGB. Copy that directory (it will contain the engine, games, and tgb directories) to a new location and name it FillBattle. I keep my game development in a quick, easy location (“D:\Torque2D”), so I copy to “D:\Torque2D\FillBattle”. NOTE: Do NOT copy this into your “Program Files” directory!

Why? (If you don’t care, skip this paragraph.) I always modify the source code and I don’t want multiple changes in every game. Sometimes I add new scene objects, which requires recompiling the TGB Editor. Sometimes I modify base behavior (for example, how a t2dStaticSprite works) which I definitely don’t want everywhere. Keeping everything in its own directory will keep you from contaminating your other projects.

Go into FillBattle/tgb and open main.cs. Right at the top is a line “setCompanyAndProject”. Change “TorqueGameBuilder” to “TGBFillBattle”. This will prevent other versions of the TGB Editor from interfering with this version in your %APPDATA% directory.

Build Your Scene

In that same directory, run “TorqueGameBuilder.exe”.

Select “Create”.

Setup your new project with the following settings. Of course, change “Location:” to your location’s “games” directory. Ensure “Copy Game Executable to Game Path” is checked.

Close the RSS window. You should now see the following.

Right click on the next two links and save them to FillBattle/games/FillBattle/game/data/images.

SixColors.png SquareBorders.png

Click on the “Create a New ImageMap” button. Browse to the images directory, select both images, and hit “Open”.

Your “Static Sprites” area will now look like this:

The first image represents the 6 colors that our board will be filled with. The second image represents territory borders. When developing a game, you probably wouldn’t know that you needed the second image until you were in the middle, but we’ve added it here for simplicity.

Double-click on the SixColors image. Edit the values to turn this into a multi-frame sprite sheet.

Finally, hit “Save”.

Double-click on the SquareBorders image. Edit the values to turn this into a multi-frame sprite sheet.

Open “Tilemaps” and drag out a new layer into the scene.

Now’s a good time to save. Click on “File > Save”. Make sure you are in “FillBattle\games\FillBattle\game\data\levels” and save the levels as “Board.t2d”. It will then ask to save the layer. Make sure you are in “FillBattle\games\FillBattle\game\data\tilemaps” and save the layer as “Board.lyr”.

Edit the layer with the following values:

Make sure to save! (And save frequently! I may not tell you.)

Build Your Scripts

Let’s start scripting the game!

Open up FillBattle/games/FillBattle/game/gameScripts/game.cs. (NOTE: Except where explicitly mentioned, all directories will be assumed to be under FillBattle/games/FillBattle. For example, in the future, I’ll simply mention game/gameScripts/game.cs.)

At the end of the file, insert the following TorqueScript.

function TileBoard::randomFill( %this )
{
  // Get the size of the TileBoard.
  %width = TileBoard.getTileCountX();
  %height = TileBoard.getTileCountY();
  
  // Iterate over all of the tiles.
  for( %x = 0; %x < %width; %x++ )
  {
    for( %y = 0; %y < %height; %y++ )
    {
      // Pick a random number from 0 to 5 (inclusive).
      // This will equal the frame number on the SixColors sprite sheet.
      %randomColor = getRandom( 0, 5 );
      
      // Assign the current tile to use the SixColors sprite sheet and
      // use the frame that we randomly picked.
      TileBoard.setStaticTile( %x, %y, SixColorsImageMap, %randomColor );
    }
  }
}

Right at the end of the startGame function, we want to call this function. Modify it to look like this:

function startGame(%level)
{
   Canvas.setContent(mainScreenGui);
   Canvas.setCursor(DefaultCursor);
   
   new ActionMap(moveMap);   
   moveMap.push();
   
   $enableDirectInput = true;
   activateDirectInput();
   enableJoystick();
   
   sceneWindow2D.loadLevel(%level);
   
   TileBoard.randomFill();
}

(Skip this paragraph if you are familiar with TorqueScript.) Remember when we game the TileLayer the name “TileBoard”? Giving an object a name makes it a unique object within the whole scripting system. There can only ever be the one “TileBoard” (in fact, never give something else the same name). We then wrote a function for that specific layer called “randomFill”. The parameter “%this” is equal to the object called “TileBoard”, so we can use either one (for example, “TileBoard.getTileCountX()” could have been “%this.getTileCountX()”). That function, “randomFill”, gets called right after we load this scene.

Run the game. You can either go to the FillBattle and double-click “FillBattle.exe” or you can hit the “Play” button on the icon bar of the Torque Game Builder Editor (see below to see what it looks like). Also, if you are using Torsion, you can hit it’s play button. (In the future, I’m just going to say “Run the game.” Choose your method.)

You’ll see something like this:

Complete!

Return to the Fill Battle Home!