2 Pictures With Border highlight

[lucifer1101]

Hi i need some help, im looking to have 2 pictures displayed (2d only) and whenever the mouse goes over them it will display a yellow line around it.

Will i need to create a custom scene node, and if so how?

i know i will need to go over the csn tutorial but is there anything else you can tell me...

[vitek]

If it is 2D only, you probably want to do a gui element, not a scene node. There isn't an example that shows how to create a custom gui element, but you shouldn't have to much trouble copying and renaming IGUIImage/CGUIImage.

Once you have your own gui element, you just need to write accessors and mutators for the hightlight color, the additional code to draw the highlight when the mouse is over the image, and the code to serialize the highlight color (if you want to serialize the gui elements).

Travis

[lucifer1101]

im kinda new to this and have no idea how i would do that, i do already have my images placed into the render screen though..

[skumar]

hi,
The easiest way is to have two images - one normal and other with the highlight. When the mouse is over make normal one invisible and the other visible. When mouse leaves, changeover.....

[lucifer1101]

i can see your point for this but doubling up on images is not good when dealing with bigger games, even though what im doing is only small its not a good method to get used to

EDIT: i just had the idea to just put the highlight picture on top with the cenetr transparent.

[lucifer1101]

i have just been doing a bit of testing with icursor control

this is what i get

Code: Select all

int mp = device->getCursorControl()->getPosition();

// if mouse < x-320
if(mp <= 0,320)
{
	driver->draw2DImage(sprite, rect<s32>(144,224,176,256),
		rect<s32>(0,0,32,32), 0, 0, true);
}

// if mouse > x-320
if(mp >= 0,320)
{
	driver->draw2DImage(sprite, rect<s32>(464,224,496,256),
		rect<s32>(0,0,32,32), 0, 0, true);
}

but it doesnt seem to work

i think it has something to do with the variable int mp.....

any help is welcomed and appreciated

[vitek]

No, it has to do with your bad code... The following is not doing what you think it is...

Code: Select all

if(mp <= 0,320)

The comma in there is actually a c++ operator. It tells the compiler that there are two expressions here, one on the left, and one on the right. The result of the expression is the subexpression on the right, so the condition always evaluates to 320 (which is true).

It looks like you're new to C/C++. If this is so, you're making things much more difficult for yourself by trying to write all of the logic for what you want. At the very least, you should take advantage of the Irrlicht gui to do some of the work for you. If you have two images and you want to display them and you want to highlight the one that the mouse is over, you could easily do it with this...

Code: Select all

#include <irrlicht.h> 
using namespace irr; 

void IGUIElement_drawBorder (video::IVideoDriver* driver, gui::IGUIElement* element, video::SColor color)
{
    const core::rect<s32> absolute_rect(element->getAbsoluteClippingRect());

    const core::position2di top_right (absolute_rect.LowerRightCorner.X, absolute_rect.UpperLeftCorner.Y);
    const core::position2di bot_left  (absolute_rect.UpperLeftCorner.X, absolute_rect.LowerRightCorner.Y);

    driver->draw2DLine(absolute_rect.UpperLeftCorner, top_right, color);
    driver->draw2DLine(absolute_rect.UpperLeftCorner, bot_left, color);
    driver->draw2DLine(absolute_rect.LowerRightCorner, top_right, color);
    driver->draw2DLine(absolute_rect.LowerRightCorner, bot_left, color);
}

int main() 
{ 
    IrrlichtDevice* device = createDevice(video::EDT_OPENGL); 

    if (device == 0) 
        return 1; // could not create selected driver.              

    video::IVideoDriver* driver = device->getVideoDriver(); 
    scene::ISceneManager* smgr = device->getSceneManager(); 
    gui::IGUIEnvironment* gui = device->getGUIEnvironment();
    gui::ICursorControl* cursor = device->getCursorControl();

    scene::ICameraSceneNode* camera =
        smgr->addCameraSceneNode(0);

    gui::IGUIImage* image1 = gui->addImage(core::rect<s32>(10, 10, 70, 70), 0, -1, L"image1");
    image1->setImage(driver->getTexture("../../media/particlered.bmp"));
    image1->setScaleImage(true);

    gui::IGUIImage* image2 = gui->addImage(core::rect<s32>(10, 80, 70, 140), 0, -1, L"image2");
    image2->setImage(driver->getTexture("../../media/particlered.bmp"));
    image2->setScaleImage(true);

    while(device->run()) 
    { 
        if (driver->beginScene(true, true, video::SColor(255, 40, 40, 40)))
        {
            smgr->drawAll();

            gui->drawAll(); 

            const core::position2di point = cursor->getPosition();

            if (image1->isPointInside(point))
                IGUIElement_drawBorder(driver, image1, video::SColor(255, 255, 255, 0));
            else if (image2->isPointInside(point))
                IGUIElement_drawBorder(driver, image2, video::SColor(255, 255, 255, 0));

            driver->endScene(); 
        }
    } 

    device->drop(); 

    return 0; 
} 

If you want to highlight more things than just these two images, you should consider wrapping up some of the code so you don't have to explicitly check each thing you want to highlight.

Travis

[lucifer1101]

ok thankyou heaps, that worked perfectly just had to adjust the images a bit.

is there any way that i can add a border width, like instead of it being set to 1px i could maybe have

Code: Select all

void IGUIElement_drawBorder (video::IVideoDriver* driver, gui::IGUIElement* element, video::SColor color, /* width */)

i had a look at the api and draw2dline doesnt have support for width, but if there is any way to add it. Its not too important.

[vitek]

Sure. You just need to replace the draw2DLine() calls with draw2DRectangle() calls. Instead of providing a start and end point for the lines, you provide a rectangle that you want to fill.

Travis

[Acki]

wasn't there also a material setting (thicknes) for 2d objects ???

[bitplane]

wasn't there also a material setting (thicknes) for 2d objects ???

No, that's for 3D objects and it isn't implemented in all drivers (missing in D3D, there's a bug on the tracker about it)