Game Development Community

dev|Pro Game Development Curriculum

3D Folder GUI (TGEA)

by Frank Bignone · 08/25/2008 (7:20 am) · 4 comments

Download Code File

This article includes the necessary code to implement a 3D Folder Menu GUI which can display a list of texture like on the Iphone / IpodTouch and allow selection of a list of textures.


To include this inside your TGEA 1.7.1 game, first uncompress the 6 files available inside source/gui (put it inside your game folder source). Note: be sure that you can directly include file inside your game folder otherwise the include statements in the provided sources will not work.

Then to have the same effect, you can try to include the following Gui control as:
new Gui3DFolder(Menu3D) {
         canSaveDynamicFields = "0";
         Enabled = "1";
         isContainer = "0";
         HorizSizing = "relative";
         VertSizing = "relative";
         Position = "44 12";
         Extent = "553 427";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         hovertime = "1000";
         Hiding = "none";
         HidingSpeed = "1";
         Grip = "10";
         GridStep = "10";
         Margin = "0 0 0 0";
         Padding = "0 0 0 0";
         AnchorTop = "1";
         AnchorBottom = "0";
         AnchorLeft = "1";
         AnchorRight = "0";
         cameraZRot = "0";
         forceFOV = "0";
         Orientation = "Horizontal";
         SquareWidth = "30";
         SquareHeight = "50";
         ShutterSpeed = "2";
         Distance = "0.8";
         Tilt = "10";
         PanelTilt = "45";
         PanelDist = "0.3";
         NbSeg = "6";
         NbElements = "8";
         SelectedColor = "255 255 255 255";
         Unselectedcolor = "64 64 64 255";
      };

The important variables are:
Orientation = either "Horizontal" or "Vertical" to have an horizontal or vertical folder list
         ShutterSpeed = Speed for the transition between one item to the other 
         SquareWidth = Width of the square on which textures are rendered
         SquareHeight = Height of the square on which textures are rendered
         Distance = multiplier to be farther / closer to the GUI
         Tilt = Tilt angle of the wheel
         NbElements = Number of element to display
         SelectedColor = Color multiplier for selected square (active menu option)
         Unselectedcolor = Color multiplier for un-selected square (not active menu)
         PanelTilt = Angle of the tilted panel
         PanelDist = Relative distance between panels
         NbSeg = Number of panels

After setting up this control, you need to pass it a list of textures that will be used by the control. To do so, you can add the following code inside the onWake method of this control:
function Menu3D::onWake(%this)
{
	%texLst = new GuiTexLst();
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-1.png", 0);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-2.png", 1);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-3.png", 2);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-4.png", 3);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-5.png", 4);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-6.png", 5);
	%texLst.setTexture("scriptsAndAssets/data/gui/tst/tex-7.png", 6);	
	%this.setTextureLst(%texLst);
}

The use of a new object GuiTexLst is to be able to use this control with different provided of texture (for example in Pelorea we can use it to cycle around all our deck cards).

The control has few call-backs than you can use as follow:
function Gui3DFolder::onMouseEnter(%this)
{
	echo("[3D Folder:" @ %this @ "] Enter");
}

function Gui3DFolder::onMouseLeave(%this)
{
	echo("[3D Folder:" @ %this @ "] Leaving");
	%this.setSpeed(0);
}

function Gui3DFolder::onSelection(%this, %sel)
{
	echo("[3D Folder:" @ %this @ "] Selection " @ %sel);
}

The code inside onMouseLeave will stop the animation when pointer is outside the control.
The code inside onSelection can be used for activating different actions depending on the user selection.

Enjoy it.

About the author

Real programmers don't waste time recompiling; they patch the binary files... ... Real programmers don't waste time patching binary files; they patch memory.


#1
08/25/2008 (9:19 am)
Very neat! Thanks for posting that as a code example!
#2
08/29/2008 (9:09 am)
I don't know what to say other than WOW! and Thank you.
#3
09/08/2008 (12:25 am)
Very nice work, can't wait to try it out!
#4
10/26/2008 (10:30 am)
Great resource!

There is a small typo in Gui3DFolder::on3DRender.

if(mOffId < 0) mOffId == 0; should be if(mOffId < 0) mOffId = 0;

Those damn typos! :)