CS 354R: Computer Game Technology

Transcription

1 CS 354R: Computer Game Technology GUI Programming Fall 2017

2 Graphical User Interfaces 2

3 What Is in a GUI? Not just art assets! GUIs display important information for the player: Character status Enemy status Leveling information Map information Out of game menus 3

4 Designing a GUI GUI layouts should be: Intuitive to navigate Intuitive to understand Intuitive to access This is harder than it sounds An entire area of design is dedicated to interaction You will probably get it wrong the first time Iterate GUI design via user testing 4

5 GUI Types: Menus Outside of game play options, modes, and information Metal Gear Solid V 5

6 GUI Types: HUDs In-game persistent display of information Final Fantasy XIV 6

7 GUI Types: Diagetic Displays In-game display of information incorporated into world Dead Space 7

8 GUI Types: GUI-less No in-game display of information purely contextual Last Guardian 8

9 How are GUIs Built? What are things a GUI must do? What are things GUIs have? How should code be structured to support these things? 9

10 Programming a GUI GUI programming involves: Adding widgets Widget layout Widget appearance Widget functionality 10

11 Widgets Most GUIs are inheritance-based CEGUI inherits all classes from DefaultWindow 11

12 Examples of CEGUI Windows (Widgets) FrameWindow PushButton Slider RadioButton/ Checkbox Editbox Listbox Menubar/ PopupMenu Labels 12

13 CEGUI Window Layout Parent-child relationship between container widget (window) and nested widgets Child settings/status inherited from parent window Alpha Enabled/Disabled Destruction Window creation can be done via: C++ programming XML hard-coding CEED unified editor 13

14 CEED Editor GUI-based interface design program Creates XML output Avoids both code recompiling and XML hand-coding Outputs design as a.layout XML file Load.layout sheets into CEGUI and attach to the desired window 14

15 CEED Example 15

16 XML Input for Other Game Assets Note that XML sheets aren t limited to GUIs Fast, modular way to load GameObject assets and properties Gives designers handles into the system Avoids hard-coding objects into the codebase Use editing programs or scripts to avoid hard-coding XML files yuck 16

17 CEGUI Window Appearance Imageset XML file Contains GUI textures for windows Generated in CEED LookNFeel XML file Provides fine-grained control of window appearances Raw XML editing as of CEGUI 0.8 Scheme XML file Groups data files Loads and registers widgets 17

18 Imageset Example <?xml version="1.0"?> <Imageset version="2" name="mylook" imagefile="mylook.tga" nativehorzres="800" nativevertres="600" autoscaled="true">... <Image name="mywidgetimage" xpos="0" ypos="0" width="64" height="64" />... </Imageset> 18

19 Look n Feel (Falagard) Example <?xml version="1.0"?> <Falagard> <WidgetLook name= MyButton"> <ImagerySection name= bg"> <ImageryComponent> <Area> <Dim type= LeftEdge"> <AbsoluteDim value="0" /> </Dim> <Dim type= TopEdge"> <AbsoluteDim value="0" /> </Dim> <Dim type= RightEdge"> <UnifiedDim scale="1" offset="0" type="rightedge" /> </Dim> <Dim type= BottomEdge"> <UnifiedDim scale="1" offset="0" type="bottomedge" /> </Dim> </Area> <Image imageset="myimages" image="buttonbg" /> <VertFormat type="stretched" /> <HorzFormat type="stretched" /></b> </ImageryComponent> </ImagerySection> <StateImagery name="normal"> <Layer> <Section section="bg" /> </Layer> </StateImagery> </WidgetLook> </Falagard> 19

20 Scheme <?xml version="1.0"?> <GUIScheme version="5" name= MyScheme > <Imageset name="myimages" filename="../ datafiles/imagesets/ MyImages.imageset" /> <Font name="myfont" filename="../ datafiles/fonts/myfont.font" /> <LookNFeel filename="../datafiles/ looknfeel/myskin.looknfeel" /> </GUIScheme> 20

21 CEGUI ResourceProvider Handles all resource-loading classes for CEGUI Font ImageSet Scheme WidgetLookManager (look n feel) WindowManager (layouts) Minimizes hard-coding resource paths 21

22 Widget Functionality GUIs require at least some interaction Most GUIs use some flavor of callbacks FLTK and GLUT use events Qt uses events and signals/slots CEGUI uses events CEGUI widgets subscribe to events but CEGUI can t directly read mouse or keyboard events How does a widget know when it s clicked? 22

23 Input Injection Interface Users manually injects inputs into CEGUI from OIS callbacks InjectedInputReceiver contains functions handling potential mouse and keyboard events Passes event data from Listeners to CEGUI Widgets can now receive notifications about events 23

24 References The CEGUI Beginners Guide < Category:The_Beginner_Guide_series> CEGUI in Practice < Category:CEGUI_In_Practice_series> CEGUI and Ogre Tutorial < Basic+Tutorial+7> 24