1 - checkers tutorial - starting out

8/3/2019 1 - Checkers Tutorial - Starting Out

1/14

Torque Game Builder Checkers Tutorial - Part 1

Introduction

Welcome to the TGB Checkers Tutorial. You may havealready seen the Checkers Demo. A lot of work went into it,especially the networking aspects of it. This tutorial will stepyou through creating a basic framework for a networkedcheckers game.

I hope you enjoy it and learn a great deal while progressingthrough it. We will cover a lot of the theory behind TGBnetworking and then get into the nitty gritty of coding all theturn based networking functions that call back and forthbetween the server and client. By the end of this tutorial youwill have a working framework of a checkers game that canwork over the network. You will also have the framework of

turn based networking that can be applied to almost anygame.

Feel free to take this tutorial and expand upon it. I wouldlove to see the results and further modifications done to thison the boards and on the GarageGames website.

Important Note To test our simulated networkenvironment you will need to run the game, as it grows, on a second PC (a laptop or anythingelse that will run TGB will work just fine) on the same network to test this.

1 of 14Revision 3.0


2/14


Starting Out

1.1 Create our new game project

Our first step is to create a new project for our checkers tutorial game.Open up TGB by running the T2D.exe. You should now be presentedwith the TGB Level Builder. Click the File->New Project... dropdownmenu in the top left of the screen to create a new project (as shown in

Figure 1.1.1). You should bepresented with a dialog askingwhat to name your new project.Type in MyCheckersDemo andthen click Create (as shown inFigure 1.1.2). After clicking the

Create button you should bepresented with an entirely emptylevel and project (as shown inFigure 1.1.3).

2 of 14Revision 3.0

Figure 1.1.1

Figure 1.1.2

Figure 1.1.3


3/14


1.2 Bring in our checker images

Now that we have our new project, we need to bring in all the proper images that we will be usingduring this tutorial. Fortuantely, this step is fairly simple since all of our images are alreadygathered into a resource in TGB. Resources allow us to link a set of images to as manyprojects as we want, this makes the importing of images extremely easy as well as allowing us toreference the same set of images in multiple projects, which cuts down on file size and definitelymakes the updating process a lot quicker.

To import our resource, click the Project->Resources... dropdown menu. You should bepresented with two lists. The list on the left is all of the available resources that we don't havelinked into our project, while the list on the right lists all of the resources currently linked into ourproject (none). Select the checkersArt resource in the left list (as shown in Figure 1.2.1) andclick the Add To Project button (as shown in Figure 1.2.2). Now you should see the checkersArtresource listed in the right list. Click the Save button to finish the process (as shown in Figure1.2.3). Now your object library in the right pane should be populated with checkers art (as shownin Figure 1.2.4). With a couple clicks we've imported all the art needed for our checkers!

3 of 14Revision 3.0

Figure 1.2.1

Figure 1.2.2

Figure 1.2.3

Figure 1.2.4


4/14


1.3 Setting up our checkerboard

Now that we have our images, we can set up the checkerboard. Before we begin the process ofsetting up our checkerboard, we change a few settings in our camera. The camera isrepresented by a dark blue box that you should see in your level (as shown in Figure 1.3.1).

There are two ways to configure the camera size, we can click the camera tool icon and visuallyresize it, or we can specify the width and height manually as values. In our case we want to setour camera to a specific width and height, so we are going to type the values in manually. To dothis, we need to click the Project tab in the right panel and then click the t2dSceneGraph objectin the Object Tree view (as shown in Figure 1.3.2). Now you have the t2dSceneGraph selected,click the Edit tab and then change the camera width to 800 and the height to 600 and then pressenter (as shown in Figure 1.3.3).

4 of 14Revision 3.0

Figure 1.3.2

Figure 1.3.1

Figure 1.3.3


5/14


You should see the dark blue box expand, possibly beyond your current view. You may need tozoom out to view our new camera size (as shown in Figure 1.3.4). You can zoom out by eitherusing the scroller if you have a scroll mouse or, if not, you can go to the View dropdown menuand choose an appropriate zoom percentage.

If you remember, the previous width and height was 100 and 75. In Torque Game Builder theactual size numbers are relative. What this means is you can set it to 4 and 3 if you wanted, or4000 and 3000. We changed ours to 800 and 600 so we can get a better idea of our image andscreen resolution in comparisson to our images and values. TGB maintains its word sizingdespite the screen resolution of the computer playing a TGB game, which as you can imagine is

a very good thing.

Now we can drop our checkerboard image into the Level Builder. Click your Create tab anddrag the checkerboard image over into your level and drop it (as shown in Figure 1.3.5).

5 of 14Revision 3.0

Figure 1.3.5a

Figure 1.3.4

Figure 1.3.5b


6/14


As you can see, when you drop your checkerboard image in, it will be a decent amount largerthan your camera. We can now size it down to fit just inside our camera limits, though we willneed to zoom out a bit more to be able to click on a corner. What we are going to do is a uniformscale. To do a uniform scale, we need to hold the shiftkey before we click on one of the corner

sizing handles. Then we can click and drag the corners, while holding shift, to uniformly size thecheckerboard just within the limits of the camera (as shown in Figure 1.3.6).

Now that we have our checkerboard image at a manageable size, withinour camera, we can proceed to creating the other part of our

checkerboard. This image will serve as the visual aspect of ourcheckerboard, though the logical aspect, what the game will actually useis a Tile Map. To create our tile map we need to load up the Tile MapBuilder. Click on the Project->Tile Map Builder... dropdown menu tolaunch the editor (as shown in Figure 1.3.7). You should then bepresented with the Tile Map Builder (as shown in Figure 1.3.8).

6 of 14Revision 3.0

Figure 1.3.6

Figure 1.3.8

Figure 1.3.7


7/14


All we need to do is create the properly sized TileLayerand leave it empty. This will serve as thepositions our checker pieces will be set to on ourboard. Click Layers->Add Layer... (as shown inFigure 1.3.9) and you should be presented with a

dialog. Set the tile count width and height both to8. Then set the tile size width and height both to64. This will create a layer that is 512 x 512 (8 x64) and should fit within our 800 x 600 size nicely

(as shown in Figure 1.3.10). Click create to finalize our layer creation.Now a single tile should almost fill your screen (as shown in Figure1.3.11). To fix this, click on the View->Zoom x0.1 dropdown menu.Now you should see things a bit better (as shown in Figure 1.3.12).You can also use the arrow keys to move your camera around.

With our 8 by 8 Tile Layer created, all we need to do is saveour layer. Click the File->Save Tile Layer... dropdown menu(as shown in Figure 1.3.13) and you should be presented with asave file dialog. The file browser should already be defaulted toMyCheckersDemo/data/tilemaps so just type in the name ofcheckerBoard and click the SaveFile button (as shown in Figure1.3.14). You should be promptedwith an OK box saying that the savehas been done, just click the OKbutton (as shown in Figure 1.3.15).

7 of 14Revision 3.0

Figure 1.3.13

Figure 1.3.11 Figure 1.3.12

Figure 1.3.15

Figure 1.3.14

Figure 1.3.10

Figure 1.3.9


8/14


Now that we're done with the Tile Layer creation in the Tile Map Builder, we can exit back to theLevel Builder by going to the File->Quit dropdown menu. You should be presented with yourlevel again, with a checkerboard image in your level. Make sure you have the Create tabselected in the right panel and scroll down until you find the Tile Maps section. Here you should

now see one Tile Map, though it will be solid gray since we didn't set any images on it (as shownin Figure 1.3.15). Drag and drop it into the center of you checkerboard (as shown in Figure1.3.16). Our tile layer is invisible so all we can see is the selection border.

Now that we have our visual checkerboard, as well asour logical checkerboard (the tile layer), we need to fitour logical checkerboard over all of the checkerpieces.

Since we saw the grid in the Tile Map Builder, we knowthat the tile layer is divided into 8 x 8 even checker slots,just like our visual board, so we need to make sure theyline up. As you can see, our tile layer isn't quite largeenough to encompass the combined images of ouractual square checkerboard. We will need to resize our visual checkerboard image and thenmove our tile layer over the entire checker box area. Select your checkerboard image and thenclick the Edit tab. Find the Size parameters and change the width to 740 and the height to555 (as shown in Figure 1.3.17).

The new image size should be just right to put ourtile layer inside the checker box area. You shouldbe able to move your mouse to where you left thetile layer and see a gray outline form when youhover over it, click that area to re-select the tilelayer. Move it so it f its just inside thecheckerboard image frame (as shown in Figure1.3.18).

Now we are done with setting up our board! Wehave our image for the board as well as the logicaltile layer component for the board.

8 of 14Revision 3.0

Figure 1.3.15

Figure 1.3.17

Figure 1.3.18

Figure 1.3.16


9/14


Our final step is to save off our level so we can load this back up when we are ready to integratethe rest of our game into the Level Builder. To do that click the File->Save As... dropdownmenu (as shown in Figure 1.3.19). This should present you with a save file dialog with a filebrowser. It should already default to the proper directory (MyCheckersDemo/data/levels) so justtype in checkerboard as the level name and then click the Save File button to finish saving

your level (as shown in Figure 1.3.20).

Now we are f inished with setting up our checkerboard and are f inished with the Level Builder forthe moment.

9 of 14Revision 3.0

Figure 1.3.19

Figure 1.3.20


10/14


1.4 Scripts and structure for networking

The biggest difference between this checkers game and any other demo game is the turn based

networking aspects. To accomplish the networking we need to set up some additional script andfolder structure.

We will begin our structure in the MyCheckersDemo/gameScripts folder. We will basically havethree categories of scripts. First we will have universal scripts. These scripts are put directly intothe gameScripts folder and will be used both from client and server machines. Then we willhave a server folder under the gameScripts which will contain all server only scripts. Finallywe will have a client folder under the gameScripts folder which will contain all of the client onlyscripts.

One thing to keep in mind is the structure of how the turn based networking works. I will use afew terms in explaining this, and I will try and explain what these terms mean in the context ofnetworking. First we have our clients. These are the two game instances running that will

represent each player. Since checkers is a two player game we won't be worrying about morethan two clients. One of these client's will also run as a server. This is why we need thedistinction between client script files and server script files.

The process works as follows: the first client will start a server and the second client will join thefirst client's server. This means that the second client should never run any of the server scripts.This also means that the first client will be running both server and client scripts, which isdefinitely a concern we need to keep in mind when scripting, because we don't want toaccidentally overlap functions and variables. You will notice I append server to functions thatspecifically run on the server and client to functions that specifically run on the client, oftenthese functions will have both a client and server version.

What that system also entails is that even though the first client will in truth be the server, it won'tprocess (hardly) anything differently. It will take commands just like the client that is not theserver. Torque handles this nicely and it provides for a very efficient networked game.

Right now you should have a proper server folder like MyCheckersDemo/gameScripts/serveralong with a proper client folder like MyCheckersDemo/gameScripts/client. Now we will createsome basic script files in these folders, that way we will have a rough idea of our structure andcan start filling in the files properly.

1.5 Creating our scripts

We will start with our base gameScripts directory and create two helpful scripts, one calledexec.cs and another called onStartUp.cs. To create a script file all you have to do is create a

normal text file and save it with a .cs extension. You can use wordpad/notepad on Windowsand TextEdit on Mac. To include additional script files into our game we must make a certaintype of include statement. In Torque Script we call this an exec statement. So the exec script filewill hold all of our exec() calls in an easy to add/edit location. The onStartUp script file will holdan onStartUp() function that we will trigger to be called, well as you probably can guess, on startup.

After creating these two script files, we now need to exec them. So open your game.cs and youshould see this function.

10 of 14Revision 3.0


11/14


function startGame(%level){

// Set The GUI.Canvas.setContent(mainScreenGui);

Canvas.setCursor(DefaultCursor);

moveMap.push();if( isFile( %level ) || isFile( %level @ ".dso"))

sceneWindow2D.loadLevel(%level);}

We will add these two exec statements to the beginning of this function, before theCanvas.setContent() call.

exec("./exec.cs");exec("./onStartUp.cs");

Now your function should look like this.

function startGame(%level){

exec("./exec.cs");exec("./onStartUp.cs");

// Set The GUI.Canvas.setContent(mainScreenGui);Canvas.setCursor(DefaultCursor);


sceneWindow2D.loadLevel(%level);}

Code Sample 1.5.1

Our exec.cs and onStartUp.cs should now be loaded properly. Open up your onStartUp.cs andadd this function to it. Right now it is empty but we will be adding more to it.

function onStartUp(){

}

Code Sample 1.5.2



12/14


Now go back to game.cs and add the call to onStartUp() to the end of the startGame() function,like this.

function startGame(%level)

{exec("./exec.cs");exec("./onStartUp.cs");

// Set The GUI.Canvas.setContent(mainScreenGui);Canvas.setCursor(DefaultCursor);


sceneWindow2D.loadLevel(%level);

onStartUp();

}Code Sample 1.5.3

As of now we should have our exec.cs and onStartUp.cs load properly as well as the onStartUp()function being called when everything starts up.

Now that we have our base scripts ready lets add the additional scripts we will need in the samebase gameScripts folder, as well as the server and client folders.

Create two more script files in our base gameScripts folder called checkerboard.cs andmouse.cs for the other. Be sure to add these lines to your exec.cs as well.

exec(./checkerboard.cs);exec(./mouse.cs);

Code Sample 1.5.4

The checkerBoard.cs script file is where we will have the universal checkerboard setup andfunctions, while the mouse.cs will hold the mouse callbacks. Now we can start creating ourserver and client scripts. Create the following script files in the server folder under gameScripts:

initServer.cs serverCheckers.cs serverCommands.cs

The initServer.cs will contain what you can probably guess, all server initialization calls. The

serverCheckers.cs will contain the meat of the server side checker game, while theserverCommands.cs will contain all of the client-called server commands.

We will set up our client folder very similar, like this:

initClient.cs clientCheckers.cs clientCommands.cs



13/14


As you can see, the client structure is almost identical to the server structure. This will help uskeep our game logic organized, especially while dealing with the new networking factor.

Our next step is to exec() these six files in our exec.cs, so add these lines to your exec.cs.

exec("./server/initServer.cs");exec("./server/serverCheckers.cs");exec("./server/serverCommands.cs");

exec("./client/initClient.cs");exec("./client/clientCheckers.cs");exec("./client/clientCommands.cs");

Code Sample 1.5.5

Ok, now our script framework has been created, we just need to fill these scripts in now.

1.6 Initializing values

One of the first things we usually need to do with any sort of game, and even more so with anetworked game, is initialize some values. Normally these are values or containers usedthroughout our game. In a networked game (even a turn based networked game) we will initalizea few values that will serve to represent more complex values but will only hold simple numbers.This means that we can pass a simple number back and forth over the network, but on client andserver these values will be related to a more meaningful name (this all adds to networkefficiency). To do this add the following lines to your onStartUp() in your onStartUp.cs.

$mainScreen = mainScreenGui;

$mouseObj = new t2dSceneObject() {sceneGraph = $checkersScene; };// initialize the values for the checker boards$none = 0;$red = 1;$blue = 2;$redKing = 3;$blueKing = 4;

// some helpful values$true = 1;$false = 0;

$no = 0;$yes = 1;

Code Sample 1.6.1



14/14


We create a few different values here. First we store the mainScreenGui in a global variablecalled $mainScreen. This often is good practice allowing you to change out GUIs very easily.Imagine if you reference mainScreenGui in roughly 20-30 different places and then you decidelater to change out that control, you would have to change each of the 20-30 references. Thisway we can simply reference the global variable and change it out at any time with a single

change.

We then create a sceneObject stored in $mouseObj. You might have already guess that this willbe an object that is positioned wherever the mouse goes, this will be utilized in the moving of ourpieces.

Our next set of values set numerical data to represent none, red, blue, redKing, and blueKing.These are values that will be passed back and forth between client and server and will representthe data storing of the board setup, this way when we pass a value to the server for these it willbe passing a single number though it still can be referenced with these full names as variables inscript for us to more easily read and remember.

Our last two sets of variables are other helpful values that will be needed to be passed from

server to client and through storing them in variables we can make better sense in our code.


1 - checkers tutorial - starting out

Documents