Game Development Community

dev|Pro Game Development Curriculum

Skin the thumb slider control

by Brandon Maness · 02/01/2006 (5:00 pm) · 2 comments

The zip contains everything you will need to get the new thumb slider working. Adding this modification is pretty straight forward, the readme.txt in the zip contans the instructions.

Download the zip file here: torque.smdlabs.com/content/thumbSlider.zip

Here is a screen shot of the skinned sliders; NOTE that the skin image size is 10x20 pixels

torque.smdlabs.com/content/jan06_pic3.jpg



If you just want the changes, and don't like replacing your files, here you go:


To install this resource, backup and replace ./engine/gui/controls/guiSliderCtrl.cc,
and guiSliderCtrl.h located in the same folder with the ones incuded in this zip.
Recompile TGE, and make the script changes below.

Our new skinned thumb slider needs to know somethings about how it should look, so:

And this to ./example/common/ui/defaultProfiles.cs around line 215

The first line was the original one, so comment it out, and paste the new ones after it.

//if(!isObject(GuiSliderProfile)) new GuiControlProfile (GuiSliderProfile);
if(!isObject(GuiSliderProfile)) new GuiControlProfile (GuiSliderProfile)
{
   // font under slider control
   fontType = "Arial";
   fontSize = 12;
   fontColor = "240 240 240";

   // thumb slider color used if no bitmap defined
   opaque = false;
   fillColor = "180 180 180"; //slider thumb color
   fillColorHL = "158 158 158";
   fillColorNA = "170 170 170";
   bitmap = "./osxSlider"; //located in the common/ui folder
   //bitmap = ""; //set bitmap to "" for the old thumb slider
};



If you want a mod like starter.fps to override the settings above, then add this to ./example//client/customProfiles.cs

new GuiControlProfile (GuiSliderProfile)
{
   // font under slider control
   fontType = "Arial";
   fontSize = 12;
   fontColor = "240 240 240";

   // thumb slider color used if no bitmap defined
   opaque = false;
   fillColor = "180 180 180"; //slider thumb color
   fillColorHL = "158 158 158";
   fillColorNA = "170 170 170";
   bitmap = "./ui/osxSlider"; //located in the client/ui folder
   //bitmap = ""; //set bitmap to "" for the old thumb slider
};





If you are running a modified guiSliderCtrl.cc file, and don't want to copy and paste the ones I've included, then here
are the specific changes.

In ./engine/gui/controls/guiSliderCtrl.h add the following:

Around line 28
StringTableEntry mBitmapName; //smd
   TextureHandle mTextureNormal; //smd

And inside public: around line 40
void setBitmap(const char *name); //smd



In the ./engine/gui/controls/guiSliderCtrl.cc file add the following:

In GuiSliderCtrl::GuiSliderCtrl around line 27
GuiSliderCtrl::GuiSliderCtrl(void)
{
	mActive = true;
   mRange.set( 0.0f, 1.0f );
   mTicks = 10;
   mValue = 0.5f;
   mThumbSize.set(8,20);
   mShiftPoint = 5;
   mShiftExtent = 10;
   mDisplayValue = false;
   mBitmapName = StringTable->insert(""); //smd
   mBounds.extent.set(10, 20); //smd

}

In GuiSliderCtrl::initPersistFields around line 33
addField("bitmap", TypeFilename, Offset(mBitmapName, GuiSliderCtrl)); //smd


Around line 58 after GuiSliderCtrl::setScriptValue
//smdBegin
void GuiSliderCtrl::setBitmap(const char *name)
{
   mBitmapName = StringTable->insert(name);
   if(!isAwake())
      return;

   if (*mBitmapName)
   {
      char buffer[1024];
      char *p;
      dStrcpy(buffer, name);
      p = buffer + dStrlen(buffer);

      mTextureNormal = TextureHandle(buffer, BitmapTexture, true);
   }
   else
   {
      mTextureNormal = NULL;
   }
   setUpdate();
}
//smdEnd

In GuiSliderCtrl::onWake Around line 95 add
setActive(true); //smd
   setBitmap(mProfile->mBitmapName); //smd


And at the very bottom of the file, just replace GuiSliderCtrl::onRender and add the console method below it.
void GuiSliderCtrl::onRender(Point2I offset, const RectI &updateRect)
{
   Point2I pos(offset.x+mShiftPoint, offset.y);
   Point2I ext(mBounds.extent.x - mShiftExtent, mBounds.extent.y);
   Point2I mid;
   if (mBounds.extent.x >= mBounds.extent.y)
	   mid.set(ext.x, ext.y/2);
   else
	   mid.set(ext.x/2, ext.y);

      if(mDisplayValue)
         mid.set(ext.x, mThumbSize.y/2);

      glColor4f(0, 0, 0, 1);
      glBegin(GL_LINES);
         // horz rule
         glVertex2i(pos.x,       pos.y+mid.y);
         glVertex2i(pos.x+mid.x, pos.y+mid.y);

		 S32 smdEndPoint = pos.x+mid.x; //smd

         //smdBegin
	 //tick marks
         for (U32 t = 0; t < (mTicks+1); t++)
         {
			S32 x = (S32)(F32(mid.x-1)/F32(mTicks+1)*F32(t));
			if(t == 0)
			{
				glVertex2i(pos.x+x, pos.y+mid.y-mShiftPoint-1);
				glVertex2i(pos.x+x, pos.y+mid.y+mShiftPoint);
			}
			else
			{
				glVertex2i(pos.x+x, pos.y+mid.y-(mShiftPoint-2));
				glVertex2i(pos.x+x, pos.y+mid.y+(mShiftPoint-3));
			}
         }
	glVertex2i(smdEndPoint, pos.y+mid.y-mShiftPoint-1);
	glVertex2i(smdEndPoint, pos.y+mid.y+mShiftPoint);
	//smdEnd

      glEnd();

   // draw the thumb
   RectI thumb = mThumb;
   thumb.point += pos;

   //smdBegin
   if (!mTextureNormal)
	renderRaisedBox(thumb, mProfile);

   else
   {
      thumb.point.x -= 2;
      dglClearBitmapModulation();
      dglDrawBitmap(mTextureNormal, thumb.point);
      renderChildControls( offset, updateRect);
   }
   //smdEnd

   if(mDisplayValue)
   {
   	char buf[20];
  		dSprintf(buf,sizeof(buf),"%0.3f",mValue);

   	Point2I textStart = thumb.point;

      S32 txt_w = mProfile->mFont->getStrWidth((const UTF8 *)buf);

   	textStart.x += (S32)((thumb.extent.x/2.0f));
   	textStart.y += thumb.extent.y - 2; //19
   	textStart.x -=	(txt_w/2);
   	if(textStart.x	< offset.x)
   		textStart.x = offset.x;
   	else if(textStart.x + txt_w > offset.x+mBounds.extent.x)
   		textStart.x -=((textStart.x + txt_w) - (offset.x+mBounds.extent.x));

    	dglSetBitmapModulation(mProfile->mFontColor);
    	dglDrawText(mProfile->mFont, textStart, buf, mProfile->mFontColors);
   }
   renderChildControls(offset, updateRect);
}

ConsoleMethod( GuiSliderCtrl, setBitmap, void, 3, 3, "(filepath name)")
{
   object->setBitmap(argv[2]);
}

I'm working on many different aspects of TGE right now, so there is a slight possibility that I've not included all the changes. I did tag every change as I made them, so it should work. Let me know.

B--

#1
02/01/2006 (5:14 pm)
Pretty cool stuff Brandon, looks like you've got your GUI looking rather nice over there!

I love nice GUI's!

Regards,

-J
#2
02/03/2009 (6:43 am)
Hi! Brandon Maness

Is this applicable for TGB 1.7.4? Also your link torque.smdlabs.com/content/thumbSlider.zip
is not working.

I'm developing a hidden objects game, in my game i need to seek the volume level by Gui Slider Ctrl. But the default image(slider.png) is not pretty good for my game i wish to use my graphics on that slider ctrl.

How to skin the slider ctrl in TGB 1.7.4?

Thanks