GuiSkinnedButtonCtrl - A basic skinnable button control
by Rob Parton · 11/13/2006 (4:44 pm) · 8 comments
Download Code File
This was a quick and dirty implementation I did up since I noticed you couldn't have a skinned button with normal text on top of it already, as the GuiBitmapButtonCtrl doesn't let you add text. This allows you to specify one reusable background texture for your buttons and lets you configure the text on the button like you can with a normal GuiButtonCtrl.
Notes:
This button is configured to automatically adjust the vertical height to match that of the texture, as every example texture I tried to come up with looked pretty bad when it was scaled. This can also be seen as a feature if you want consistancy, as it enforces a single height for all buttons using that texture.
To use it, just add a new profile to your customProfiles.cs file in your /client/ui folder, and drop the example texture in the same folder:
Any feedback would be greatly appreciated!
This was a quick and dirty implementation I did up since I noticed you couldn't have a skinned button with normal text on top of it already, as the GuiBitmapButtonCtrl doesn't let you add text. This allows you to specify one reusable background texture for your buttons and lets you configure the text on the button like you can with a normal GuiButtonCtrl.
Notes:
This button is configured to automatically adjust the vertical height to match that of the texture, as every example texture I tried to come up with looked pretty bad when it was scaled. This can also be seen as a feature if you want consistancy, as it enforces a single height for all buttons using that texture.
To use it, just add a new profile to your customProfiles.cs file in your /client/ui folder, and drop the example texture in the same folder:
new GuiControlProfile (GuiSkinnedButtonProfile)
{
bitmap = "./buttonskin";
hasBitmapArray = true;
// font
fontType = "Arial";
fontSize = 14;
fontColor = "255 255 255";
fontColorHL = "255 255 255";
fontColorNA = "160 160 160";
fontColorSEL= "200 200 200";
justify = "center";
};Any feedback would be greatly appreciated!
About the author
#2
11/14/2006 (6:07 pm)
Kevin: it is similar with one difference: The GuiBitmapButtonTextCtrl is a single bitmap that resizes completely when you change the extents. This one has endcaps that do not resize, which lets you make longer buttons without having the entire button look out-of-sync by being stretched out (only the center span stretches). If you' have buttons that are all the same size, the GuiBitmapButtonTextCtrl works good, but if you have buttons with different widths where you want a uniform look, you can use this instead.
#3
Also, I've always thought that having the individual bitmap files was somewhat heavy-handed when we have the nifty-but-kinda-wonky bitmap arrays. (It makes more sense from the artist's view to keep everything in one file...) Does this control use bitmap arrays then? Also, does it still keep all the states, normal, highlight, etc.?
Merge this www.garagegames.com/mg/forums/result.thread.php?qt=25683 in, and we'd have one killer button resource! =)
11/15/2006 (5:15 pm)
Ah, okay... that makes some sense now; so it implements a button that works more like the guiWindowCtrl title bar...Also, I've always thought that having the individual bitmap files was somewhat heavy-handed when we have the nifty-but-kinda-wonky bitmap arrays. (It makes more sense from the artist's view to keep everything in one file...) Does this control use bitmap arrays then? Also, does it still keep all the states, normal, highlight, etc.?
Merge this www.garagegames.com/mg/forums/result.thread.php?qt=25683 in, and we'd have one killer button resource! =)
#4
I'm still adding stuff to the resource, thanks for the headsup on the masking thread, I'll look into that.
11/16/2006 (9:57 pm)
Yeah, it uses a bitmap array. I figured it was easier (I prefer it as one image anyway.) All the states are there as well, normal, highlight, disabled, depressed.I'm still adding stuff to the resource, thanks for the headsup on the masking thread, I'll look into that.
#5
11/18/2006 (11:29 pm)
Thank you for this, I'm sure our artist will be happy to simply do the array and let me know the font he's been using instead of endless buttons.
#6
11/19/2006 (6:11 pm)
James: This is the exact reason I did it in the first place. I was fed up with having to keep making buttons over and over. Way too time consuming.
#7
12/05/2006 (7:49 pm)
How's it lookin', Rob?
#8
The issue I'm running into is the displayed image doesn't show the depressed image after one of the radio buttons is pressed. (It doesn't stick in the "depressed" state, rather it pops back to "normal".)
I'm trying to use the GuiSkinnedButtonCtrl as a drop in replacement for some GuiBitmapButtonCtrl objects. As BitmapButtons, the controls stay "depressed" after clicking on them. My GuiSkinnedButtonCtrl's don't do this (the clicked button returns to displaying the "normal" state). This is using the resource's example bitmap array texture.
I've followed the execution through the code and the GuiSkinnedButtonCtrl objects seem to be running the same GuiButtonBaseCtrl base class methods as when they are implemented as GuiBitmapButtonCtrl objects, yet the displayed state doesn't seem to stay in the "depressed" image properly.
===========
Resolved:
Looking some more, the button logic was indeed all flowing correctly. The problem seems to be in the GuiSkinnedButtonCtrl::onRender method which doesn't have code similar to:
if (mDepressed || mStateOn) state = DEPRESSED;
as found in GuiBitmapButtonCtrl::onRender to draw the depressed state when mStateOn OR mDepressed is true.
I modified two lines in GuiSkinnedButtonCtrl::onRender to get the ToggleButton and RadioButton capability. See the lines commented //MVJ of the original resource that are changed to the lines below them in the code snippet below:
06/04/2007 (9:24 am)
Has anyone else had a problem getting this control to operate as a buttonType = "RadioButton"or "ToggleButton" ? The issue I'm running into is the displayed image doesn't show the depressed image after one of the radio buttons is pressed. (It doesn't stick in the "depressed" state, rather it pops back to "normal".)
I'm trying to use the GuiSkinnedButtonCtrl as a drop in replacement for some GuiBitmapButtonCtrl objects. As BitmapButtons, the controls stay "depressed" after clicking on them. My GuiSkinnedButtonCtrl's don't do this (the clicked button returns to displaying the "normal" state). This is using the resource's example bitmap array texture.
I've followed the execution through the code and the GuiSkinnedButtonCtrl objects seem to be running the same GuiButtonBaseCtrl base class methods as when they are implemented as GuiBitmapButtonCtrl objects, yet the displayed state doesn't seem to stay in the "depressed" image properly.
===========
Resolved:
Looking some more, the button logic was indeed all flowing correctly. The problem seems to be in the GuiSkinnedButtonCtrl::onRender method which doesn't have code similar to:
if (mDepressed || mStateOn) state = DEPRESSED;
as found in GuiBitmapButtonCtrl::onRender to draw the depressed state when mStateOn OR mDepressed is true.
I modified two lines in GuiSkinnedButtonCtrl::onRender to get the ToggleButton and RadioButton capability. See the lines commented //MVJ of the original resource that are changed to the lines below them in the code snippet below:
void GuiSkinnedButtonCtrl::onRender(Point2I offset, const RectI &updateRect)
{
bool bHighlight = mMouseOver;
//MVJ bool bDepressed = mDepressed;
bool bDepressed = mDepressed || mStateOn;
ColorI fontColor = mActive ? (bHighlight ? mProfile->mFontColorHL : mProfile->mFontColor) : mProfile->mFontColorNA;
RectI ctrlRect(offset, mBounds.extent);
// Figure out which bitmap index we start on
//MVJ int idm = mActive ? (bHighlight ? (bDepressed ? ButtonStateDepressed: ButtonStateHilite) : ButtonStateNormal) : ButtonStateNotActive;
int idm = mActive ? (bHighlight ? (bDepressed ? ButtonStateDepressed: ButtonStateHilite) : (bDepressed ? ButtonStateDepressed: ButtonStateNormal)) : ButtonStateNotActive;
idm *= 3; 
Torque 3D Owner Kevin Rogers