Irrlicht GUI

[Oster200]

I want to use irrlicht's GUI because its there and it seems to be able to do most of what other GUI Librarys can do and if not i can always add on. The one thing i cant seem to change is the background color of a list box, textbox etc. I also was wondering how to change the color of the text.

[CuteAlien]

You can use IGUISkin::setColor to change most colors. Some elements like IGUIStaticText also have functions to overwrite colors for individual objects.
If those are not enough the next options are - using an own skin (start by copying the existing one), or using own elements (again you can start by copying the code of existing ones).

[jiangcaiyang]

I think to fully customize Irrlicht GUI will take you lots of time and not designer-friendly.

[Oster200]

Well im trying to get fltk to work with irrlicht but i dont know how to display fltk buttons in a irrlicht window. I have found an example by hendu but that is not running inside irrlichts window. here is the link http://irrlicht.sourceforge.net/forum/v ... hp?t=42450

in other words how do i get fltk to run in irrlicht?

I have tried also to get wxwidgets to work but i cant get it to compile. If any of you want to share what GUI lib you use feel free.
Here are the ones i tried.
CEGUI - cant get to compile
MyGui - cant get to compile
wxwidgets - cant get to compile
Qt - Dont want due to license
FLTK - Cant get to run in irrlicht window but got the furthest with

As you can see i have a problem with cmake because CEGUI, MyGui, and wxwidgets use it. Maybe?

And if none work im going to have to go the longer route of making a skin for IrrGui

How can i add a simple button to my cegui application since the samples dont work for me?

[CuteAlien]

Every good GUI takes time to create. It's often the part that takes the most time in game programming (and yeah, no-one ever expects that). I rather like the Irrlicht GUI system because it's flexible enough that I usually can get everything working the way I want it to. Even if it means I have to create my own elements sometimes and maybe have to add another layer to the eventsystem for faster coding.

wxWidgets and Qt are fantastic GUI-systems - but they are targeted at application programming (where they rock), for game-ui's I actually prefer Irrlicht GUI. CEGUI was too fat for my taste (and also I don't like some of their code-decisions), but others seem to like it, so it's maybe not a bad choice. Don't know what your compile-trouble is there. I never used FLTK or MyGui (didn't even hear about the latter), so can't say anything about those.

[Oster200]

Every good GUI takes time to create. It's often the part that takes the most time in game programming (and yeah, no-one ever expects that). I rather like the Irrlicht GUI system because it's flexible enough that I usually can get everything working the way I want it to. Even if it means I have to create my own elements sometimes and maybe have to add another layer to the eventsystem for faster coding.

wxWidgets and Qt are fantastic GUI-systems - but they are targeted at application programming (where they rock), for game-ui's I actually prefer Irrlicht GUI. CEGUI was too fat for my taste (and also I don't like some of their code-decisions), but others seem to like it, so it's maybe not a bad choice. Don't know what your compile-trouble is there. I never used FLTK or MyGui (didn't even hear about the latter), so can't say anything about those.

Yeah i like Irrlicht GUI one of the things i am finding out is that it is organized and a lot better to understand than a different lib but I have got CEGUI to compile but one of the difficulties im having is how everything to me at least seems to be scattered around. So if i cant understand it im going to be spending more time trying to make a button than i would to edit irrlicht's. We will see what happens.

[Seven]

what i like about the irrlicht gui is that I can easily create code that allows me to send all events to my app and let them cascade through the level and down to the objects. This allows objects to add gui elements to the screen and then receive the events to react on.

a good example is the game object 'seeing eye spell' which manages the gui button on the screen (in this case a button with a closed eye graphic). The game object creates the guielement and then registers with the level to receive button click events from this gui element. When the user clicks on the eye to cast the spell, the event is sent to the gui->app->level->gameobject. the game object then runs it's own code to 'search' for nearby hidden items (doors, traps, etc...) and if it finds something, it manages the gui element to 'open' the eye showing the player that something was found. This allows me to make my code much more self contained in the object than trying to have the level 'remember' which objects have gui elements on the screen.

my $0.02 worth on the topic........

[Oster200]

Okay here is my problem now where is the default skin? I want to change the look of the gui.

[mant]

Well im trying to get fltk to work with irrlicht but i dont know how to display fltk buttons in a irrlicht window. I have found an example by hendu but that is not running inside irrlichts window. here is the link http://irrlicht.sourceforge.net/forum/v ... hp?t=42450

in other words how do i get fltk to run in irrlicht?

I have tried also to get wxwidgets to work but i cant get it to compile. If any of you want to share what GUI lib you use feel free.
Here are the ones i tried.
CEGUI - cant get to compile
MyGui - cant get to compile
wxwidgets - cant get to compile
Qt - Dont want due to license
FLTK - Cant get to run in irrlicht window but got the furthest with

As you can see i have a problem with cmake because CEGUI, MyGui, and wxwidgets use it. Maybe?

And if none work im going to have to go the longer route of making a skin for IrrGui

How can i add a simple button to my cegui application since the samples dont work for me?

What exact errors with CEGUI that you had before? My Ubuntu 12.04.3 can build CEGUI for Irrlicht successfully (using Irrlicht's shared lib).
CEGUI also has an official Irrlicht demo.

[CuteAlien]

The source of the default-skin is CGUISkin.cpp in source/Irrlicht. Although you might first check to just change colors - which you can do with the IGUISkin interface.

[Oster200]

What exact errors with CEGUI that you had before? My Ubuntu 12.04.3 can build CEGUI for Irrlicht successfully (using Irrlicht's shared lib).
CEGUI also has an official Irrlicht demo.

So i finally did get it to compile a day or two ago but i was playing around with it but i failed to get the program to run. it can build just not run. it throws a memory violation all i did was add 3 lines of code. I would post the error but i am not able to right now and i thought that maybe it was just the outdated version(0.7.9) but when i got the latest and built it with cmake ran the .sln file and it threw my anti virus with a high risk Suspicious.Cloud.7.F im sure it is just a false positive but i decided it might be best just to try and spend the time to get irrlicht GUI to work which i am happy with.
I then thought i should look at the examples but i could not get them to compile. so right now i am just trying to see if i can get Irrlicht GUI to do what i want which should not be that difficult now that i know where to look

@CuteAlien Thanks i haven't had time to try and just change the color with IGUISkin yet but will if i have any more question with the GUI i will let you know.

[Oster200]

Okay so i copied and pasted CGUISkin.cpp and opened it up. the sColor vlaues are the ones that change the color right? so i changed a few and where do i put this file so it can read this instead of the default? Another quick question wouldnt it be easier and look better to load images for everyting than put values.

Sorry for asking so many question i never used the GUI of irrlicht.

[CuteAlien]

If you only want to change colors then you don't need to copy CGUISkin. You can do that wit the IGUISkin interface. You get access to the default skin from the guienvironment with getSkin(). And then you can change colors with setColor (I think Irrlicht example 05 does use that).

Copying CGUISkin (and renaming the file/class and modifying the code) is only needed when you want to create an own class responsible for drawing. That way you can get (near) complete control over the layout. You can create your skin-clas with new as it's then just a normal c++ class. And then call setSkin on the guienvironment to change the skin for all elements.

[Oster200]

Okay sorry it took me so long to get back to you but i have been a little busy here is my test GUI and i have changed it so i does look good with the default look although i am not going to be able to use this look for the game. okay so I used

Code: Select all

env->getSkin()->setColor(EGDC_3D_FACE, SColor(0,255,0,0));

that to change the colors of the dialog box backgrounds hoping it would change the list box background. Is there a way to only make the listbox background red and not all the others. I have looked at the listbox and could not set a color or get a skin to set a color. My code is basically the tutorial but moved some gui elements. Here is my code if you want to look at it

Code: Select all

#include <irrlicht.h>
#include "driverChoice.h"
 
using namespace irr;
 
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;
 
#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif
 
// Declare a structure to hold some context for the event receiver so that it
// has it available inside its OnEvent() method.
struct SAppContext
{
    IrrlichtDevice *device;
    s32             counter;
    IGUIListBox*    listbox;
};
 
// Define some values that we'll use to identify individual GUI controls.
enum
{
    GUI_ID_QUIT_BUTTON = 101,
    GUI_ID_UPDATE_BUTTON,
    GUI_ID_TRANSPARENCY_SCROLL_BAR,
    GUI_ID_QUIT_WINDOW
};
 
/*
The Event Receiver is not only capable of getting keyboard and
mouse input events, but also events of the graphical user interface
(gui). There are events for almost everything: Button click,
Listbox selection change, events that say that a element was hovered
and so on. To be able to react to some of these events, we create
an event receiver.
We only react to gui events, and if it's such an event, we get the
id of the caller (the gui element which caused the event) and get
the pointer to the gui environment.
*/
class MyEventReceiver : public IEventReceiver
{
public:
    MyEventReceiver(SAppContext & context) : Context(context) { }
 
    virtual bool OnEvent(const SEvent& event)
    {
        if (event.EventType == EET_GUI_EVENT)
        {
            s32 id = event.GUIEvent.Caller->getID();
            IGUIEnvironment* env = Context.device->getGUIEnvironment();
 
            switch(event.GUIEvent.EventType)
            {
 
            /*
            If a scrollbar changed its scroll position, and it is
            'our' scrollbar (the one with id GUI_ID_TRANSPARENCY_SCROLL_BAR), then we change
            the transparency of all gui elements. This is a very
            easy task: There is a skin object, in which all color
            settings are stored. We simply go through all colors
            stored in the skin and change their alpha value.
            */
            case EGET_SCROLL_BAR_CHANGED:
                if (id == GUI_ID_TRANSPARENCY_SCROLL_BAR)
                {
                    s32 pos = ((IGUIScrollBar*)event.GUIEvent.Caller)->getPos();
                    
                    for (u32 i=0; i<EGDC_COUNT ; ++i)
                    {
                        SColor col = env->getSkin()->getColor((EGUI_DEFAULT_COLOR)i);
                        col.setAlpha(pos);
                        env->getSkin()->setColor((EGUI_DEFAULT_COLOR)i, col);
                    }
                    
                }
                break;
 
            case EGET_BUTTON_CLICKED:
                switch(id)
                {
                case GUI_ID_QUIT_BUTTON:
                    Context.device->closeDevice();
                    return true;
 
                case GUI_ID_UPDATE_BUTTON:
                    {
                    Context.listbox->addItem(L"Window created");
                    Context.counter += 30;
                    if (Context.counter > 200)
                        Context.counter = 0;
 
                    IGUIWindow* window = env->addWindow(
                        rect<s32>(100 + Context.counter, 100 + Context.counter, 400 + Context.counter, 300 + Context.counter),
                        false, // modal?
                        L"Test window");
 
                    env->addStaticText(L"Transparent Control:", rect<s32>(10,20,290,40), true, false, window);
                    IGUIScrollBar* scrollbar = env->addScrollBar(true, rect<s32>(10, 50, 290, 65), window, GUI_ID_TRANSPARENCY_SCROLL_BAR);
                    scrollbar->setMax(255);
                    scrollbar->setMin(50);
                    env->addButton(rect<s32>(10,75,290,107), window, GUI_ID_QUIT_BUTTON, L"Close", L"");
                    
    
                    // set scrollbar position to alpha value of an arbitrary element
                    scrollbar->setPos(env->getSkin()->getColor(EGDC_WINDOW).getAlpha());
 
                    }
                    return true;
 
                default:
                    return false;
                }
                break;
 
            }
        }
 
        return false;
    }
 
private:
    SAppContext & Context;
};
 
int main()
{
    // ask user for driver
    video::E_DRIVER_TYPE driverType=driverChoiceConsole();
    if (driverType==video::EDT_COUNT)
        return 1;
 
    // create device and exit if creation failed
 
    IrrlichtDevice * device = createDevice(driverType, core::dimension2d<u32>(640, 480));
 
    if (device == 0)
        return 1; // could not create selected driver.
 
    /* The creation was successful, now we set the event receiver and
        store pointers to the driver and to the gui environment. */
 
    device->setWindowCaption(L"Updater");
    device->setResizable(false);
 
    video::IVideoDriver* driver = device->getVideoDriver();
    IGUIEnvironment* env = device->getGUIEnvironment();
 
    /*
    To make the font a little bit nicer, we load an external font
    and set it as the new default font in the skin.
    To keep the standard font for tool tip text, we set it to
    the built-in font.
    */
 
    IGUISkin* skin = env->getSkin();
    IGUIFont* font = env->getFont("media/fonthaettenschweiler.bmp");
    if (font)
        skin->setFont(font);
 
    skin->setFont(env->getBuiltInFont(), EGDF_TOOLTIP); 
 
    env->getSkin()->setColor(EGDC_3D_FACE, SColor(0,255,0,0));
 
    /*
    We add three buttons. The first one closes the engine. The second
    creates a window and the third opens a file open dialog. The third
    parameter is the id of the button, with which we can easily identify
    the button in the event receiver.
    rect<s32>(10,240,110,240 + 32) left,top,right,bottom
    */  
 
    env->addImage(driver->getTexture("media/background.png"),position2d<int>(-2,-2));
 
    env->addButton(rect<s32>(10,438,110,438 + 32), 0, GUI_ID_QUIT_BUTTON,
            L"Close", L"Does Not Update");
    env->addButton(rect<s32>(120,438,220,438 + 32), 0, GUI_ID_UPDATE_BUTTON,
            L"Update", L"Updates the Program");
 
    env->addStaticText(L"Update: v0.0.1", rect<s32>(10, 110, 630, 130), true, true, 0, -1, true);
    IGUIListBox * listbox = env->addListBox(rect<s32>(10, 140, 630, 428));
    listbox->setDrawBackground(true);
 
    // Store the appropriate data in a context structure.
    SAppContext context;
    context.device = device;
    context.counter = 0;
    context.listbox = listbox;
 
    context.listbox->addItem(L"All Update information would go here example click on update.");
 
    // Then create the event receiver, giving it that context structure.
    MyEventReceiver receiver(context);
 
    // And tell the device to use our custom event receiver.
    device->setEventReceiver(&receiver);
 
    /*
    And at last, we create a nice Irrlicht Engine logo in the top left corner. 
    */
    env->addImage(driver->getTexture("media/title.png"), position2d<int>(10,10));
 
    /*
    That's all, we only have to draw everything.
    */
 
    while(device->run() && driver)
    if (device->isWindowActive())
    {
        driver->beginScene(true, true, SColor(0,0,0,0));
 
        env->drawAll();
    
        driver->endScene();
    }
 
    device->drop();
 
    return 0;
}

Here is what it looks like but i only want the listbox to be red

My other question was how can i close a window not the entire application when the window opens in a different case? In the image you can see i have a button that says close in the test window it is the big close button how can i make that button close the test window but not the Updater window? I have made a case just for that to close the test window, but i dont know how to call that window in a different case.

i cant do window-> in a different case because it doesn't know what that is.

[CuteAlien]

okay so I used

Code: Select all

env->getSkin()->setColor(EGDC_3D_FACE, SColor(0,255,0,0));

that to change the colors of the dialog box backgrounds hoping it would change the list box background. Is there a way to only make the listbox background red and not all the others.

For that you have to derive your own skin class. So you can make that distinction in the drawing functions there.

My other question was how can i close a window not the entire application when the window opens in a different case? In the image you can see i have a button that says close in the test window it is the big close button how can i make that button close the test window but not the Updater window? I have made a case just for that to close the test window, but i dont know how to call that window in a different case.

i cant do window-> in a different case because it doesn't know what that is.

You can do window->remove() like for any gui-element. Or you can hide it. And well, you have to pass your window-pointer to the class that handles the events in that place where you get them.