Download (direct link):
Chapter 16: Gaming with GUIs 293
Force the player to go around to the other side of the map and enter from the other room.
^ Duplicate the GUI on the other side of the room. When doing this, you might need to retarget the duplicate.
^ Add a trigger-multiple brush outside the room to trigger the doors when the player walks up to them.
In the game, your GUI looks great near the door and is ready for action.
For realism, add a structure around the GUI so that it looks like it is housed by something on the wall. Right now, the GUI is just in the middle of the wall. Adding a frame of metal would provide more logic to its existence, just like the light housings above each of your light entities in the rooms.
Creating a Custom Interface
Graphical user interfaces are not unlike map scripts. They are written in the form of functions with different commands. However, rather than calling to entities to do the actions, they call to images because this is a visual medium.
Luckily, there is an editor for building GUIs built right into the game, just like the mapping editor. This editor helps you understand the different parts of code that make up a GUI, but you won’t have to write it all by hand. Instead, you can add and position the different elements of your GUI right on the screen, save them, and then use them in the game.
294 Part IV: Going Beyond the Basics_____________
Starting the GUI editor
To access the GUI editor, start by launching the game. When the game has loaded, open the console, type editguis, and press Enter to launch the editor. When the editor loads, you should see a screen that looks like Figure 16-10.
In the next few pages, I show you how to create your own GUI. This GUI replaces the one now in the map but uses a lot of the elements that the original already has. Hopefully, you’ll be able to carry this knowledge further on your own and be able to create some amazing things for the game.
Building your first GUI
To start a custom GUI, choose FileONew. This opens a darker window on the screen, as shown in Figure 16-11. With this new GUI open in the editor, you’re presented with a canvas and more options that might remind you of Photoshop. In the Navigator window, you can see your first element, called Desktop. If you explore the existing GUIs from the game, you’ll notice that every GUI starts with a Desktop. This Desktop is called the parent because each element that you add to the GUI, be it a colored block, an image, or a line of text, is going to be a subsection (or child) of the Desktop.
Chapter 16: Gaming with GUIs 295
Defining the background
To start off your GUI, select a background color. Here’s how:
1. Open the Desktop properties by double-clicking the Desktop layer in the Navigator window on the right. You can also access these properties by right-clicking the layer and choosing Properties from the popup menu.
You see an Item Properties dialog box pop up. The three tabs in this window are called
• General: These are the basic properties of the element, including the name. In the case of the Desktop, the name should never be changed, but each child element can have any name you desire. These check boxes should remain in their default state.
• Image: Here you can define for this layer a background color, a transparency, a material or texture, a border, or other visual aspects.
• Text: This tab prints text on your layer. Anything you type is displayed, and you can further define how the text looks on the screen.
296 Part IV: Going Beyond the Basics
Define the properties of your Desktop layer, one of which is the background color for your GUI.
2. Click the Image tab. Select the Backcolor check box and open the color drop-down selector by clicking the little down arrow to the right of the color block. Select green as your color and press OK to close the window.
The result should look like Figure 16-12. The smaller color block to the right of the now-green block is reserved for transparency. Ignore that for now.
O* I Cancel
3. Press OK to apply the background color change.
You should now see the color change on your screen.
Now you need to add a child layer to your Desktop. This is going to be an existing image that is already supplied with the game.
1. Right-click the Desktop layer from within the Navigator window and choose NewOwindowDef.
A new layer is added. This layer is now a child of the Desktop, and it’s currently named unnamed.
2. Open the Item Properties dialog box for this new unnamed layer by double-clicking the layer from within the Navigator window. Click the General tab in the Item Properties dialog box and rename it to blue_left, as I have done in Figure 16-13.
Chapter 16: Gaming with GUIs 297
Custom GUI images
If you would rather make your own GUI image, going to use it. In the case of this GUI, size it to
you can. The image is simply a Targa image and 128 x 128 pixels because it's almost never going