3D Game Programming All in One

1. 3D Game Programming All in One • By Kenneth C. Finney

2. Chapter 10Creating GUI Elements

3. 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

4. Creating GUI Elements • Push Buttons • Radio Buttons • Edit Boxes • Check Boxes • Menus • Sliders

5. Creating GUI Elements • Frames • Labels • Backgrounds

6. Creating GUI Elements • Controls • allow the user to direct what the program does • mouse-click controls • push buttons • radio buttons • keyboard controls • edit boxes

7. Creating GUI Elements • GuiChunkedBitmapCtrl • display large images • breaks background image into pieces • usually used for background images for GUI screens

8. Creating GUI Elements • GuiControl • Generic control container • Similar to frame container • Gathers together a collection of controls

9. Creating GUI Elements • GuiButtonCtrl • Clickable control • Does not retain state information • Used as a command interface control • Accepts a text label

10. 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

11. 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

12. 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

13. 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

14. Creating GUI Elements • Torque GUI Editor • Content Editor • Control Tree • Control Inspector • Tool Bar

15. Creating GUI Elements • Torque GUI Editor • Content Editor • Add controls • Select controls • Move controls • Resize controls

16. 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

17. 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

18. Creating GUI Elements • Torque GUI Editor • Tool Bar • Create new controls • Align controls • Adjust control spacing • Create and save new GUI files

19. 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

20. 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