Editing the GUIs

Editing the GUIs

By default, the game interface is set up to act like Sierra's point-and-click interface of its 1990-93 games. To change the interface (recommended for advanced users only), go to the "GUIs" pane.

The game interface is split up into GUIs. Each GUI is a rectangular region on the screen which is drawn on top of the background scene. Each can be set to either:

be always displayed (for example the Sierra status-line)
pop-up when the mouse moves to a certain position (eg. Sierra icon-bar)
pop-up on script command only

The default interface is made up of two GUIs - the status line, and the icon bar.

In the GUI Editor, you will see several buttons. The "Export GUI" button exports the entire interface (ie. all the GUIs, plus button graphics) to a file, which you can then import later into a different game using "Import GUI". This allows you to design your interface and then use it in all your games.

On the right of the screen the current GUI element is displayed. You will notice that a floating window has appeared. This allows you to edit the various properties of the GUI, and it works something like Visual Basic (tm)'s Properties window. In the Properties window, you can change the background colour of the GUI, set a background picture, and set the location and width/height amongst other things.

The "Visible" property allows you to set when the GUI is displayed. The default is "Normal", which means that the GUI will initially be visible, though you can turn it off with a GUI.Visible=false command in game_start if you need to.

The "Popup modal" option means that the GUI will be initially off and must be turned on by a script command. With this option, the game will be paused while the GUI is displayed, during which time the on_mouse_click and on_key_press functions will not get run.

The "Mouse YPos" option means that the GUI only appears when the mouse vertical position moves above the y-coordinate set with the "Popup-YP" option.

"Persistent" is like "Normal", except that this GUI will not be removed during a cutscene when the setting "GUIs turn off when disabled" is set in the general settings. Useful if you want most of your GUIs to turn off, except a status line or whatever.

The "Z-Order" setting allows you to set which order the GUIs are drawn in - ie. when there are two GUIs that overlap, which is drawn in front. The Z-order setting is an arbitrary number between 0 and 1000. AGS draws the GUIs in order, from the lowest numbered at the back to the highest numbered at the front.

The "Clickable" check box at the top of the screen allows you to set whether the GUI and buttons on it respond to mouse clicks. This is on by default, but if you turn it off and the player clicks on the GUI, the game will actually process the click as if they clicked behind the GUI onto the actual screen. Useful for transparent GUIs which are only used to display information.

You'll notice that the GUIs have names. These can be used in the script in the same way as character names. For example, if a GUI is called "ICONBAR", you can use scripts such as:

if (interface == ICONBAR) ...

GUI buttons
Interface text
Customized Text Windows
Custom inventory
Sliders
Text Boxes
List Boxes

GUI buttons

To provide interactivity with the interface, you use buttons.

To add a button, click the "Add button" button, and then drag a rectangle with the mouse onto the GUI. You will see it displayed as a text button, with the text "New button" on. Notice that the Properties window is now displaying properties for your new button rather than the GUI.

Using the Properties window, you can set a picture for the button instead, and you can also set various other self-explanitory attributes. You set what happens when the player clicks on the button by using the "Left click" attribute. This can be set to "Do nothing" (the default), and also "Set mode", which changes the cursor mode to the mode specified in the "New mode number" property. The other option, "Run script", runs the "interface_click" text script function, passing the GUI number and button number of the clicked button.

To delete a GUI button, select it then press the Delete key on the keyboard.

Interface text

You can easily display static text on interfaces. For example, the Sierra-style interface displays the score in the status bar.

To add text to a GUI, you add a label. Click the "Add label" button, then drag out a rectangle like you did when adding a button. You can change the text displayed in the label by editing the "Text" property. Notice that the text automatically wraps round to fit inside the rectangle you drew.

As well as typing normal text into the label, you can add some special markers which allow the text to change during the game. The following tokens will be replaced with the relevant values in the game:

 @GAMENAME@    The game's name, specified on the Game Settings pane
 @OVERHOTSPOT@ Name of the hotspot which the cursor is over
 @SCORE@       The player's current score
 @SCORETEXT@   The text "Score: X of XX" with the relevant numbers filled in.
 @TOTALSCORE@  The maximum possible score, specified on the Game Settings pane

Example: You have @SCORE@ out of @TOTALSCORE@ points.

The Properties window also allows you to align the text to left, right or centre, as well as change its font and colour.

Customized Text Windows

If you want to add a personal touch to the standard white text-boxes which display all the messages during the game, you can create a border using the GUI Editor. Create a new GUI, and check the "text window" box for it.

The element will be resized to about 1/4 of the screen, and you will see 8 pictures - one in each corner and one on each side. These are the border graphics. You change the graphic for a corner in the normal way.

In the game, the corner graphics will be placed in the respective corners of the text window, and the side graphics will be repeated along the edge of the window. To tell the game to use your custom text window style, go to the General Settings pane, and check the "Text windows use GUI" box. Then, enter the number of the GUI which you used.

You can also set a background picture for the text window. In the GUI editor, simply set a background picture for the GUI element. The graphic you specify will not be tiled or stretched in the game; however, it will be clipped to fit the window. You should use a graphic of at least about 250x80 pixels to make sure that it fills up the whole window.

To set the text colour in the window, simply set the Foreground Colour of the GUI and that will be used to print the message text in.

Custom inventory

Another option you may have noticed in the GUI editor is the Add Inventory button. This allows you to drag out a rectangle which will display the player's current inventory, in the same way as the Lucasarts games did. To make the inventory window scrollable, you will need to add Up and Down arrow buttons, and attach script code to those buttons to use the available functions such as InvWindow.ScrollUp and InvWindow.ScrollDown.

To see a full list of commands available for inventory windows, see the GUI Inv Window Functions and Properties section.

Sliders

You can now add sliders to your GUIs. This allows you to have a nice interface for the player to change settings such as volume and game speed. To add a slider, click the "Add slider" button and drag out its rectangle just like you would for a button. You can also resize it by dragging the bottom- right hand corner out in the same way as a button.

Sliders can be either vertical or horizontal. The direction that it is drawn in is automatic depending on the size that you stretch the slider box to - if it is wider than it is tall you will get a horizontal slider, otherwise you'll get a vertical slider.

For the properties of a slider you can set the minimum, maximum and current values that the slider can have. In the game, the user will be able to drag the handle from MIN to MAX, and the slider will start off set to VALUE. For horizontal sliders, MIN is on the left and MAX on the right, for vertical sliders MAX is at the top and MIN is at the bottom.

Whenever the user moves the handle's position on the slider, interface_click is called with the GUI and object numbers of the slider. This means that if they continually drag the handle up and down, interface_click will get called repeatedly.

Your script can find out the value of the slider using the Slider.Value script property.

Text Boxes

You can now add Text Box controls to your GUI. A text box is a simple device that allows the player to type information into your game. Adding a text box works like adding the other types of control.

If a text box is on a currently displayed GUI, all standard keypresses (ie. letter keys, return and backspace) are diverted to the textbox instead of being passed to the on_key_press function. When the player presses Return in the text box, the interface_click function is called with the text box's GUI and object number. You can then use the TextBox.GetText script function to retrieve what they typed in.

List Boxes

List box controls allow you to add a list of items to your GUI. This could be useful for doing a custom save/load dialog box, allowing the user to choose between various options, and so forth.

You use the ListBox script functions to manipulate the list box - for example, ListBox.AddItem to add an item, or ListBox.SelectedIndex to get the current selection.

interface_click is fired with the listbox GUI/OBJECT ID's when the player clicks on an item in the list. You may wish to ignore this or to do something useful with it.

Browser Based Help. Published by chm2web software.