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:
The important variables are:
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:
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:
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.
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 panelsAfter 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.
#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
There is a small typo in Gui3DFolder::on3DRender.
if(mOffId < 0) mOffId == 0; should be if(mOffId < 0) mOffId = 0;
Those damn typos! :)
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! :)

Torque Owner Netwyrm
Canopic Games