Getting to know the Irrlicht 3D engine - User Interface

DOWNLOAD THE DEMO AND SOURCE CODE

RETURN TO THE TUTORIAL INDEX

A decent GUI is mandatory for almost any PC game these days. I remember what I big deal it was when the original Unreal game had a built in network game browser; until that point, most games used an external application to find and launch network games.

Irrlicht has a very capable GUI system included in it, along with a simple GUI editor. We will use this editor first to create a simple user interface.

Run the GUIEditor.exe application from the Irrlicht bin\Win32-VisualStudio folder in the Irrlicht SDK.  By right clicking in the window you can then add GUI controls.

In the screenshot below we have added 4 buttons.

In the GUI Editor window make sure each button has a unique ID, which can be modified in the Element tab. Right click in the editor window again and click Save. You will now have a file called guiText.xml.

IrrlichtEngineManager.h / IrrlichtEngineManager.cpp

For convenience we will add a function to the IrrlichtEngineManager called GetGUIEnvironment that returns the pointer to the Irrlicht GUI environment.

We also need to draw the GUI environment in the render loop. We add a call to the IGUIEnvironment drawAll function after the scene manager has been drawn, which will ensure that the GUI controls appear on top of the 3D scene.

ApplicationManager.h / ApplicationManager.cpp

The ApplicationManager now extends the IEventReceiver class. This allows it to receive Irrlicht event through the OnEvent function.

Loading the GUI XML file we created with the editor is as simple as calling the IGUIEnvironment loadGUI function.

In order to receive events from Irrlicht, which includes GUI events, as well as more commone events like keyboard presses or mouse movement, we call the IrrlichtDevice setEventReceiver function, and pass in this as the first parameter.

Inside the OnEvent function we need to check to two kinds of events. The first is defined by the EET_GUI_EVENT constant. This indicates that the user has interacted with the GUI. We then check to see if it was a button press. If so we identify the button that was pressed by the ID that we assigned to it in the GUI editor, hide the GUI, and launch the corresponding demo.

If the Escape key was pressed we shutdown the current demo and show the GUI again.

The rest of the code in ApplicationManager simply start the same demos that have been presented in previous tutorials. You will see that the StartupName and ShutdownName functions have been copied almost line for line from the ApplicationManager Startup and Shutdown functions from the previous demos.