Create a new Bitmap Button control by going to the New Control button and selecting GuiBitmapButtonCtrl, as shown in Figure 13. Bitmap Buttons are buttons which can use a picture in their background.

Once you've clicked the GUIBitmapButtonCtrl, you'll see the newly created control in the upper left hand area of the screen. It will be automatically selected for you. Also, the control will be listed in the Inspector Dialog tree, under MainMenuGui. This is because you created the control inside the 'window' that defines the MainMenu. As such, the MainMenuGui is the parent, or container object, of GuiBitmapButtonCtrl. The properties of Parent controls can also effect the properties of controls that are contained within them. For example, if the MainMenuGui's visibility is set to false, all of it's children will be invisible as well. See Figure 14 and 15.

Figure 13

Figure 14

Figure 15

With the newly created control selected, click and drag the control towards the center of the screen as shown in Figure 16. This is one method to move controls around in the GUI Editor. You can also move controls around by using the GUI Inspector's position field (covered below).

Figure 16

With the control still selected, look for the 'extent' field in the Inspector Dialog to the left. Change the space delimited value to "110 20". Now click the Apply button in the Inspector Dialog and watch as your button changes. The first value describes the extent of the control along its width, and the second value describes the extent of the control along its height. You can also use the mouse to grab the control's border for resizing. See Figure 17.

Figure 17

Still in the Inspector Dialog, change the 'Name' field to "My First Button" and click the Apply button. You should now notice in the GUI display that your new control says "My First Button" on its face, as in Figure 18.

Figure 18

Still in the Inspector Dialog, 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. When you apply a Profile to a control, it takes on the properties of the Profile.

From the Profile dropdown, select GuiButtonProfile, as shown in Figure 18. Next, edit the text field by the "Apply" button, and enter the text "MyFirstButton" (no quotes) and click Apply. You will notice in the tree view above that your control is now named MyFirstButton. See Figure 19.

Figure 18

Figure 19

Once you have completed the above steps, it is time to place the new control. Because user interfaces are very important to keep your audience interested, you need to have precise control over the placement of all your GUI controls. We can do this in Torque's GUI Editor by editing the position field in the Inspector Dialog. Change this field to "36 345", see Figure 20. You could also drag the control to the appropriate location and use the ruler to align your button with the rest of the buttons, and then use the Move menu dropdown to nudge the control in a particular direction. Try either method.

Figure 20

At this point, we have created a button, labelled it appropriately, given it an appropriate command button Profile, and placed it where we want it on the screen. 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. If this sounds scary, don't worry; you'll see that this system is very easy to use. In the Inspector Dialog, find the textbox next to the 'Command' label. Enter the following text in it: "Canvas.pushDialog(HelloWorld);" (no quotes). Once you have entered the text, as in Figure 21, click the Apply button.

Figure 21

We're getting close to being done, but there is one final caveat you must take care of before your control is finished. If you 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, as in Figure 22.

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 to "Top", as in Figure 23. Now, click Apply. By changing the vertSizing or horizSizing options you're telling the GUI control to align the control in a particular way. You can experiment with the different alignment options to see the effects they have on controls. The main point to remember though is that if your controls don't render in the proper place when the GUI Editor closes, you need to change the vertSizing and/or horizSizing options, so that the controls are properly aligned to a border. Once you are done setting the alignment, it's time to save the edited GUI.

Figure 22

Figure 23

In order for the changes we've made to the Main Menu to be reloaded upon restarting the Torque Demo Application, you must save the GUI to disk. To do this, click the File at the top of the GUI Editor, and click the Save Gui option, as shown in Figure 24. In the Save File dialog that appears, select the mainMenuGui.gui file from the file list and then click Save, as shown in Figure 25 below.

Figure 24

Figure 25

Your new button should now look the same as Figure 26.

Figure 26

Again, at this point, your button will not actually do anything when you click on it. We have given the button a script command to execute when it is clicked, but the command we entered won't make any sense to Torque until we follow the steps in the next section, Creating a new dialog. Our script command told Torque to open a new dialog control called "HelloWorld", but we have not yet created that dialog. Once we do so, everything will work as planned!