IMPORTANT NOTE: Hi and thanks for visiting. If you try it out and find a error, please let me know. I would like to think that most of the problems have been ironed out before I post it as a resource at GarageGames.com. You can e-mail me here. Please include the subject Torque Tutorial - Player Previewer in your message. I will most likely update the info as people try it out and make suggestions. So please check back from time-to-time. If you'd like to see a few more tutorials, you can go to my Games Blog as well.
OVERVIEW
In one of my Torque tutorials, I wanted my user to select a players such as an Orc or a Human so they can enter the game as per their selection. It was a very simple approach and had no preview attached to it. For this tutorial, I want to share how I went about adding a preview to the player selection. Below is what this tutorial will show you how to do:
The first method was very simple in comparison to this version. It used a drop down menu so the user can choose the avatar they wanted to make. Another method involves adding bitmaps into your selection screen versus a pop up menu so your user can see what the player looks like. You can render a picture of your character inside your 3D program or a screen capture. Although, the screen capture might not have the exact pose you want, the user will at least see what the payer looks like.
This version uses the .dts file for the preview and allows you to mount weapons and also dynamically manipulate views on the character with your mouse.
This tutorial has three parts. Each part paves the way to the final build of the player and weapons previewer. Here they are:
PART 2 - A QUICK GUI WITH guiOjbectView After successfully installing the guiObjectView, we take it for a small test drive. Make sure it works.
PART 3 - PUTTING THE PLAYER AND WEAPONS PREVIEWER TOGETHER
This last part sews up all the things learned and shows you how to put together the player previewer. You also get to see my kludge scripting. I will need to get back to this in order to update it. So check back again.
RESOURCES FOR LIVE PLAYER PREVIEW USING THE GUIOBJECTVIEW
This next part explains where I got the bits and pieces for this tutorial. At this time, you can just download the support files.
This method of selection is much tidier vs. the first method. It shows not only the selection but an actual preview of the character as it would appear in the game. It's basically a .dts preview. In order to do this we will need to update the TGE with some additional code. There is a tutorial that shows how to add a preview. Have a look at it as it might just be what you're looking for. Our approach will be a little different. Here's the link to this GG resource that I'm talking about: http://www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=9339
So that's what I know about guiObjectView. There are two versions. The original by Vinci_Smurf and Loonatik and the one extended by Xavier. For this tutorial, we're going to use Xavier's version since it allows you to mount objects on top of each other. This could be handy :)
PART 1 - HOW TO INSTALL guiOjbectView RESOURCE FILES (VERY IMPORTANT - DO THIS FIRST)
Ok, before we begin. Remember that we need to update TGE with some code. Namely, we need to add the guiObjectViewMount code. Updating TGE with additional code was not easy for me since I am a total C++ noob. I come from the land of VB6 (ouch I hear the hecklers already) and as such I have to rely a free compiler. At this time, I will be using TBE. TBE stands for The Torque Build Environment. It uses Eclipse, MinGW, and Msys so you can compile TGE. We would need to recompile TGE so we can take advantage of guiObjectViewMount.
If you haven't already done so, make sure you do a full install of the TBE. Make sure your TGE is installed first in the default install location in c:\Torque\SDK as TBE relies on this tidbit of info. When the installation is done, there should be a directory named TBE in your C drive. Inside it you'll find the Eclipse folder. You will also need the Java Runtime Environment (JRE) v. 1.4 or later. The setup instructions will tell you more. It is important you read it before installing.
Ready to Recompile TGE
When you have finished the installation of TBE you are then ready to recompile TGE. When you launch Eclipse you will see that there is a Torque project ready and waiting there for you. So here's what we need to do:
1. From your desktop files, find and copy the guiObjectView.cc and the guiObjectView.h files into your Torque folder. As a reminder, make sure that you use the guiObjectView that was updated by Xavier. The exact location is C:\Torque\SDK\engine\gui, you will see other gui files there as well.
2. Coming up next is the part that had me spend tons of hours wondering why the guiObjectView would not compile. It will take you about 3 minutes to find out. Go to Eclipse and navigate your way to the engine folder. You will see near the bottom targets.torque.mk. You will need to add guiObjectView as a target in that file. Open up the targets.torque.mk file and add gui/guiObjectView.cc in the file listing. Then save. Below is a picture of what it looks like relative to the rest of the other files:
Above: This is a critical step. Making sure that the guiObjectView is in the targets.torque.mk list. Otherwise it will not compile.
This tells the compiler to add the guiObjectView when recompiling TGE. If you don't do this very important step, the compiler will NOT know to add the guiObjectView. When I was milling about with Eclipse on the GarageGames forums, I seem to remember there was a resource or comment that showed to set up Eclipse so that it automatically would include any additional resources added to the TGE. Alas, I don't know where it is. If you know what I'm talking about, please e-mail me with the link location. I will add it to this tutorial as a resource.
3. Right mouse click the Torque project at the very top and select Rebuild Project. It should start its work.
Once you've confirmed it has been compiled then we can call it from Torque script.
SIDE NOTE: One way to find out if the guiObjectView has been included in TGE is to launch a game and switch to gui edit mode. You can then see if it is listed in the controls listing. If it is, then it compiled.
The next part will have us test out the newly installed guiObjectView.
PART 2 - A QUICK GUI WITH guiOjbectView
We want to test out guiObjectView by displaying a player in the main menu screen using the demo .cs and .gui files from Vinci_Smurf and Loonatik and the extended guiObjectView file from Xavier "eXoDuS" Amado . This tutorial is based on the one provided by the original makers of guiObjectView but it has more pictures and is more verbose for easy understanding. I think it's important to do this quick tutorial you get a sense of what we're about to do. The last tutorial has several variables involved with it and it helps to know what's what using a simpler version.
BEFORE YOU BEGIN
Backing up is your friend. So do the following before you begin:
1.Go to your C:\Torque\SDK\example directory and make a copy of the starter.fps directory. We do not want to work with an original so we make a copy.
2. Rename the newly copied folder to fps-guiObjectViewTest.This will be the working directory for this part of the tutorial.
3. Open up your main.cs file located in C:\Torque\SDK\example and on or about line 6 you will see this bit of script:
$defaultGame = "starter.fps";
The above script tells the Torque exe file to run the game inside the starter.fps directory. We need to change that to:
$defaultGame = "fps-guiObjectViewTest";
The above script will now run the game, that we will modify, contained in the fps-guiObjectViewTest directory.
LET'S GET OUR FEET WET
In the download are sample files from Vinci_Smurf and Loonatik. We will be using those files to get a feel of how the guiObjectView works. For this tutorial, my directory structure is C:\Torque\SDK\example\fps-guiObjectViewTest\. I have used the default TGE install and as noted earlier, all we really have done so far is copy and rename the starter.fps directory and then pointed the Torque .exe file to play whatever is in the newly created and renamed directory. What we want to do now is work with the following files:
1. init.cs (located in C:\Torque\SDK\example\fps-guiObjectViewTest\client) - this file loads the different .cs files using the exec(filename) function.
For this file we want to add around line 86 the following:
// Load Example objectView
exec("./ui/objectViewExample.gui");
exec("./scripts/objectViewExample.cs");
The above scripts load the files needed to:
a) Show the screen showing the preview, this is done in the objectViewExample.gui file.
b) Load the preview file. In this example, we will use the Orc that came with TGE 3.1. To be specific, it's the .dts file we are most interested in. This is done in the objectViewExample.cs file.
Make sure you put the file objectViewExample.gui in the following directory:
C:\Torque\SDK\example\fps-guiObjectViewTest\client\ui
IMPORTANT: The objectViewExample.gui needs to be modified. The reason for this relates to the parameters for the mountOjbect method being used. Remember that in the original guiObjectView, it had five parameters. In the one by Xavier, it now has six to allow for mounting on top of other mounts. Xavier added a parentName parameter so that the mounted object would know who its parent was. This paved the way for all kinds of mounting to be had. We also need to change the weapon, as we are using the ones that came with TGE 1.3.
And you need to place objectViewExample.cs in the following directory:
C:\Torque\SDK\example\fps-guiObjectViewTest\client\scripts
We need to change some scripts in this file to reflect the location of your player file. This file starts up the initial animation. Here's the script:
//-----------------------------------------------------------------------------
// Torque Game Engine
//
// Copyright (c) 2001 GarageGames.Com
// Portions Copyright (c) 2001 by Sierra Online, Inc.
//-----------------------------------------------------------------------------
//------------------------------------------------------------------------------
function objectViewExample::onAdd(%this)
{
}
//------------------------------------------------------------------------------
function objectViewExample::onWake(%this)
{
// Set main object
view.setObject("player", "fps-guiObjectViewTest/data/shapes/player/player.dts", "", 0);
// Set animation
view.setSequence("player", "Root", 1);
}
//------------------------------------------------------------------------------
function objectViewExample::onSleep(%this)
{
view.setEmpty();
}
2. mainMenuGui (located in C:\Torque\SDK\example\fps-guiObjectViewTest\client\ui) - this file is the main screen that we see. You know, the one that has the screaming Orc pic. Since it creeps me out at night, I've taken it out. You can change the background by replacing the background.jpg file found in C:\Torque\SDK\example\fps-guiObjectViewTest\client\ui. Anyway, for this screen, we will be adding a guiButtonCtrl() so when the user clicks on it, it will show our simple preview window.
Here's the code that you want to insert, on or about line 86, or just after the last bit of buttons on the mainmenu screen:
THE REVISED objectViewExample.gui FILE
This is the updated/revised version for this file. The script written takes into account the sixth parameter.This one uses TGE 1.3 as the point of reference. We are using the Orc as the player model and the crossbow as the weapon of choice. This gui gives the ability to mount the crossbow weapon.
In the next part of this tutorial, we take a look at rolling up the onwake function along with the gui. You will also see my unfinished code for the player previewer. It's a kludge, but I figure I will post this tutorial this week to get things rolling.
PART 3 - PUTTING THE PLAYER AND WEAPONS PREVIEWER TOGETHER
Using what we've learned about the guiObjectView resource, we will now make a player selection and weapon previewer. The idea is is to be able to show the player and weapons that we can be used by the user. For example, if the user chose the Orc, they can then mount the crossbow or whichever weapon they wanted to use. To help me visualize this, I drew up a simple graphic so I can keep referring to it while I was scripting. Here's my initial plan. As usual, it changed a bit from my original idea.
Above: My concept plan for this player and weapon previewer.
To begin, you should be using the starter.fps files that came with TGE 1.3. The other files mentioned in this tutorial is provided in the download.
One thing I can say about working with TGE is the importance of knowing where your files are located. Sometimes just having the wrong location of a file will inhibit things from working properly. So what we will do first is set up our directories.
For this part of the tutorial, my absolute directory location for the files is:
C:\Torque\SDK\example\JamesFPSTest-PlayerAndWeaponPreviewer1. To be sure, you can have just about any directory name, as long as the starter.fps file structure is kept.
When I am learning something, I like to keep things verbose. In this case, you can tell by the name of my directory that it has something to do with previewing. Ya think? Ok, in the next part we actually do something.
FAMOUS PLAYAHS
We will be using 4 different players for to choose from. They are:
1. The Orc - This file comes with the starter.fps files included with TGE.
2. Thom - A famous Animation Master character. Same status as the Orc but in this case for a 3D product.
3. Female - This one was from Cubix Studio.
4. Male - This one is also from Cubix Studio which I purchased for my own testing. You will notice that both the male and female models are tiny compared to the burling Orc and the colossal Thom. At this point, I'm just glad I got them all together for this tutorial.
Above: The orc, male, female, and...hey where's Thom? In the next tutorial
we'll get the gang
together into a nice FPS bash by sewing up the first tutorial with this tutorial.
And finally, we need some weapons to choose from. We will be supplying any one of two weapons. They are:
1. Crossbow - This file comes with the starter.fps files included with TGE.
2. AK47 - This one was purchased as part of a weapons pack.
WHERE STUFF GOES
So the first thing we do is to take the folders that contain these respective files and then place them in the shapes directory. In my case it would be located at:
C:\Torque\SDK\example\JamesFPSTest-PlayerAndWeaponPreviewer1\starter.fps\data\shapes
Since the crossbow and the Orc (contained in the folder named Player) are already part of the starter.fps files, we only really need to copy the following folders to the shapes directory (~starter.fps\data\shapes).:
1. cubixfemale
2. cubixmale
3. AK47
SCRIPTING THE PREVIEWER
Once we have this set up, we can then start working with some .cs files.
There are three files that we need to work with that are included in the download. Let's start with the files that were included in the starter.fps folder. They are:
1. init.cs (located in starter.fps\client\) - This file loads other cs files and gets thing going. We will need to add two lines of script in there.
2. mainMenuGui.gui (located in starter.fps\client\ui) - This is the main menu screen. We will be adding a preview button on this interface. When the user clicks the button, the previewer with pop up.
3. jtPlayerPreviewer2.gui - This is the gui that will allow the user to choose their avatar for the game. I also rolled up the the onWake function into this file so it will play the preview file immediately. You have to place this file in starter.fps\client\ui. The jtPlayerPreviewer2.gui file will be called by the init.cs file.
PUTTING IT ALL TOGETHER init.cs
Just after the client scripts block of exec and on or about line 85, add the following script:
//jtmod
exec("./ui/jtPlayerPreviewer2.gui");
mainMenuGui.gui
For this one, we just need a way to make the previewer pop up. So copy and paste the script below and place it at the end of the file within the last curly brace on or about line 86:
For the jtPlayerPreviewer2.gui, as long as you've placed it into the starter.fps\client\ui and the avatars are in their respective folders, then we should be good to go. I've provided the jtPlayerPreviewer2.gui for you to take a look at. It is a bit of a kludge as I am super busy with projects at this time, that my chimpy brain can only come up with what you have there. Please hack away at it and see if you can improve it. Then share it with the group.
Here's the script for jtPlayerPreviewer2.gui (be sure to wear a helmet for this one):
//********************************************************************
//This loads the Orc animation when this gui loads
//------------------------------------------------------------------------------
function jtPlayerPreviewer2::onWake(%this)
{
OrcAnimation();
}
//------------------------------------------------------------------------------
function jtPlayerPreviewer2::onSleep(%this)
{
viewOrc.setEmpty();
}
//This function gets the value of the selected animation
//it will then be used in the weapons choice functions
//so the game knows which weapon goes with what player
function whosOnTheRun(%viewValue){
As you can see the script is very verbose and in many parts, it is redundant. The logic is there, but certainly this code should be optimized. When I get more time, I will revisit this bit. For now, this will have to do.
This tutorial goes nicely with my first one as the original shows how to capture the user's choice of avatar. This is similar, except that it has a better presentation of the avatars. However, it currently is not tied into the game so that you can choose and then play based on what you chose in the previewer.
My next tutorial will tie both together, so you can have a game with different avatars playing.
If you have any comments or suggestions, please let me know. This is an initial draft and I would like to clear out the errors before I post it as an official resource at GarageGames.
