1. Sega 500 GUI & Menus Jeff “Ezeikeil” Giles jgiles@artschool.com http://gamestudies.cdis.org/~jgiles

2. So far We’ve spent lots of time futzing with the game itself and making it do all sorts of new, weird and wonderful things. …but it’s menus & stuff look so UT it’s not funny.

3. Today We’re going to take our first steps into changing UT2003’s front end. E.g. we start playing with and customizing the menu system.

4. The goal? Nothing overly complex of fancy today. Simply to get a mutator dialogue box to display to the screen with some buttons and information.

5. The goal? I’m going to take the adrenalin bounce mutator we made a few classes back and build a menu for it. Ultimately, were going to have the jump height adjustable from this menu.

6. The goal? Thus illustrating, in it’s infancy, how to pass information to the game from the menus. And back again…

7. Before we code… There are a tone of GUI classes already created for us. Thus, most of the core functionality is already in place. We just have to sift through it to find what we need…no small task.

8. Have a boo… Take a look at what you have…for a change lots of classes…very well documented … Having a peak at what we need today, we’re just going to walk down the inheritance chain to checkout all the assets we get.

9. XInterface.GUI GUI is an abstract class that holds all of the enums and structs for the UI system It also has its own controller, specificly for the GUI.

10. xInterface.GUIComponent GUIComponents are the most basic building blocks of menus. This class has some weirdness in it…the inclusion of cpptext. A long list of delegates for the core functionality of the menus. From here we have access to the player via pawn owner.

11. xInterface.GUILabel GUILabel - A text label that get's displayed. By default, it uses the default font, however you can override it if you wish. Our “Draw Text” tool

12. xInterface.GUIMultiComponent GUIMultiComponents are collections of components that work together. When initialized, GUIMultiComponents transfer all of their components to the GUIPage that owns them.

13. xInterface.GUIPage GUIPages are the base for a full page menu. They contain the control stack for the page. This is the base class from which we derive our menu. Also has a bunch of page specific delegates.

14. xInterface.GUIButton GUIButton - The basic button class With 2 function stubs of interest event ButtonPressed(); // Called when the button is pressed; event ButtonReleased(); // Called when the button is released; Defines the core button functionality

15. Getting started… If you recall from our class on mutators, there was a default property named: ConfigMenuClassName=“” Which we left uninitalized. This is actually what’s going to be the “handle” to your menu.

16. What menu to use… In our mutator we simple tell this to point at our menu type. ConfigMenuClassName="eze.EzeBounceConfig"

17. Building your menu As promised, deriving from GUIPage, we declare our menu. class EzeBounceConfig extends GUIPage; And this is where it gets a bit weird…

18. Building your menu In out default properties, we add the definition of the button. WinLeft=0.25 //placement multipliers from top left WinTop=0.3 WinWidth=0.5 //multipliers to window's w&h values WinHeight=0.4 //relative to the screen resolution bRequire640x480=True These are the widows own properties.

19. Building your menu And the dialogue box…which is in fact a button…which is in fact a window… Begin Object Class=GUIButton name=DialogBackground WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 bAcceptsInput=false bNeverFocus=true StyleName="ComboListBox" bBoundToParent=true bScaleToParent=true End Object Controls(0)=GUIButton'DialogBackground'

20. Building your menu What we get? Ooo…exciting…

21. The screen coord layout The placement numbers are multipliers which work very similar to UV coords. 0,0 1,1

22. Building your menu So what the heck is going on, that button declaration came totally out of left field! Ok, yeah. This might seem a little weird to you (it sure did to me when I first saw it), but don’t worry, it is really simple!

23. Building your menu UT2003 has completely changed the way the menus and button system works…It’s much simpler…despite being what appears to be a twisted form of object orientation… In the classic UT, we had to create around 3 or 4 classes just to make one window, basically what all this code does is create this window for you using only one class.

24. Here’s what’s going on… Begin Object Class=GUIButton name=DialogBackground WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 bAcceptsInput=false bNeverFocus=true StyleName="ComboListBox" bBoundToParent=true bScaleToParent=true End Object Controls(0)=GUIButton'DialogBackground' Begin a new object The objects nameClass type Sets Controls[0] to the DialogBackround. Should match name. End this object Controls is an array of elements that make up this window Kinda like the aliases we looked at in the User.ini.

25. Here’s what’s going on… Begin Object Class=GUIButton name=DialogBackground WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 bAcceptsInput=false bNeverFocus=true StyleName="ComboListBox" bBoundToParent=true bScaleToParent=true End Object Controls(0)=GUIButton'DialogBackground' Window width & height 1 == full Top left of screen Accept inputs, false for background style to use

26. Here’s what’s going on… Basically, Begin Object creates an object, names it, manipulates its variables and then assigns it to something.

27. Here’s what’s going on… But look just a smidge closer… WinLeft=0.25 WinTop=0.3 WinWidth=0.5 WinHeight=0.4 bRequire640x480=True 0.25 0.3 0.4 0.5 These values are relative to the whole viewable area.

28. Here’s what’s going on… And looking at the other block… Begin Object Class=GUIButton name=DialogBackground WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 0,0 1,1

29. Here’s what’s going on… Why does this happen? Two very helpful parameters… bBoundToParent=true bScaleToParent=true

30. Here’s what’s going on… In effect the coordinates are relative to the parent window’s dimensions. Thus placement of the window is almost like doing a SetPos with the canvas in the HUD…almost.

31. Here’s what’s going on… Lets add an OK button.

32. Adding another button Do another begin / end object set. Begin Object Class=GUIButton Name=OkButton Caption="OK" WinWidth=0.2 WinHeight=0.04 WinLeft=0.4 WinTop=0.6 bBoundToParent=true bScaleToParent=true OnClick=EzeOnClick //delegate assign End Object Controls(1)=GUIButton'OkButton'

33. Hey a button Wow…

34. Hey a button But first, notice the placement is relative to the dialogue box… Begin Object Class=GUIButton Name=OkButton Caption="OK" WinWidth=0.2 WinHeight=0.04 WinLeft=0.4 WinTop=0.6 0.2 0.4 0.6 0.04

35. Here’s what’s going on… Most of this is the same, but here’s the changes Begin Object Class=GUIButton Name=OkButton Caption="OK" WinWidth=0.2 WinHeight=0.04 WinLeft=0.4 WinTop=0.6 OnClick=EzeOnClick End Object Controls(1)=GUIButton'OkButton' A caption Control is Incremented by one Onclick is Assigned a value

36. Here’s what’s going on… Caption: is simple text for the button. Control: is an array, we just add this functionality to the next index. Onclick: is a delegate that we point at a function…which is run when clicked.

37. Here’s what’s going on… Ours, simply closes the window. function bool EzeOnClick(GUIComponent Sender) { Controller.CloseMenu(); return true; } This would be where you save to an ini or execute you changes from the mutator.

38. Let me show ya something Now there’s obviously a connection between the buttons and the declarations in our page…but what are they? See if you can spot the similarities.

39. Let me show ya something Begin Object Class=GUIButton name=DB WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 bAcceptsInput=false bNeverFocus=true StyleName="ComboListBox" bBoundToParent=true bScaleToParent=true End Object Controls(0)=GUIButton'DB' defaultproperties { StyleName="RoundButton" bAcceptsInput=true bCaptureMouse=True bNeverFocus=false; bTabStop=true WinHeight=0.04 bMouseOverSound=true OnClickSound=CS_Click } Our class GUIButton class

40. Let me show ya something Let me make it a bit more obvious… Same thing, I’ve just included some of the inherited defaults in the GUIButton and removed repeat declarations.

41. Let me show ya something Begin Object Class=GUIButton name=DB WinWidth=1.0 WinHeight=1.0 WinTop=0 WinLeft=0 bAcceptsInput=false bNeverFocus=true StyleName="ComboListBox" bBoundToParent=true bScaleToParent=true End Object Controls(0)=GUIButton'DB' defaultproperties { WinTop=0.0 WinLeft=0.0 WinWidth=1.0 WinHeight1.0 bAcceptsInput=false bNeverFocus=false StyleName="RoundButton" bNeverFocus=false; bBoundToParent=false bScaleToParent=false } Our class GUIButton class

42. Let me show ya something Hmmm…same variable names are showing up… Could it be…that were simply setting defaults? Looks to me like that’s exactly what’s going down.

43. Adding some text Now that we’ve gone through the above, this is actually stupid easy… Just following the same pattern the next object is:

44. Adding some text Begin Object class=GUILabel Name=DialogText Caption="On the bounce!!!" TextALign=TXTA_Center TextColor=(R=220,G=180,B=0,A=255) TextFont="UT2HeaderFont" WinWidth=1.0 WinHeight=32.0 WinLeft=0.0 WinTop=0.3 bBoundToParent=true bScaleToParent=true End Object Controls(2)=GUILabel'DialogText' GUILabel class New captionText align Text colour The font

45. Adding some text

46. What about pictures? Sure no problem after poking around for a suitable texture… Cool! Finally cool!

47. So how did we do that? Once again, very similar to the above… Begin Object class=GUIImage Name=aPic WinLeft=0.25 WinTop=0.3 WinWidth=0.5 WinHeight=0.4 Image=Material'ExitScreen.splash.QuitA2' ImageColor=(R=255,G=255,B=255,A=255); ImageRenderStyle=MSTY_Normal ImageStyle=ISTY_Scaled End Object Controls(3)=GUIImage'aPic' GUIImage class The image Colour Render style Image draw style

48. But there’s a problem… Where did the “On the Bounce!!!” caption go?

49. Here’s a hint… Actually it’s still there…

50. Order counts! Like so may things in programming…order counts! Just swap the controller indexes around some so that the image is drawn before the title… Controls(2)=GUIImage'aPic‘ … Controls(3)=GUILabel'DialogText'

51. Nuh-huh…order counts

52. Next up Ok, starting to look different…which is good. But can we make some noise with it. In short, yes. But it is a bit finicky in terms of how.

54. GUI Noise Makers The easies way to get the GUI to make some sounds is like this… You have to call a function declared in the GUI controller PlayerOwner()

55. GUI Noise Makers Ok, sounds simple enough, bu tlook at what it does. It accesses the VIEWPORT to get a hold of the player. function PlayerController PlayerOwner() { return Controller.ViewportOwner.Actor; }

56. GUI Noise Makers Ok, why do we have to go this route? Well, in short, GUIControllers are completely different that the regular controllers. As a matter of fact, they are not even an actor. They derive from Interactions…

57. GUI Noise Makers But, from here you can call the play sound function. So, I’m going to start by making noise with every keystroke…making is sound like an old style typewriter Not going to do anything with the keystrokes yet…

58. GUI Noise Makers Simple as that….now try the keyboard Delegate bool OnKeyType(out byte Key, optional string Unicode) { PlayerOwner().PlayOwnedSound(sound'MenuSounds.MS_MouseOver', SLOT_Interface,1.0); return false; }

59. GUI Noise Makers So, running with is a bit, I override another function: function PlayOpenSound() { PlayerOwner().PlayOwnedSound(sound'Pickup Sounds.LargeShieldPickup',SLOT_Interface,1.0); }

60. GUI Noise Makers Doing this will cause a nice shield charge sound to play when the menu opens. Yeah, simple…But, since we have access to the GUIController, we can also change the default sounds…

61. GUI Noise Makers Try adding this to the PlayOpenSound function: Any idea what this will do?...other than make some noise I mean. Controller.MouseOverSound=Sound'WeaponSounds.BExplosion3';

62. GUI Noise Makers Ok, that one is a bit of a keeper…changing all the GUI sounds… Definitely going to need that!

63. That’s all for today This should be more that enough to wet the appetite… Tomorrow, we’ll look at how to get information into and out of the menus.