3D Game Programming All in One

By Kenneth C. Finney

Chapter 10

Creating GUI Elements

Creating GUI Elements

• GUI stands for Graphical User Interface

• Players use GUI screens to interact with the game software

• GUIs can display information to players

• GUIs can accept control and data inputs from players

Creating GUI Elements

• Push Buttons

• Radio Buttons

• Edit Boxes

• Check Boxes

• Menus

• Sliders

Creating GUI Elements

• Frames

• Labels

• Backgrounds

Creating GUI Elements

Controls– allow the user to direct what the

program does– mouse-click controls

• push buttons• radio buttons

– keyboard controls• edit boxes

Creating GUI Elements

GuiChunkedBitmapCtrl– display large images– breaks background image into

pieces– usually used for background

images for GUI screens

Creating GUI Elements

GuiControl– Generic control container– Similar to frame container– Gathers together a collection of

controls

Creating GUI Elements

GuiButtonCtrl– Clickable control– Does not retain state information– Used as a command interface

control– Accepts a text label

Creating GUI Elements

GuiCheckBoxCtrl– Saves its current state information

(checked or unchecked)– Analog of a locking push button

switch– Toggles state to opposite condition

when clicked– Accepts a text label

Creating GUI Elements

GuiScrollCtrl– Used to make list displays that

have one or two scroll bars– Vertical scroll bar on right– Horizontal scroll bar on bottom– Appearance of list and scroll bars is

adjustable using properties

Creating GUI Elements

GuiTextListCtrl– Displays 2D arrays of text strings– Cells can be resized– Adjustable columns– Would be used in a GuiScrollCtrl,

for example– Can force duplicate rows to not be

displayed

Creating GUI Elements

GuiTextListCtrl– allows user to manually enter

textual information– contents can be automatically

stuffed into a script variable– built-in history function– built-in password character hiding

Creating GUI Elements

Torque GUI Editor

• Content Editor

• Control Tree

• Control Inspector

• Tool Bar

Creating GUI Elements

Torque GUI Editor

• Content Editor– Add controls– Select controls– Move controls– Resize controls

Creating GUI Elements

Torque GUI Editor

• Control Tree– Lists controls in textual form– Shows controls in context of the

control hierarchy– Can be used to select controls in

the Content Editor

Creating GUI Elements

Torque GUI Editor

• Control Inspector– Displays a control's properties– Allows user to manually change

properties– The Apply button must be pressed

to submit changes

Creating GUI Elements

Torque GUI Editor

• Tool Bar– Create new controls– Align controls– Adjust control spacing– Create and save new GUI files

Creating GUI Elements

Lab: Creating an Interface– Practice using the GUI editor– Create an original interface– Create and adjust controls– Manually edit control properties– Save an original interface– Test an interface with Torque using

console commands

Summary

• GUI definition files—filename.gui

• GUI control files—filename.cs (they are regular script files)

• GUI Controls—interactive or display only

• Common GUI controls: GuiControl, GuiTextCtrl, GuiButtonCtrl, GuiCheckBoxCtrl, GuiScrollCtrl, GuiTextListCtrl, and GuiTextEditCtrl

• Use the GUI editor to create and adjust GUI interfaces and controls