Game Development Community

Tab Control WIP

by Geom · 11/28/2007 (9:50 pm) · 8 comments

Lately I've been sprucing up my tab control in order to turn it into a code resource.

The main thing I've been doing is adding support for custom bitmaps to it, something it didn't have before. So now, each tab can have an icon next to its label (w00t!) Here's how Orcs vs. Martians' Options dialog now looks, with icons:

www.redbrickgames.com/pix/071128/tabs1.png
Also, you can now specify bitmaps for the tabs themselves. This is in case you don't like the default look of the tabs. Here's a simple example with funky transparent, oval tabs:

www.redbrickgames.com/pix/071128/tabs2.png
The tab icons and bitmaps are independent features, so you can use both at the same time, or just one, or neither.

The TorqueScript for the tab control is really simple. Here's the complete script code for the 2nd example above with the tab bitmaps:

new GuiControlProfile(GuiTabTestProfile)
{
   bitmap         = "./mainMenu/tabs";
   opaque         = true;
   borderThickness = 2;
   borderColor    = "20 220 255";
   borderColorHL  = "20 220 255";
   fillColor      = "0 0 0 80";
   fontColor      = "0 0 0";
   justify        = "center";
};

new GuiTabCtrl() {
   profile = GuiTabTestProfile;
   position = "510 385";
   extent = "270 100";
   tabSize = "0 24";
   margins = "0 0";

   new GuiTextCtrl() {
      profile = "GuiTextProfile";
      position = "60 40";
      text = "This is tab pane #1.";
      tabLabel = "Tab #1";
   };
   new GuiTextCtrl() {
      profile = "GuiTextProfile";
      position = "90 50";
      text = "This is tab pane #2.";
      tabLabel = "Tab #2";
   };
   new GuiTextCtrl() {
      profile = "GuiTextProfile";
      position = "120 60";
      text = "This is tab pane #3.";
      tabLabel = "Tab #3";
   };
};

You just declare a GuiTabCtrl, and every child of it automatically shows up as a tab. The GuiTabCtrl looks for the special fields "tabIcon" and "tabLabel" in each child control in order to display its tab properly. The tab bitmap (if you use one) is declared in the Profile. No other programming is necessary to make the children appear and disappear, the GuiTabCtrl takes care of that.

Anyway, I should have this resourced pretty soon. I'm still working out a few design issues with how the tab bitmaps should work (like, should they overlap the top border of the ctrl, or not?) And then I need to factor out the code from Orcs vs. Martians' codebase. Then it'll be done. Hopefully, it'll be useful resource!

- - - - -

Changing subjects - many thanks to everyone who participated in on the Orcs vs. Martians beta test. The feedback has been really outstanding and helpful! Thanks guys!! If you haven't emailed me some feedback, please do so, I can definitely use more. The feedback has really helped me know what areas to focus on and given me some new ideas for the gameplay. The email address again is - ovm_test@redbrickgames.com

About the author

My email address is my GG handle, at redbrickgames.com.


#1
11/29/2007 (9:31 am)
That looks like a great addition to the gui ctrl set! Want!
#2
11/29/2007 (9:54 am)
Ahhhh finally, the waiting is going to end! :D
Really good work Geom, the skinning looks amazing! Thank you very much.

Happy to know the beta testing is going well, and the feedback is beeing useful.
#3
11/29/2007 (12:35 pm)
Looking good Geom
#4
12/03/2007 (10:52 pm)
Ok, this is depressing.

Torque already has a tab control.

Looks like it got added in Torque 1.4. I guess I never searched later versions of Torque and didn't see it (I'm still on 1.3 - what a dinosaur).

I suppose I'll still resource my control, if it has any features that the existing one doesn't have.
#5
12/05/2007 (12:27 am)
That sucks... There's no Tab Control in TGEA *hint* How about still releasing your code? I'll convert it to TGEA.
#6
12/05/2007 (1:04 pm)
Thanks James, I definitely will. I've now got it working in a clean TGE 1.5.2 build, I just need to write up the resource.


redbrickgames.com/pix/071128/tge152.jpg

Edit: it looks like the existing Torque control doesn't support custom bitmaps.
#7
12/05/2007 (2:14 pm)
I was thinking the same thing. The Icons you have really makes the difference.
Keep up the good work ;)
#8
12/05/2007 (10:16 pm)
Finally, the resource is submitted! Check it out: www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=13963.

And here's a YouTube video of it in action.