From TorqueWiki

Contents 1 Intro 1.1 Tutorial Links 1.2 Basics 2 Creating the Play-GUI Button 3 Creating A New Dialog 4 Putting It All Together

[edit] Intro

This Tutorial is inspired from GG Tutorial: http://www.garagegames.com/docs/tge/general/ch03.php

We will show how to create a new GUI-Interface and how to acces it via button in the Play-GUI.

[edit] Tutorial Links

http://www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=12846

[edit] Basics

• You can open Torque's GUI Editor by pressing the F10 key.

• Just below the menu bar are three dropdown menus.
  • The first dropdown to the far left will create new GUI controls to place.
  • The second dropdown menu, located in the middle, allows you to switch between previously saved GUI windows/collection of controls.
  • The third dropdown menu, located on the far right, allows you to view and edit your GUI in different resolutions.

• To the far right, there is a pane that contains the GUI Tree View and the Inspector Dialog. The entire right-hand vertical pane is draggable, to allow you to expose more of the working screen or easily read and edit the GUI Tree View and the Inspector Dialog fields.
  • The GUI Tree View displays all the controls for the current screen in a hierarchical list.
  • The Inspector Dialog contains various control options and properties based upon the kind of GUI control you currently have selected. The most common options are the profile - which allows you to further define how a control looks and acts, position, etc. .

[edit] Creating the Play-GUI Button

1. Create a new Bitmap Button control by going to the New Control button and selecting GuiBitmapButtonTextCtrl. Bitmap Buttons are buttons which can use a picture in their background.
2. Click and drag the control towards the center of the screen. You can also move controls around by using the GUI Inspector's position field.
3. Look for the extent field in the Inspector Dialog to the left. Change the space delimited value to "120 30" (width height).
4. Change the 'Name' field to "Select" and click the Apply button. You should now notice in the GUI display that your new control change its label.
5. Click the button marked Profile to show a dropdown list of control profiles. Profiles are essentailly control templates, which further define how a particular control will look and behave. From the Profile dropdown, select GuiButtonProfile.
6. Edit the text field and enter the text "select something" (no quotes) and click Apply.
7. The next step is to make the command button perform an action when we click it. To do so, we will enter a TorqueScript statement into the Command field for our button. In the Inspector Dialog, find the textbox next to the 'Command' label. Enter the following text in it: Canvas.pushDialog(selectGui); (no quotes).
8. Exit the GUI Editor now by hitting F10, you may find that your new control has moved, and is not located in the same place you put it in the GUI Editor. This happens because the control does not have a proper alignment. To fix this, go back into the GUI Editor, select the button you created, and change the vertSizing and horizSizing.
9. Save the edited GUI.

[edit] Creating A New Dialog

To show you how these two separate GUI's come together to create a user interface, we will create a brand new dialog and attach it to the button we made above.

1. Open the GUI Editor and click on the File->NewGUI on the menubar at the top. In the dialog window that appears type "selectGui" in the GUI Name field and click the Create button. You'll be presented with a new GUI editing screen.
2. Create a new GUI control that your user can interact with. Otherwise, we'll end up with all sorts of problems if we push this screen to the canvas and it has no controls. Go over to the New Control button at the top and select the GuiWindowCtrl from the dropdown list.
3. Size the GuiWindowCtrl to (220 180) in the extend field and position it in the center.
4. Find the text field in the Inspector Dialog and type in "Select what you want" (no quotes). Next, find the field called closeCommand near the bottom of the Inspector Dialog and enter "Canvas.popDialog(selectGui);" (no quotes).
5. Now that you've laid out how you want your dialog window control to look, it's time place another control on the window. When we created this window control, it was a part of the canvas. Now, when we create another control, we want it to be a child of our window control, instead of the canvas itself. Making the new control a child of the dialog window we just created will force the new control to move around with window control. To do this, right-click on your window control. When you do this, you'll notice a small yellow line will highlight the outline of your control. This means that the control has the GUI Editor's focus. As long as it has the focus, any new controls we add in the GUI Editor will become a child of the dialog window control, thus inheriting its position, visibility, and other properties.
6. With your window control still in focus, go up to the new control button at the top of the GUI Editor and select GuiTextCtrl from the dropdown menu. Drag and position the new control towards the center of your dialog window. Don't worry about positioning the text control in the exact center of of the dialog, we'll let the GUI Editor do this for us. In the Inspector Dialog, set horizSizing and vertSizing both to "Center". Finally set the text field to read "info and explain ... ".
7. Save your new GUI, so that you can exit the GUI Editor without worrying about losing your work. To save your new control, click on File menu and choose the Save GUI option. In the dialog that appears, type in "selectGUI.gui" (no quotes). Also change the directory to "GameOne/client/ui" at the top, and click Save.
8. Now that your new GUI is saved, we'll switch back to the PlayGui. Click the middle button near the top of the GUI Editor and select PlayGui from the drop down list, exit the GUI Editor by hitting F10, and then close down the Torque Demo Application.

[edit] Putting It All Together

We have to tell the engine that we're using a new GUI element.

• Find and open the file "GameOne/main.cs", look for the function initClient() and add:

 exec("./client/ui/selectGui.gui");

---

Next: Gui Profiles