Mangalore GUI

The mangalore gui is differnt from the nebula gui as it seems to be a lightweight, designer friendly, and to some extent coder free version of a gui. I'll try to summarize what I have learned so far by inspecting the gui code in magalore.

The gui consists of two parts. The first is a file defining the hierarchy and called a xui file in event.h (actually only .n2 files are loaded though :-)). The second part is where 'to some extent coder free' comes in. The xui needs an event handler responsible for handling the events of the loaded xui file.

The XUI file is not specified by radonlabs but from what I understand it is not that difficult to create one by hand. Basically it is a 'normal' transformnode/gfxnode hierarchy as you would create for your nebual objects. The difference is some distinct naming conventions for the nodes and some custom attributes. So how would I create a gui for mangalore ? You can use your prefered nebula exporter and layout your gui with 3d elements for example a plane with a fancy image as a backdrop, some buttons and some labels. And here managalore gui elements end. you do not have more than the three items available. If you would need more or some different behavior you would need to create your own classes (for eventual drag & drop support for example). Now back to the gui with a plane and three buttons. Attached is an example of the described gui without the meshes and textures, just the plain XUI (which is nothing else than a n2 file). For mangalore the hierarchy has some additional attributes which can be looked up in the button/canvas and label code.

All gui items are identified by the custom attribute "rlGui" which only needs to be present (you could do it with a bool or any other attribute.

A canvas has a string attribute "rlGuiType" with the value "Canvas" . In the current implementation only one canvas is active at the time and it is a must have attribute.

A button has a string attribute "rlGuiType" with the value "Button" . A string attribute "rlGuiText" with a value for the text on the button (which does not seem to be used at all), a string attribute "rlGuiEvent" with a value specifying which message event to be sent on pushing the button. Optionally you can attach four child shadernodes named "normal","pressed","mouseover","disabled" which will be displayed when the corresponding action is active on the button.

A label has a string attribute "rlGuiType" with the value "Label" . It does not have any other attributes.

# --- # $parser:ntclserver$ $class:ntransformnode$ # --- setscale 1.5 1.5 1.0 setboolattr "rlGui" true setstringattr "rlGuiType" "Canvas" setboolattr "rlGuiEnabled" false new ntransformnode Plane01_0 sel Plane01_0 setlocalbox -5.12 -3.83923 0.000771608 5.12 3.84077 0.000871608 setposition 0.0 0.00077112 0.000771608 setscale 1.0 1.0 1.0 source gfxlib:menutroops_tmp/Plane01.n2 sel .. new ntransformnode up_btn_bag_5_10_0 sel up_btn_bag_5_10_0 setlocalbox 3.32135 -2.71465 -0.01356 3.47135 -2.48667 0.0606921 setposition 3.39635 -2.60066 0.0235651 setscale 1.5 1.5 1.5 setboolattr "rlGui" true setstringattr "rlGuiType" "Button" setboolattr "rlGuiEnabled" true setstringattr "rlGuiText" "up_btn_bag_5_10" setstringattr "rlGuiEvent" "up_btn_bag_5_10" source gfxlib:menutroops_tmp/button.n2 sel .. new ntransformnode Cancel_0 sel Cancel_0 setlocalbox -4.62346 -3.24553 0.00077 -3.90656 -2.52864 0.15714 setscale 1.0 1.0 1.0 setboolattr "rlGui" true setstringattr "rlGuiType" "Button" setboolattr "rlGuiEnabled" false setstringattr "rlGuiText" "Cancel" setstringattr "rlGuiEvent" "Cancel" source gfxlib:menutroops_tmp/CancelButton.n2 sel .. ... ...

The messagehandler is responsible for processing all messages sent by your gui. On releasing the left mouse button for example on your menu button would put the event you specified for the button to be propagated to your message handler. The message handler is initially attached to the canvas. You can write serveral message handlers each responsible for his gui or one monolithic message handler for your whole game. The message handler will receive the messages and should be the responsible instance to route the messages to the right places (sending further messages to entities, closing gui's opening new gui's, startinggames, stopping them, loading levels, etc.) The Handling is done in the UI::EventHandler::HandleEvent() function which is the only part you need to implement. Without it you just have buttons doing nothing.

//code from my modified gamestatehandler GameStateHandler::GameStateHandler() : setupMode(EmptyWorld), exitState("Exit"), physicsVisualizationEnabled(false), fovVisualization(false) { this->eventhandler = new GuiEventHandler(); this->gamestatehandler = new GameMenuStateHandler(); this->troopsstatehandler = new TroopsMenuStateHandler(); ... } ... ... nString GameStateHandler::OnFrame() { ... if(nInputServer::Instance()->GetButton("troops")) { //set new state handler -> the troops configuration menu this->eventhandler->SetGuiStateHandler(troopsstatehandler); UI::UIServer::Instance() ->DisplayGui("examples/menutroops_tmp",eventhandler); } ... }

//code from my troopshandler to handle the army splitting void TroopsMenuStateHandler::OnEvent(UI::Event* event) { if (event->GetEventName() == "Ok") { //cancel pressed this->handleCancel(); // I am finished so I close myself UI::UIServer::Instance()->HideGui(); } else if (event->GetEventName() == "Cancel") { //ok pressed this->handleOK(); // I am finished so I close myself UI::UIServer::Instance()->HideGui(); } else if (event->GetEventName() == "1_troops_10_up") { //add 10 pts to first army this->increment(1,10); } ... }