GUI in Panda3D
Once you have the base skeleton of your program set up, you may want to jazz it up a little with things like buttons or a splash screen or other things that make it actually usable (in other words, the graphical user interface). Here is a bunch of quick and dirty ways you can make your dreams happen:
Aspect2D and GUI:
Most 2D functions and GUI elements you want to do will be parented to a node called aspect2d, which is a child of the larger node render2d. Essentially, Panda3D is loaded with two automatic scene graphs that you can parent all your objects to: render and render2d. render is used for all the 3D elements in your program, while render2d takes care of all the 2D elements. You can think of render2d as a transparent window over your 3D world, exactly matching to the computer screen.
aspect2d applies a scale relative to your window size ([-1,1] for y and, if ratio = screen width/screen height, [-ratio, ratio] for x) so that whatever objects you want to place won't be squashed. This is what you'll use for most of your GUI stuff.
All the stuff we cover below has a bunch of optional arguments you can add to make things ~*~fancy~*~, which you can look at more through the Panda3D manual!
Easy Text and Image Rendering:
If you want to have text or images overlaid over your 3D project (i.e. a HUD or pop-up animation, etc.) you can use the OnscreenText and OnscreenImage objects, which are basically wrappers for the overarching TextNode interface.
Let's say I want to a big 'You Win!' to pop up whenever the user, well, wins. By importing the directory OnscreenText, I can easily call the OnscreenText function and create a new text object:
from direct.gui.OnscreenText import OnscreenText
textObject = OnscreenText(text ='You Win!', pos = (0,0), scale = 1)
When I want to restart the game and get rid of the text object, I can then call:
textObject.destroy()
But what if I found a really swanky drawn image of 'You Win!' online and I want to use that instead? Then we can use OnscreenImage to display that image on the screen:
from direct.gui.OnscreenImage import OnscreenImage
imageObject = OnscreenImage(image = 'myImage.jpg', pos = (0,0,0))
If your chosen image has a transparent background, Panda3D will by default use it like a black background. You can fix that by enabling transparency:
frompanda3d.coreimportTransparencyAttrib
imageObject.setTransparency(TransparencyAttrib.MAlpha)
Just like with OnscreenText, once you are done with your image you can get rid of it with
imageObject.destroy()
DirectGUI:
For more interactive usage of GUI, DirectGUI -- which includes buttons, menus, and dialogs -- may be more useful (though it is pretty ugly). There's a lot of ways to use DirectGUI, but for efficiency purposes we'll only cover the basics.
DirectButton:
The DirectButton is a button that performs a command when clicked.
You can add a DirectButton like this:
button = DirectButton(pos=(0,0,0), scale=1, command=doSomething)
The command argument on a DirectButton is where you put the function that you want the program to call when the user clicks.
DirectDialog:
The DirectDialog is a pop-up window, which is useful when you want to make a help menu or something similar. There's a bunch of specific types of DirectDialogs you can use, like YesNoDialog or OkDialog. The general form to insert a DirectDialog would be something like this (in this example, we use an OkDialog):
dialog = OkDialog(dialogName="help", text="sorry you're on your own", command=closeDialog)
You also need to destroy the dialog after you're done using it, which you can do with
dialog.destroy()
or, if you are using an OkDialog and need to recreate the object,
dialog.cleanup()
(Otherwise it will cause an error.)
DirectEntry:
DirectEntry works as an input field for the user, which you can add like this:
input = DirectEntry(initialText="Enter a number: ", command=doSomething)
There's also a bunch of other stuff you can do! Feel free to play around with the options and make the GUI as personal as you can.