Now that we've spent some time going over the basics of the GUI Editor and have created a command button, we will create a brand new dialog for the users of your game to interact with. Then, in the section after this, we'll attach both the button we made above and the dialog we are about to make together to show you how these two separate GUI's come together to create a user interface.

To begin, open the GUI Editor and click on the File option on the menubar at the top, as shown in Figure 27. In the dialog window that appears type "HelloWorld" in the GUI Name field and click the Create button, as shown in Figure 28. After doing so, you'll be presented with a new GUI editing screen, as in Figure 29.

Figure 27

Figure 28

Figure 29

You now have a blank screen to work with. The first thing to do is 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, as shown in Figure 30.

Figure 30

When the new control appears, drag and size it, so that it looks similar to the control in Figure 31. Find the text field in the Inspector Dialog and type in "Hello World" (no quotes). Next, find the field called closeCommand near the bottom of the Inspector Dialog and enter "Canvas.popDialog(HelloWorld);" (no quotes). Now click Apply.

Figure 31

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. See Figure 32.

Figure 32

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 "Hello World". Click Apply. See Figure 33 for details.

Figure 33

Before we continue to the next section, you should 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 "HelloWorld.gui" (no quotes). Also change the directory to "starter.fps/client/ui" at the top, and click Save. All this is shown in Figure 34.

Figure 34

Now that your new GUI is saved, we'll switch back to the MainMenuGui. Click the middle button near the top of the GUI Editor and select MainMenuGui from the drop down list, as in Figure 35.

Figure 35

At this point, you should exit the GUI Editor by hitting F10, and then close down the Torque Demo Application.