How do you make an image transparent on a button?

[trnrez]

I want to use images for buttons but I want them to appear to be translucent. The issue is that when I use _gui->getSkin()->setColor(...) it does nothing to the images. It makes text and sliders and buttons translucent but the image remains the same. Any help would be awesome.

Code: Select all

// create a button
gui::IGUIButton *b1 = _gui->addButton(core::rect<s32>(0,0,128,128));

//remove the border of the button.
b1->setDrawBorder(false);
// set the image
b1->setImage(device->getVideoDriver()->getTexture("../../media/button1.png"));
// use the alpha channel so we get no background
b1->setUseAlphaChannel(true);

I then go through all of the items in the gui and set the alpha value to 150 so they appear translucent:

Code: Select all

// loop through all items and set alpha to 150
for (s32 i=0; i<gui::EGDC_COUNT ; ++i)
{
  video::SColor col = _gui->getSkin()->getColor((gui::EGUI_DEFAULT_COLOR)i);
	col.setAlpha(150);
  _gui->getSkin()->setColor((gui::EGUI_DEFAULT_COLOR)i, col);
}

I could just do a _gui->addimage(...) and set the translucentness of the image but it would be nicer to use the already written button functionality so I don't have to rewrite what has already been done.

Screenshot:
Left is a button with an image on it and right is a plain button. Both have the _gui->getSkin()->setColor(...) applied to them with a 100 alpha. The left has no change and the right is see through.

[trnrez]

Perhaps not the best way but I have fixed this by editing the engine itself.

In case anyone else wants to do this here is what I did:

Added another EGUI_DEFAULT_COLOR to IGUISkin.h

Code: Select all

enum EGUI_DEFAULT_COLOR
{
  ...
  //! The image on a button
  EGDC_BUTTON_IMAGE,
  ....
}

Gave the new color some default value in CGUISkin.cpp

Code: Select all

if (	(Type == EGST_WINDOWS_CLASSIC) |
			(Type == EGST_WINDOWS_METALLIC)
		)
{
  ...
  // I make the color solid white because that was its hard coded value in
  // the button draw() function.
  Colors[EGDC_BUTTON_IMAGE]     = video::SColor(255,255,255,255);
  ...
}

Now we simply apply that into CGUIButton.cpp draw() function:

Code: Select all

void CGUI::Button::draw()
{
  ...
  // Change the driver->draw2DImage to use our new color. Do this for
  // both image and pressedimage.
  driver->draw2DImage(Image, pos, ImageRect, &AbsoluteClippingRect, 
        skin->getColor(EGDC_BUTTON_IMAGE), UseAlphaChannel);
  ...
}

If you want full sources of these let me know. Now if I use the method as stated before the button image will now be just as transparent as the button

Edit:
Screenshot -

[hybrid]

I'll move this to bug forum for bitplane to have a look at it. Maybe you can create a patch with TortoiseSVN and upload it to the patch tracker here
http://sourceforge.net/tracker/?group_i ... tid=540678

[Virion]

just drop by to say thanks

[trnrez]

I wanted to see if anyone would like me to take this feature a step further or leave it be.

I think it would be really awesome if every entity could have separate transparency. For instance, I have two buttons but each button can have a separate transparent value. Similar to how EQ did their UI, each window pane could have a separate transparency level.

If others think this would be beneficial I will dig deeper into the GUI and add a transparent value to all GUI items (Buttons, Check Boxes, etc...) with proper accessors/modifiers.

Example of EQ inteface. Some window panes are transparent while others arent.
http://img152.imageshack.us/img152/4982/30698851fu7.png

[rogerborg]

That sounds like a useful feature, if you can get it working robustly.

[Dorth]

So a whole SColor for each gui elements to taint them and make them transparent while we're there?

[trnrez]

So a whole SColor for each gui elements to taint them and make them transparent while we're there?

That is pretty much the route I was thinking of going.