Making buttons do stuff

[Asimov]

Hi all,

I read the gui interface tutorial. Again one of those tutorials that try and do everything, but don't explain much.
I got two buttons to show on screen. I have to admit they are not very pretty buttons, but they show, and they don't do a lot.

Ok once I got the buttons on the screen I wanted them to do something. Now MyEventreciever class is already in a separate file, and so I went about adding my button code to that class, and yey behold my buttons appear on the screen. The question is how do I get them to work. I think I am missing the context, thing because if I comment out the context line the game runs, but the buttons don't actually do anything, but if I put it in it complains about scope. Now I know why it is complaining. It is because I haven't set up the context thing, and the thing is I don't know how to.

Now I can pretty much grasp C++ but I am having trouble getting engine stuff to work.

For instance I can never work out when to use irr::core irr::scene irr:video.
I can sometimes guess the right one based on it's function, but very often have to go through all of them until it works heh heh.

OK code follows.
First my header file

Code: Select all

#pragma once
#ifndef MYEVENTRECEIVER_H
#define MYEVENTRECEIVER_H
 
#include "irrlicht.h"
 
struct SAppContext
{
    irr::IrrlichtDevice *device;
    irr::s32 counter;
};
enum
{
    GUI_ID_HELLO_BUTTON = 101,
    GUI_ID_ANOTHER_BUTTON = 102
};
 
class MyEventReceiver : public irr::IEventReceiver
{
    public:
        MyEventReceiver();
//        MyEventReceiver(SAppContext & context) : Context(context) { }
        virtual bool OnEvent(const irr::SEvent& event);
        virtual bool IsKeyDown(irr::EKEY_CODE keyCode) const;
        void Buttons(irr::IrrlichtDevice *device);
 
    private:
        bool KeyIsDown[irr::KEY_KEY_CODES_COUNT];
         irr::gui::IGUIEnvironment* env;
 
};
 
#endif // MYEVENTRECEIVER_H
 

And now my cpp file

Code: Select all

#include "MyEventReceiver.h"
 
using namespace irr;
 
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;
 
 
 
MyEventReceiver::MyEventReceiver()
{
 
    for (irr::u32 i=0; i<irr::KEY_KEY_CODES_COUNT; ++i)
            KeyIsDown[i] = false;
}
 
 bool MyEventReceiver::OnEvent(const irr::SEvent& event)
    {
        // Remember whether each key is down or up
        if (event.EventType == irr::EET_KEY_INPUT_EVENT)
            KeyIsDown[event.KeyInput.Key] = event.KeyInput.PressedDown;
 
 
        if (event.EventType ==  EET_GUI_EVENT)
        {
            s32 id = event.GUIEvent.Caller->getID();
//           env = Context.device->getGUIEnvironment();
            switch(event.GUIEvent.EventType)
            {
                 case GUI_ID_HELLO_BUTTON:
                printf("Hey Hello There");
                    return true;
 
                    case GUI_ID_ANOTHER_BUTTON:
                printf("Hey Hello There");
                    return true;
                default:
                    return false;
            }
        }
        return false;
    }
 
// This is used to check whether a key is being held down
    bool MyEventReceiver::IsKeyDown(irr::EKEY_CODE keyCode) const
    {
        return KeyIsDown[keyCode];
    }
 
 
void MyEventReceiver::Buttons(IrrlichtDevice *device)
{
    env = device->getGUIEnvironment();
     float x=10,y=560;
    env->addButton(rect<s32>(x,y,x+100,y+30), 0, GUI_ID_HELLO_BUTTON,L"Hello", L"There");
    x=130;
    env->addButton(rect<s32>(x,y,x+100,y+30), 0, GUI_ID_ANOTHER_BUTTON,L"Another Button", L"There");
}
 

[Mel]

The event system is... to say the least... uncommon, most of the libs i know attach event handlers to the gui elements for specific events (OnPress, OnRelease, OnHover...) so the events are bound to them, not independent, but what Irrlicht does is to perform a general event catch, and dispatch a generic event you can process on your own later, just the way Irrlicht works, more or less, the other way around. So? How does the event system works? implementing an IEventReceiver interface and attaching it to the Irrlicht device. The device just calls the "OnEvent" method whenever an event happens, and that's it.

"My button doesn't work"

First, your button must be from the irr::gui::IGUIButton class to work.
Second, your button needs an UNIQUE ID so you can recognize it in the event receiver later.
Third, you must attend the type of event that has happened in your event receiver ( GUI, Keyboard, Mouse, Controller, Logger or user defined) This is on the SEvent struct EventType attribute.

When you have a GUI event, the Event structure contains the pointer to the GUI element that has caused the event, thus, you must check its ID, and if it corresponds to the ID of the button you created, then, you execute the code you want for the button and you're done. In a nutshell. As you may imagine, you have to create code for every element you create on the event handler (... talk about monolithic code...) so it may become pretty big, if you don't create (on your own) any sort of modular event handler.

[CuteAlien]

You don't need the context thing if you don't need it. It's just one way to pass some variables, but as you don't use them you don't need it.

I suspect the problem is likely that you don't tell Irrlicht about your eventreceiver. You can do that with IrrlichtDevice->setEventReceiver or directly in createDevice or createDeviceEx.

For finding the correct namespaces you have to look at the documentation (at least for the start, after a while you remember most of it): http://irrlicht.sourceforge.net/docu/namespaces.html

[Asimov]

Hi Mel,

My buttons do have a unique id. It is in the enum. I read with interest your post, but being a beginner I didn't necesarily understand it all. Hope you don't mind.

@CuteAlien:
I thought I had set my event receiver in the createdevice. Wait I will snip the code from my man.cpp which does it. All my keyboard events work, it is just the button events that don't.
I initialise the class with this

Code: Select all

MyEventReceiver receiver;

Then I load it in like this

Code: Select all

IrrlichtDevice *device = createDevice(EDT_DIRECT3D9, dimension2d<u32>(800, 600),32, false, true, false, &receiver);

Then I obviously run my button code in the eventreciever. I pass in the IrrlichtDevice *device because this line won't work otherwise env = device->getGUIEnvironment();

Code: Select all

receiver.Buttons(device);

I know I must be missing something.

I suppose I can modify these buttons? eg have rounded buttons, or use image buttons?
The text is tiny at the moment as well, but I will be happy to have functioning buttons at first.

Before a tree grows I have to plant the seeds heh heh

[CuteAlien]

Ah yes, I see the problem.

After "switch(event.GUIEvent.EventType)" your cases check for the ID already instead of for the EventType. You need a "case EGET_BUTTON_CLICKED" to check if it's a button-click.

After that you can check for it's in a switch(id) - or you can use if checks. Or you can remember pointers to the gui-elements when you create them, then you don't need ID's at all but you can compare the event.GUIEvent.Caller element to those pointers.

Passing the receiver like you described is correct. Just be careful that it stays valid for the whole device life-time when you create that object on the stack like that.

Check the Button documentation for how to use images on top of buttons: http://irrlicht.sourceforge.net/docu/cl ... utton.html
Note that you have more options there if you use svn trunk. In 1.8 you could only set images for button pressed and not pressed. While with newer Irrlicht you can also set images for mouse-over and focused states.

[Asimov]

Hi CuteAlien,

Thanks you solved the problem. I suppose after a while of using the engine I will get used to some of these things.
At the moment I am happy I have got the buttons to do something. I am not sure what functions each button will have at the moment, but I am sure I will be needing buttons in the game.
I don't even care that they don't look too good at the moment, as I want to get the functionality working first and then I can concentrate on making things look good later.

Now I got buttons to work, I can go back to completing my board in illustrator heh heh.

I was almost on the point of using mouse coordinates to define my buttons. I have used this technique in SDL in 2D and also in directx programming too, but that approach doesn't scale too well.

Here is the completed code that works

Code: Select all

bool MyEventReceiver::OnEvent(const irr::SEvent& event)
    {
        // Remember whether each key is down or up
        if (event.EventType == irr::EET_KEY_INPUT_EVENT)
            KeyIsDown[event.KeyInput.Key] = event.KeyInput.PressedDown;
 
        if (event.EventType ==  EET_GUI_EVENT)
        {
            s32 id = event.GUIEvent.Caller->getID();
 
            switch(event.GUIEvent.EventType)
            {
                case EGET_BUTTON_CLICKED:
                {
                    switch(id)
                    { case GUI_ID_HELLO_BUTTON:
                    printf("Hey Hello There\n");
                        return true;
 
                         case GUI_ID_ANOTHER_BUTTON:
                    printf("This is working\n");
                        return true;
 
                        default:
                        return false;
 
                    }
                }
            }
        }
        return false;
    }

[Asimov]

Hi CuteAlien,

I looked at the documentation in the llink, but I always have trouble understanding the documentation.
I took my line

Code: Select all

env->addButton(rect<s32>(x,y,x+100,y+30), 0, GUI_ID_ANOTHER_BUTTON,L"Another Button", L"There");

and added

Code: Select all

->setDrawBorder(true);

So I had this

Code: Select all

 env->addButton(rect<s32>(x,y,x+100,y+30), 0, GUI_ID_ANOTHER_BUTTON,L"Another Button", L"There")->setDrawBorder(true);

It compiled and run ok, but I saw no border on the button. Am I reading the instructions wrong?

[CuteAlien]

Yeah, seems correct, but I think borders are default. So you see the difference when setting it to false. Which generally makes mostly sense if you want to do the drawing yourself in some other way (in which case borders are in the way and also border drawing is noticably slow on some devices).

Btw. it's more common to save the result of addButton into a variable of type IGUIButton* and then work with that variable instead of chaining functions like you did.

[Asimov]

Hi CuteAlien,

You are right. When I set it to false the button disappeared and only left the text, so it is like an invisible button. Very handy if I wanted to use a graphic rather than a button.
Only thing with using IGUIButton the intellisense in code::blocks don't work heh heh.

Code: Select all

   IGUIButton* bb=env->addButton(rect<s32>(x,y,x+100,y+30), 0, GUI_ID_ANOTHER_BUTTON,L"Another Button", L"There");
    bb->setDrawBorder(false);

Hey I have been playing with getting different looks with the buttons, and I found out you can use images quite easily, and you can use png images. Also worked out how to get transparency.
My code is a bit of a mess, because I am trying out lots of things, but I would tidy it up when I get to use these in my game.

Also I didn't know you could have another instance of the video::IVideoDriver* driver = device->getVideoDriver(); inside a class, as well as in main. Is this ok to do this, or will it cause problems?
I know I could pass it in if I needed to. I was wondering if there is a downside to this.

Code: Select all

 video::IVideoDriver* driver = device->getVideoDriver();
    env = device->getGUIEnvironment();
     float x=10,y=500;
    IGUIButton* pound = env->addButton(rect<s32>(x,y,x+160,y+70), 0, GUI_ID_HELLO_BUTTON,L"Hello", L"There");
    x=150;
    y=y-50;;
 
    video::ITexture* car = driver->getTexture("data/car.jpg");
    video::ITexture* symbol = driver->getTexture("data/pound.png");
    IGUIButton* bb=env->addButton(rect<s32>(x,y,x+120,y+80), 0, GUI_ID_ANOTHER_BUTTON,L"Another Button", L"There");
    bb->setDrawBorder(false);
    bb->setImage    (car);
    pound->setImage(symbol);
    pound->setDrawBorder(false);
    pound->setUseAlphaChannel   (true);

Here are two buttons I created for test purposes. They won't actually be in my game. Hmm I wonder if you can scale the image to fit the button. That way I can use much higher resolution images for when the screen is scaled. I am actually now quite impressed with the power of these buttons.

[CuteAlien]

Check the plugins in c::b, I remember the default intellisense stuff wasn't so good, but there is one plugin which is disabled by default which improves it a lot (don't know plugin name, I'm on the wrong computer right now... just hanging around with Laptop 'cause I couldn't sleep ^^).

Don't worry about device->getVideoDriver(), that just is a pointer, not creating an object instance. As long as the object itself is intact (aka the device exists) you can always have as many pointers to it as you want and pass them around. It's basically a matter of taste if you prefer to pass around the device pointer or the pointer to the video driver. One way you have to type more, the other way you can restrict access of your classes more which can make understanding classes easier (driver is more restricted than device thereby reading the class you know only driver is needed while a device pointer gives your class access to everything in Irrlicht).

Scaling image to button-size with the setScaleImage function.

Note that IGUIButton is derived from IGUIElement so you can also use all functions from there.

[Asimov]

Hi CuteAlien,

I wondered if it was possible to use the key checking outside of the event class. Because I don't want to put lots of code inside a class for detecting keypresses and button presses.
So I tried this. It works, but I suspect there is a better way to do it.

I made an int to store the keypress and then I made a function to return it.
so in my header file I put int=buttoncode;

Then in the event class I have

Code: Select all

<snip>
 switch(event.GUIEvent.EventType)
            {
                case EGET_BUTTON_CLICKED:
                {
                    switch(id)
                    { case GUI_ID_HELLO_BUTTON:
                    printf("Hey Hello There\n");
                    buttoncode=GUI_ID_HELLO_BUTTON;
                        return true;
 
                         case GUI_ID_ANOTHER_BUTTON:
                    printf("This is working\n");
                    buttoncode=GUI_ID_ANOTHER_BUTTON;
                        return true;
 
                         case GUI_ID_TAXI_BUTTON:
                    printf("A Taxi Cab\n");
                    buttoncode=GUI_ID_TAXI_BUTTON;
                        return true;
 
                        default:
                             buttoncode=0;
                        return false;
 
                    }
                }
            }
 

Then I made a function to return the code

Code: Select all

int MyEventReceiver::ButtonCode()
{
    return(buttoncode);
}
 

Now I can read my buttonpress outside the event class. At the moment I doing it in main.cpp, but later I could do it in any other class.
In main.cpp I have this to change the camera.

Code: Select all

if(receiver.ButtonCode()==GUI_ID_HELLO_BUTTON) smgr->setActiveCamera(grenade.camera);
    if(receiver.ButtonCode()==GUI_ID_ANOTHER_BUTTON) smgr->setActiveCamera(camera[1]);
     if(receiver.ButtonCode()==GUI_ID_TAXI_BUTTON) smgr->setActiveCamera(camera[0]);
 

I am wondering if there is a more efficient way to do this?
Now this works, and I can access whether a button is pressed in any class, but I bet it is not the best way.

[CuteAlien]

No idea what the best way is. You can also call other event-receivers from a base receiver. Or code some register functions.
Your solution more or less works by reducing events to a single event (you can only check the last one this way and you don't know if it was new).

My solution is generally to group buttons into dialogs. So for example highscore is one dialog and main-menu one dialog and ingame-hud another dialog. And for example the active dialog's event-receiver is then called from a general base event receiver.

Kinda depends how complex your game will be. For simple games a single event-receiver might be the easiest solution.
For a few other ideas, here's some old posts of mine where I described other solutions (might be a little down in the thread).
Multiple event receivers: http://irrlicht.sourceforge.net/forum/v ... =4&t=26176
Using functors which work on an per-event basis (I think I describe the same in both posts): http://irrlicht.sourceforge.net/forum/v ... =1&t=27585
http://irrlicht.sourceforge.net/forum/v ... =2&t=14545

[Asimov]

Hi CuteAlien,

I am not sure how to make a dialog. I will look at your link when I get a spare five minutes.
I have now tidied up the code a lot. eg putting the correct parts in the header, and cpp file, as well as making things neater to make it easier to follow later.
Also made some nice 3d dice in max, for the button. Even though I won't be making a full screen version yet I am keeping it in mind. I have designed all buttons at 200x200px even though in game at the moment I am scaling them down to 80x80px. Which means I won't lose quality when I use a larger screen.

Now here is my new header file

Code: Select all

#pragma once
#ifndef MYEVENTRECEIVER_H
#define MYEVENTRECEIVER_H
 
#include "irrlicht.h"
 
struct SAppContext
{
    irr::IrrlichtDevice *device;
    irr::s32 counter;
};
enum
{
    GUI_ID_DICE_BUTTON = 101,
    GUI_ID_TRADE_BUTTON = 102,
    GUI_ID_MANAGEHOUSES_BUTTON = 103,
    GUI_ID_NOTSUREYET_BUTTON = 104
};
 
class MyEventReceiver : public irr::IEventReceiver
{
    public:
        MyEventReceiver();
//        MyEventReceiver(SAppContext & context) : Context(context) { }
        virtual bool OnEvent(const irr::SEvent& event);
        virtual bool IsKeyDown(irr::EKEY_CODE keyCode) const;
        void Checkkeys(MyEventReceiver receiver,const irr::f32 frameDeltaTime,float *rotation);
        void Buttons(irr::IrrlichtDevice *device);
        int ButtonCode();
 
    private:
        bool KeyIsDown[irr::KEY_KEY_CODES_COUNT];
         irr::gui::IGUIEnvironment* env;
         int buttoncode;
         float x,y,bsize;
         irr::gui::IGUIButton* diceButton;
         irr::gui::IGUIButton* tradeButton;
         irr::gui::IGUIButton* managehousesButton;
         irr::gui::IGUIButton* notsureyetButton;
 
};
 
#endif // MYEVENTRECEIVER_H
 

And my tidier cpp file

Code: Select all

#include "MyEventReceiver.h"
 
using namespace irr;
 
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;
 
 
 
MyEventReceiver::MyEventReceiver()
{
 
    for (irr::u32 i=0; i<irr::KEY_KEY_CODES_COUNT; ++i)
            KeyIsDown[i] = false;
}
 
 bool MyEventReceiver::OnEvent(const irr::SEvent& event)
    {
        // Remember whether each key is down or up
        if (event.EventType == irr::EET_KEY_INPUT_EVENT)
            KeyIsDown[event.KeyInput.Key] = event.KeyInput.PressedDown;
 
        if (event.EventType ==  EET_GUI_EVENT)
        {
            s32 id = event.GUIEvent.Caller->getID();
 
            switch(event.GUIEvent.EventType)
            {
                case EGET_BUTTON_CLICKED:
                {
                    switch(id)
                    { case GUI_ID_DICE_BUTTON:
                    printf("Hey Hello There\n");
                    buttoncode=GUI_ID_DICE_BUTTON;
                        return true;
 
                         case GUI_ID_TRADE_BUTTON:
                    printf("This is working\n");
                    buttoncode=GUI_ID_TRADE_BUTTON;
                        return true;
 
                     case GUI_ID_MANAGEHOUSES_BUTTON:
                    printf("This is working\n");
                    buttoncode=GUI_ID_MANAGEHOUSES_BUTTON;
                        return true;
 
                         case GUI_ID_NOTSUREYET_BUTTON:
                    printf("This is working\n");
                    buttoncode=GUI_ID_NOTSUREYET_BUTTON;
                        return true;
 
 
                        default:
                             buttoncode=0;
                        return false;
 
                    }
                }
            }
        }
        return false;
    }
 
// This is used to check whether a key is being held down
    bool MyEventReceiver::IsKeyDown(irr::EKEY_CODE keyCode) const
    {
        return KeyIsDown[keyCode];
    }
 
 
void MyEventReceiver::Buttons(IrrlichtDevice *device)
{
    video::IVideoDriver* driver = device->getVideoDriver();
    video::ITexture* square = driver->getTexture("data/square.png");
    video::ITexture* dice = driver->getTexture("data/buttondice.png");
 
    env = device->getGUIEnvironment();
    x=10,y=80,bsize=80;
    diceButton = env->addButton(rect<s32>(x,y,x+bsize,y+bsize), 0, GUI_ID_DICE_BUTTON,L"", L"");
    diceButton->setScaleImage(true);
    diceButton->setImage(dice);
    diceButton->setDrawBorder(false);
    diceButton->setUseAlphaChannel  (true);
    y=y+100;
    tradeButton = env->addButton(rect<s32>(x,y,x+bsize,y+bsize), 0, GUI_ID_TRADE_BUTTON,L"", L"");
    tradeButton->setScaleImage(true);
    tradeButton->setImage(square);
    tradeButton->setDrawBorder(false);
    tradeButton->setUseAlphaChannel(true);
    x=710,y=80;
    managehousesButton = env->addButton(rect<s32>(x,y,x+bsize,y+bsize), 0, GUI_ID_MANAGEHOUSES_BUTTON,L"", L"");
    managehousesButton->setScaleImage(true);
    managehousesButton->setImage(square);
    managehousesButton->setDrawBorder(false);
    managehousesButton->setUseAlphaChannel(true);
    y=y+100;
    notsureyetButton = env->addButton(rect<s32>(x,y,x+bsize,y+bsize), 0, GUI_ID_NOTSUREYET_BUTTON,L"", L"");
    notsureyetButton->setScaleImage(true);
    notsureyetButton->setImage(square);
    notsureyetButton->setDrawBorder(false);
    notsureyetButton->setUseAlphaChannel(true);
 
}
int MyEventReceiver::ButtonCode()
{
    return(buttoncode);
}
 

And finally my button layout in the game. There will be more than this. These are just the main four buttons in the game.

[CuteAlien]

With "dialog" I just meant the way I group gui-elements. You can use another word for it as long as it means - "some kind a group of gui-elements which belong together" :-). And I create one class per such a group. All gui-elements in the main-menu for example I might put in a class I call DialogMainMenu. And because there are some similarities beween such classes I derive them from a base-class (for example CDialog or IDialog or GUIDialog ... whatever I feel like naming it). Just an architecture hint which turned out to be useful. And that base-class has then for example an OnEvent function and I make sure I pass on events to it whenever it is active/visible. And the base-class also usually has an invisible background gui-element as parent (for example IGUIStaticText without borders) which I use to group the rest of the elements. That's also just something which turned out to be useful to do,. That way I can for example make all gui-element in that group invisible together by calling setVisible on the backround element. Or remove them with a single call.

[Asimov]

HI CuteAlien,

Ahh I see so you are using dialog to mean a group of functions. Now what you have said interests me, because I will be wanting to build a menu, to start the game, and it makes sense to be able to turn the whole thing off in one go.

When I did the directx stuff it was easy, because if you stop drawing something it isn't there, but I believe with irrlicht you have to make it invisible, so attaching all my stuff to one gui is a good idea.

So here comes the questions. I presume I can put bool MyEventReceiver::OnEvent(const irr::SEvent& event) in many classes then, and it won't hurt? Because now I am thinking of building a menu class like you suggested.

My other question is this how do I add my buttons to a parent element? Because I think I need to do this with my current buttons, as when the menu is showing I don't want my buttons showing.

I am going to set up a fixed camera for the menu, and when the game starts it will zoom into the board and start the game.

One more question. I want to fade out my menu first, before making it invisible, is this possible?