Advanced GUI-System (Scripting/vector based graphics)

[badday]

Hi,

I´m working on a game and look for a way to make a modern, good-looking GUI for it. So far I only used the builtin-Irrlicht system (with simple background image/unvisible button workarounds), but this is not what I was looking for.
I need to support different screen sizes, so the best thing would be to have a support for vector based grafics (such as .svg files) and I would like to script most of the GUI-related stuff using python or Lua.

I did some research on the web and found some related stuff, but not really what I was looking for.

One thing I found is the CEGUI (Crazy Eddie's GUI System | http://www.cegui.org.uk/ ), which does in fact supply support for Lua and Python, but as far as I can see it, it lacks support for vector based (vb)-graphics.
Another thing I found is libRocket ( http://librocket.com/ ), a middleware supplying support for C++ and Python. It uses HTML and CSS, quite an exotic approach I think, but why not I didn´t really find much about scaling/vb-graphics apart from http://forums.librocket.com/viewtopic.p ... t=258#p903 , which is not really what I was looking for (seems only to be easy scaling). The integration with irrlich is quite simple I think, have a look here: http://irrlicht.sourceforge.net/forum/v ... 19&t=44133

Back to vb-graphics-support: An interesting approach seems to be using irrlicht and AGG (Anti-Grain Geometry |http://antigrain.com/ ) and pyirrlicht ( http://sourceforge.net/projects/pir/ ). Unfortunately AGG doesn´t use a suitable license for my needs
I did think about using other vb-graphic-supporting libraries like cairo ( http://cairographics.org/cairomm/ ), supporting OpenGL output and local image buffering or Boost.Plot ( https://svn.boost.org/trac/boost/wiki/L ... Boost.Plot ). However, I didn´t find any hints whether anyone used these libs successfully together with irrlicht.

Is there maybe some way to extend some irrlicht-class like ITexture to become capable of working with svg-files and use some special renderer? How do you solve those problems? Do you use fixed positions for GUI-Elements or do you scale distances to boarders of the window?


I think one thing irrlicht would really benefit from it a modern, scriptable GUI-system. But who knows, maybe someone has already figured out how to integrate this feature and is just waiting to share his or her ideas



Thanks guys.

[Lonesome Ducky]

This will come in handy for rendering the vector art.

[badday]

OK, but I don´t plan to write the thing by my own due to lack of time, so I´m looking more for ready-to-use libraries. But thanks anyway

[sudi]

Well libRocket is already a modern scriptable GUI system and its really simple to implement it into irrlicht.
Just posted some code showing how to do so. (IrrlibRocket)
other than that yes irrlichts gui system is not really nice but simple to use. I would like to have something similar simple but with more features so it can be extended when needed. But i guess the only option there is writing it yourself...

[_maxim_]

Back to vb-graphics-support: An interesting approach seems to be using irrlicht and AGG

AGG develop is stopped and have very limited default SVG support.

I did think about using other vb-graphic-supporting libraries like cairo

Also see http://ftp.gnome.org/pub/GNOME/sources/librsvg for cairo, last version 2.34

[badday]

OK, thanks for this advice. I just wonder why there seem to be no code-snippets available as I´ve seen quite many good-looking GUIs in Irrlicht games so far. Does nobody want to share his/her ideas? I mean why reinventing the wheel?

[CuteAlien]

I just use the Irrlicht GUI-System. Scaling isn't the only way to create a GUI which works in different resolutions. You can also just move the elements for example - so people with larger screens have simply more space for the game available. Or you can switch bitmaps depending on the resolution.

But I've also heard good thinks about libRocket - so might be worth checking that out.

[badday]

@CuteAlien: I just read your advice for easy scaling guis at: http://irrlicht.sourceforge.net/forum/v ... hp?t=43650
There, you wrote:

All gui-elements can define how they should behave on resizing with setAlignment. So you use one (invisible) background of a certain size which is the top-most parent. That one has the size which you use for making your GUI (for example 800x600). If you need to resize the GUI you just resize that element and all child elements will then behave according to the options you used in setAlignment.

So, I thought this might work:

Code: Select all

img = GetDriver()->createImage(irr::video::ECOLOR_FORMAT::ECF_R8G8B8, options.Screen);
irr::gui::IGUIImage *gimg = GetGUIEnv()->addImage(GetDriver()->addTexture("bla", img), core::vector2di(0,0));
gimg->setVisible(false);
gui::IGUIElement *elem = Device->getGUIEnvironment()->getRootGUIElement();
elem = gimg;

I create a dummy-image for a given size (options.Screen holds the wanted size), add this to the GUI and use it as the rootGUIElement. Anyway, there seems not to be any effect. Is there anything else I need to do?

[serengeor]

img = GetDriver()->createImage(irr::video::ECOLOR_FORMAT::ECF_R8G8B8, options.Screen);
irr::gui::IGUIImage *gimg = GetGUIEnv()->addImage(GetDriver()->addTexture("bla", img), core::vector2di(0,0));
gimg->setVisible(false);
gui::IGUIElement *elem = Device->getGUIEnvironment()->getRootGUIElement();
elem = gimg;

elem is your pointer and thus it won't change anything.

[badday]

I just wonder how to reset the root GUI Element?

[serengeor]

I just wonder how to reset the root GUI Element?

I don't think you want to replace that:

Code: Select all

//! Returns the root gui element.
IGUIElement* CGUIEnvironment::getRootGUIElement()
{
        return this;
}
 

[badday]

I´m not sure whether I got u. I thought about adding the (then former) rootGUIElement to the childs of my created GUI-Element, but this seems not to be an options either. Is there no simple option do what I want?

[CuteAlien]

I´m not sure whether I got u. I thought about adding the (then former) rootGUIElement to the childs of my created GUI-Element, but this seems not to be an options either. Is there no simple option do what I want?

Try it the other way around. Just leave the root as it is and add you own root below it. Or even better - think in dialogs/screens. Basically you have one background element for each screen. So depending on game-mode you will show/hide that one. And those are all added to the root.

[badday]

Just leave the root as it is and add you own root below it.

OK, I tried that as well:

Code: Select all

irr::video::IImage *img;
img = GetDriver()->createImage(irr::video::ECOLOR_FORMAT::ECF_R8G8B8, options.Screen);
irr::gui::IGUIImage *gimg = GetGUIEnv()->addImage(GetDriver()->addTexture("bla", img), core::vector2di(0,0));
gimg->setVisible(false);
        
Device->getGUIEnvironment()->getRootGUIElement()->addChild(gimg);       
GetGUIEnv()->loadGUI(filepath.c_str(), gimg);

As a result, no GUI is shown any more. Did I miss something?

Basically you have one background element for each screen. So depending on game-mode you will show/hide that one.

OK, but does this solve the scaling problem?

[CuteAlien]

GetGUIEnv()->addImage already does add it to the root element. So you don't have to do it again (shouldn't do anything). Can't tell right now without some more reading what loadGUI does to it - maybe try without loading first.

And the idea is that with the right settings you must then only scale the background elements -all it's childs will then behave according to their alignment settings. Actually it might even be possible that you don't even must scale those but can set the alignment settings of your background elements (for example to scale) and it will then rescale automatically on resizing the window. But I'm not sure about that (didn't work a few versions in the past, but might work now). But either way make sure you set the alignment settings of all children correct, otherwise it won't work.

edit: Ok, just seeing you set your element to invisible - which means all it's child will not be visible as well. If you want a not-visible element which still acts as parent then use a static-text without background drawing (or an own custom gui-element - I usually do that).