Chapter 8. GUI Goodness: All About the Graphic User Interface

Now is the time to start giving the player more options and more information. We've almost got a playable racing game at this point, though we don't have the weapons yet. If we add in a Graphical User Interface, we'll be that much closer to our goal of a complete game.

The GUI components we'll need to create are:

Menu system
Putting menus to use
In-game HUD

To create these elements, we'll be using Panda3D's DirectGUI system. This system includes all the tools we'll need to make our GUI and get it running.

Creating a menu system

Rather than creating menus individually, it would be wiser to create a system that will allow us to make all the menus we need. We can do this if we rely on the handy feature of Python that allows us to pass functions and methods between objects.

We'll create a menu system that takes functions or methods as arguments and executes them when menu options are selected. We'll also need to take in the arguments for those functions and methods.

About DirectGUI

The DirectGUI system in Panda3D is a series of tools for constructing a graphical user interface. Among the objects in DirectGUI we can find DirectFrames to act as the backgrounds of menus, DirectLabels that will put text on the menus, DirectButtons that will serve for the menu buttons, and more.

All of the DirectGUI objects inherit from DirectGUIBase, so they share many of their features. The typical method for creating a DirectGUI object is to fill the constructor with keyword/value pairs, like the following:

myDirectGuiObject = DirectGUIObject(keyword = value, keyword = value,
keyword = value)

For that reason, it's a good idea to know what the keywords that are shared by most, if not all, of the DirectGUI objects. Here's a list of those keywords for reference. It's taken from the Panda3D manual on the Panda3D website, with a couple of updates.

Keyword	Description	Value
`text`	Text to be displayed on the object	string
`text_bg`	Background color of text on the object	(R,G,B,A)
`text_fg`	Color of the text	(R,G,B,A)
`text_pos`	Position of the displayed text	(x,y,z)
`text_roll`	Rotation of the displayed text	number
`text_scale`	Scale of the displayed text	(sx,sy,sz)
`text_*`	Parameters to control the appearance of the text	Any keyword parameter appropriate to `OnscreenText`.
`frameSize`	Size of the object	(left, right, bottom, top)
`frameSize`	Size of the object	(Left,Right,Bottom,Top)
`frameVisibleScale`	Relative scale of the visible frame to its clickable bounds. Useful for creating things such as the paging region of a slider, which is visibly smaller than the acceptable click region	(hscale, vscale)
`frameColor`	Color of the object's frame	(R,G,B,A)
`relief`	Relief appearance of the frame	SUNKEN, RAISED, GROOVE, RIDGE, FLAT, or None
`invertedFrames`	If true, switches the meaning of SUNKEN and RAISED	0 or 1
`borderWidth`	If relief is SUNKEN, RAISED, GROOVE, or RIDGE, changes the size of the bevel	(Width,Height)
`image`	An image to be displayed on the object	image filename or `Texture` object
`image_pos`	Position of the displayed image	(x,y,z)
`image_hpr`	Rotation of the displayed image	(h,p,r)
`image_scale`	Scale of the displayed image	(sx,sy,sz)
`geom`	A `geom` to represent the object's appearance. This is usually a textured polygon created with egg-texture-cards.	`NodePath`
`geom_pos`	Position of the displayed `geom`.	(x,y,z)
`geom_hpr`	Rotation of the displayed `geom`.	(h,p,r)
`geom_scale`	Scale of the displayed `geom`.	(sx,sy,sz)
`pos`	Position of the object	(X,Y,Z)
`hpr`	Orientation of the object	(H,P,R)
`scale`	Scale of the object	(sx, sy, sz)
`pad`	When `frameSize` is omitted, this determines the extra space around the `geom` or text's bounding box by which to expand the default frame	(Width,Height)
`state`	The initial state of the object	NORMAL or DISABLED
`frameTexture`	`Texture` applied directly to the frame generated when relief is FLAT	image filename or `Texture` object