Game Development Community

dev|Pro Game Development Curriculum

Grow and Shrink GUI

by Herru Cules D · 07/07/2008 (9:52 am) · 3 comments

Create grow and shrink animated GUI without engine modification.

usage : copy and paste this code to any client script files for example @ game/client/scripts/client.cs
function InitShrinkGrowGUI (%obj) 
{
   %width = getWord(%obj.extent, 0);
   %height = getWord(%obj.extent, 1);
   %x = getWord(%obj.position, 0);
   %y = getWord(%obj.position, 1);
   
   %max = %width;
   %min = %max - 10;
   %obj.originalWidth = %width;
   %obj.originalHeight = %height;
   %obj.originalX = %x;
   %obj.originalY = %y;	
   
   ShrinkGrowGUI (%obj, %width, %height, %x, %y, %max, %min);
}

function ShrinkGrowGUI (%obj, %width, %height, %x, %y, %max, %min) 
{
   if (%width > %max) %obj.growup = false;
   else if (%width < %min)	%obj.growup = true;
   
   if (%obj.growup) {
      %width += 2;
      %height += 2;
      %x -= 1;
      %y -= 1;
   }
   else {
      %width -= 2;
      %height -= 2;
      %x += 1;
      %y += 1;		
   }
   
   %obj.extent = %width SPC %height;
   %obj.position = %x SPC %y;
   %obj.sc = schedule(50,0,"ShrinkGrowGUI", %obj, %width, %height, %x, %y, %max, %min);
}

function StopShrinkGrowGUI (%obj) 
{
	if(%obj.sc)
   {
      cancel(%obj.sc);
      %obj.sc = 0;
      
      %obj.extent = %obj.originalWidth SPC %obj.originalHeight;
      %obj.position = %obj.originalX SPC %obj.originalY;
   }
}

Example usage: in tutorial.base on mainmenugui give each of the buttons a name.
then on mainmenugui.cs on mainmenugui::onwake function add this code:
function mainmenugui::onWake(%this)
{
      // I assume u give name mm_start, mm_option, etc.. you can add it yourself ^^
      InitShrinkGrowGUI (mm_start); 
      InitShrinkGrowGUI (mm_quit); 
}

after the gui content appear then the guibitmapbuttons will grow and shrink. but dont forget to stop the grow and shrink onSleep()
function mainmenugui::onSleep(%this)
{
    StopShrinkGrowGUI (mm_start);
    StopShrinkGrowGUI (mm_quit);
}

* OPTIONAL
if u want to animate the gui only when the mouse hover or inside it you should apply the Adding Mouse Events to Gui Controls resource, so that the guibitmapbuttonctrl will have onmouseenter/leave/hover event.

for example:
function mm_start::onmouseenter(%this)
{
      InitShrinkGrowGUI (%this); 
}
function mm_start::onmouseleave(%this)
{
    StopShrinkGrowGUI (%this);
}
and you should remove all the InitShrinkGrowGUI() at mainmenugui::onwake().

that's all folks, I hope this simple resource usefull for all of u torque developers ^^.

cheers.

#1
07/07/2008 (10:02 am)
Thats very cool. I can think of a few spots where it would add a nice effect to my game's GUI. Thanks for posting!
#2
07/07/2008 (10:14 am)
Hey... nice job!

Thanks man...

:-)
#3
07/09/2008 (3:29 am)
for flexibility i've add a variable so that it will control the minimum shrink size offset.

function InitShrinkGrowGUI (%obj, %shrinkoffset) 
{
   %width = getWord(%obj.extent, 0);
   %height = getWord(%obj.extent, 1);
   %x = getWord(%obj.position, 0);
   %y = getWord(%obj.position, 1);
   
   if(%shrinkoffset == "")
       %shrinkoffset = 10;

   %max = %width;
   %min = %max - %shrinkoffset;
   %obj.originalWidth = %width;
   %obj.originalHeight = %height;
   %obj.originalX = %x;
   %obj.originalY = %y;	
   
   ShrinkGrowGUI (%obj, %width, %height, %x, %y, %max, %min);
}

cheers.