A T2D GUI system
by Matthew Langley · in Torque Game Builder · 04/22/2005 (3:31 pm) · 30 replies
T2D Gui Creator Avi
Ok... well today I've been working a T2D GUIsystem... due to the added functionality of T2D objects over the Torque GUI (though the Torque GUI still has its place) I decided to start creating an easy to use T2D gui system...
right now I have imageButtons and blendButtons working...
if you hover over the image button it switches out the objects image to the image you have attached to it at
%obj.overImageMap
same with
%obj.downImageMap
and
%obj.defaultImageMap
Everything resets itself right now, you hove over it, it changes images, you hover off of it, it changes back... you click it then it changes images, if you click it while over it and let go it will change images appropriately to the over image and not the default...
the blend button works similarly
you set these instead
%obj.overBlendColour
%obj.downBlendColour
%obj.defaultBlendColour
it updates correctly as well
I have started adding some actions in... right now have one over action...
"displayImage"
if you set its action to this it will display a specified image at a specified postion, with a specified size... when you are no longer over it, it then safeDeletes it... I'll add a stick option later to have it stick until the next hover image is active (or something similar)...
right now I have this all down to a single function to create
that function will create a basic button, I'll extend it to include action settings in one line as well
I also plan on adding animated buttons, so nifty little animated settings :) I also have been working on a simple little animation queueing system in script (when onAnimationEnd works properly I'll post it as to not confuse anyone any more lol, btw definately not a shot at Melv, you work too hard man! Can't beleive all the things you and Josh addressed in the last update!) and then I'll probably set it up to receive animation queues as states
the blend buttons allow for creating multiple buttons and states off of the same button
the goal will to eventually create a little tool where you can move and design GUIs, test them, then save it off... after that I'll make it so you can bring the tool in over your game, somewhat like the present Gui Editor... at least thats my goal now...
heres some very simple pics using stock T2D images
heres the screen ... top three boxes (small ones) are blend buttons with actions attached, the bottm left big one is a generated imageButton and the bottom right is a generated blendButton
the next three images show the over blend color changes and the "displayImage" action
this one shows the onMouseOver for the imageButton
this one shows the onMouseDown for the imageButton
and here is the mouseOver for the blend button... lol very dark blend colour ;)
Ok... well today I've been working a T2D GUIsystem... due to the added functionality of T2D objects over the Torque GUI (though the Torque GUI still has its place) I decided to start creating an easy to use T2D gui system...
right now I have imageButtons and blendButtons working...
if you hover over the image button it switches out the objects image to the image you have attached to it at
%obj.overImageMap
same with
%obj.downImageMap
and
%obj.defaultImageMap
Everything resets itself right now, you hove over it, it changes images, you hover off of it, it changes back... you click it then it changes images, if you click it while over it and let go it will change images appropriately to the over image and not the default...
the blend button works similarly
you set these instead
%obj.overBlendColour
%obj.downBlendColour
%obj.defaultBlendColour
it updates correctly as well
I have started adding some actions in... right now have one over action...
"displayImage"
if you set its action to this it will display a specified image at a specified postion, with a specified size... when you are no longer over it, it then safeDeletes it... I'll add a stick option later to have it stick until the next hover image is active (or something similar)...
right now I have this all down to a single function to create
createNewBlendButton(tileMapImageMap, "25 25", "button4", "155 155 155", "0 0 0", "255 255 255", "10 10"); createNewImageButton(tileMapImageMap, "-25 25", "button5", ggLogoImageMap, shipImageMap, "10 10");
that function will create a basic button, I'll extend it to include action settings in one line as well
I also plan on adding animated buttons, so nifty little animated settings :) I also have been working on a simple little animation queueing system in script (when onAnimationEnd works properly I'll post it as to not confuse anyone any more lol, btw definately not a shot at Melv, you work too hard man! Can't beleive all the things you and Josh addressed in the last update!) and then I'll probably set it up to receive animation queues as states
the blend buttons allow for creating multiple buttons and states off of the same button
the goal will to eventually create a little tool where you can move and design GUIs, test them, then save it off... after that I'll make it so you can bring the tool in over your game, somewhat like the present Gui Editor... at least thats my goal now...
heres some very simple pics using stock T2D images
heres the screen ... top three boxes (small ones) are blend buttons with actions attached, the bottm left big one is a generated imageButton and the bottom right is a generated blendButton
the next three images show the over blend color changes and the "displayImage" action
this one shows the onMouseOver for the imageButton
this one shows the onMouseDown for the imageButton
and here is the mouseOver for the blend button... lol very dark blend colour ;)
About the author
Was a GG Associate and then joined GG in 2005. Lead tool dev for T2D and T3D. In 2011 joined mobile company ngmoco/DeNA and spent about 4 years working game and server tech. 2014 joined startup Merigo Games developing server technology.
#2
04/22/2005 (4:05 pm)
It's now official. You, sir, are one sick bastard. :) I was actually planning on doing my gui purely in T2D (outside the GUI system), but was putting off the work until much later in development. Now you go off and get everything all documented. You're insane. :) Great work, but seriously. Get some sleep! :-D
#3
Great work!
Edit: sppelling :P
04/22/2005 (4:20 pm)
Hey now that's looking very cool! I too am planning to create a generic system based on T2D objects. Too many possibilities with a physics-based GUI!!! :)Great work!
Edit: sppelling :P
#4
04/22/2005 (4:26 pm)
Matt.. hmm I wonder if this is something that could be implemented in the Torque GUI Builder through the pluign system. That would rock.
#5
@Jason: Your completely right... maybe we can combine our efforts later, if you working on physics based aspects... I'm going to add some flash style effects, pulsing... fade in and out (those will be very easy considering already got fading done on a tutorial)... but other nifty ones...
@John: Wow, didn't think about that... after I finish the base of this we should put our heads together on that, would make integrated T2D GUIs into Torque a whole lot easier... lol the TGE (EDIT:who own T2D too) crowd would love us for that
04/22/2005 (4:34 pm)
@Teck: I can sleep when I'm dead lol ;)... I plan on getting some good sleep tonight though, have too much of that to catch up on... glad you could use it, people were slowly working into T2D GUIs so figured I could make a much easier system of creating it@Jason: Your completely right... maybe we can combine our efforts later, if you working on physics based aspects... I'm going to add some flash style effects, pulsing... fade in and out (those will be very easy considering already got fading done on a tutorial)... but other nifty ones...
@John: Wow, didn't think about that... after I finish the base of this we should put our heads together on that, would make integrated T2D GUIs into Torque a whole lot easier... lol the TGE (EDIT:who own T2D too) crowd would love us for that
#6
04/22/2005 (7:47 pm)
@King Tut: I want your brain! Jk very impressive contributions man. I like how you think out of the box.
#7
figured I'd post some of the progress on this... its going quite well
right now I have button creation functions set up like this...
this way I get a semi class system style working...
I have a base button creation function, all actions are handled here so that they work for all buttons... then I have a blend and image button creation function that passes info to the button creation function and then sets its own specific info
04/25/2005 (10:24 am)
Thx Vashner... lol I like to think out of the boxfigured I'd post some of the progress on this... its going quite well
right now I have button creation functions set up like this...
function createNewButton(%image, %position, %name, %size, %overAction, %overActionParam, %downAction, %downActionParam )
{
}function createNewBlendButton(%image, %position, %name, %action, %actionParam, %default, %over, %down, %size)
{
%test = createNewButton(%image, %position, %name, %size, %action, %actionParam);
}function createNewImageButton(%image, %position, %name, %action, %actionParam, %over, %down, %size)
{
%test = createNewButton(%image, %position, %name, %size, %action, %actionParam);
}this way I get a semi class system style working...
I have a base button creation function, all actions are handled here so that they work for all buttons... then I have a blend and image button creation function that passes info to the button creation function and then sets its own specific info
#8
lol seems bloated... let me seperate things
as you can tell the center string is the one where I pass action parameters... the one before that... holding "overActionImage" is where I pass multiple actions...
I set this up so I could pass this info in any order... all the work is done on the button creation process, so later when I set up a GUI I won't have to worry about passing any parameters in a specific order... the order between overAction and downAction won't matter either.
04/25/2005 (10:56 am)
Heres my function I use to create a dynamic image buttoncreateNewImageButton(tileMapImageMap, "-25 25", "button5", "overActionImage", "overActionImageMap=shipImageMap overActionImagePositionX=-25 overActionImagePositionY=-25 overActionImageSizeX=10 overActionImageSizeY=14 overActionImageStyle=fadein004out006kill overActionImageStick=false", ggLogoImageMap, shipImageMap, "10 10");
lol seems bloated... let me seperate things
createNewImageButton(tileMapImageMap, "-25 25", "button5", "overActionImage", "overActionImageMap=shipImageMap overActionImagePositionX=-25 overActionImagePositionY=-25 overActionImageSizeX=10 overActionImageSizeY=14 overActionImageStyle=fadein004out006kill overActionImageStick=false", ggLogoImageMap, shipImageMap, "10 10");
as you can tell the center string is the one where I pass action parameters... the one before that... holding "overActionImage" is where I pass multiple actions...
I set this up so I could pass this info in any order... all the work is done on the button creation process, so later when I set up a GUI I won't have to worry about passing any parameters in a specific order... the order between overAction and downAction won't matter either.
#9
I now added support for fade in and out of mouse over and mouse down images
fadein will tell it to add a fade in
004 is the time
I did the two preceding zeros to add support for time up to three digits...
if left at
"overActionImageStyle=fadein004"
it will fade in at a speed of 4... then it will safeDelete() instantly on mouseLeave
overActionImageStyle=fadein004out006kill
tells it to fade out at speed of 6... then when done kill... so it will safeDelete() when done :)
04/25/2005 (11:02 am)
overActionImageStyle=fadein004out006kill
I now added support for fade in and out of mouse over and mouse down images
fadein will tell it to add a fade in
004 is the time
I did the two preceding zeros to add support for time up to three digits...
if left at
"overActionImageStyle=fadein004"
it will fade in at a speed of 4... then it will safeDelete() instantly on mouseLeave
overActionImageStyle=fadein004out006kill
tells it to fade out at speed of 6... then when done kill... so it will safeDelete() when done :)
#10
maybe
flyinfromleft
flyinfromdown
flyinfromtop
flyinfromright
maybe
spiralinfromleft
spiralinfromdown
spiralinfromtop
spiralinfromright
and combine those with fades
04/25/2005 (11:08 am)
I'm thinking of flash style actionsmaybe
flyinfromleft
flyinfromdown
flyinfromtop
flyinfromright
maybe
spiralinfromleft
spiralinfromdown
spiralinfromtop
spiralinfromright
and combine those with fades
#11
I will create templates for a lot of the actions, then when I set up the GUI creation of this you will be able to select a template from a drop down :) so far it works well... I can hover over a button, it changes to its hover state and an image fades smoothly in at the specified location and fades out... i set the
overActionImageStick=true
and it will stay instead of fading out... Once I get a bit more interaction I'll have to either create a demo or a video... I think this will work out nicely, will help my Gui designer temmate as well as anyone who picks this up when I release it
04/25/2005 (7:49 pm)
Just stopping by at work to do some work before heading home, so figured I'd post some design concept update on thisI will create templates for a lot of the actions, then when I set up the GUI creation of this you will be able to select a template from a drop down :) so far it works well... I can hover over a button, it changes to its hover state and an image fades smoothly in at the specified location and fades out... i set the
overActionImageStick=true
and it will stay instead of fading out... Once I get a bit more interaction I'll have to either create a demo or a video... I think this will work out nicely, will help my Gui designer temmate as well as anyone who picks this up when I release it
#12
I have a save and load function working (save to file as well)... this is just a demo using stock images testing the overMouse states and actions for an imagebutton and multiple blend buttons, it also demonstrates loading and closing guis, along with the fadein and fadeout actions... btw added an action to fading in and out... you can tell it to kill on end or disable on end
download of T2D Gui System Demo
04/26/2005 (11:44 am)
Ok got a simple demo! :)I have a save and load function working (save to file as well)... this is just a demo using stock images testing the overMouse states and actions for an imagebutton and multiple blend buttons, it also demonstrates loading and closing guis, along with the fadein and fadeout actions... btw added an action to fading in and out... you can tell it to kill on end or disable on end
download of T2D Gui System Demo
#13
04/26/2005 (1:06 pm)
As you'll notice it waits until the buttons are completely transitioned in before it registers any events :) that was done on purpose
#14
also I now created a new sceneGraph and Window that overlays the current one, so the Gui's position stay the same no matter what :) Thx for the wonderful set up Melv!
04/27/2005 (9:07 am)
Note the two Guis are loaded from external files... in "guiCreator/client/guis"also I now created a new sceneGraph and Window that overlays the current one, so the Gui's position stay the same no matter what :) Thx for the wonderful set up Melv!
#15
04/27/2005 (9:52 am)
A button can have multiple actions... they all will be performed, though presently they cannot have duplicate actions
Button types (the different button types presently) blendButton (this is a base image with different blend color modes) defaultBlendColour (starting blend color, also the color reset to) overBlendColour (the mouse over blend color) downBlendColour (the mouse down blend color) imageButton (this is an image, with different image modes) overImageMap (the image for mouse over) downImageMap (the image for mouse down) defaultImageMap (the default image map, also the image reset to)
Mouse Down Actions (actions that can happen when clicking a gui object) downActionLoadGui (this will load a gui) downActionLoadGuiName (Gui name to load) downActionLoadGuiStyle (Fading in with a specified time and action) downActionCloseGui (this will close a gui) downActionCloseGuiName (Gui name to close) downActionCloseGuiStyle (Fading out with a specified time and action) downActionImage (this will load an image when clicked) downActionImageObject (internal use for storing image ID) downActionImageObjectUID (internal use for assigning a random UID) downActionImageMap (the imageMap for the image) downActionImageSizeX (image size x) downActionImageSizeY (image size y) downActionImagePositionX (image position x) downActionImagePositionY (image position y) downActionImageStyle (Fading in and out with specified times and actions) downActionImageStick (whether the image will be deleted or not after down)
Mouse Over Actions (actions that can happen when the mouse goes over an object) overActionImage (this will load an image when over) overActionImageObject (internal use for storing image ID) overActionImageObjectUID (internal use for assigning a random UID) overActionImageMap (the imageMap for the image) overActionImageSizeX (image size x) overActionImageSizeY (image size y) overActionImagePositionX (image position x) overActionImagePositionY (image position y) overActionImageStyle (Fading in and out with specified times and actions) overActionImageStick (whether the image will be deleted or not after down)
#16
04/27/2005 (10:11 am)
This is a saved out file that can be loaded in with a command :0//--- OBJECT WRITE BEGIN ---
new SimSet(otherGui) {
new fxStaticSprite2D() {
scenegraph = "t2dSceneGraph2";
overActionImageMap = "ggLogoImageMap";
overBlendColour = "0 255 0";
downBlendColour = "100 100 100";
mouseDown = "1";
overActionImagePositionX = "0";
name = "button1";
overActionImageSizeX = "5";
imageMap = "tileMapImageMap";
position = "-15 0";
type = "blendButton";
isOver = "0";
overAction = "overActionImage";
size = "5 5";
overActionImageObject = "1576";
overActionImageObjectUID = "0.720685";
defaultBlendColour = "255 0 0";
overActionImagePositionY = "-25";
mouseOver = "1";
overActionImageSizeY = "5";
downAction = "downActionLoadGui downActionCloseGui";
downActionLoadGuiName = "testGui";
downActionLoadGuiStyle = "fadein004";
downActionCloseGuiName = "otherGui";
downActionCloseGuiStyle = "fadeout006disable";
};
new fxStaticSprite2D() {
scenegraph = "t2dSceneGraph2";
overActionImageMap = "shipImageMap";
overBlendColour = "0 0 255";
downBlendColour = "100 100 100";
mouseDown = "1";
overActionImagePositionX = "0";
name = "button2";
overActionImageSizeX = "5";
imageMap = "tileMapImageMap";
position = "0 0";
type = "blendButton";
isOver = "0";
overAction = "overActionImage";
size = "5 5";
overActionImageObject = "1577";
overActionImageObjectUID = "0.558625";
defaultBlendColour = "0 255 0";
overActionImagePositionY = "-25";
mouseOver = "1";
overActionImageSizeY = "5";
downAction = "downActionLoadGui";
downActionLoadGuiName = "testGui";
downActionLoadGuiStyle = "fadein008";
};
new fxStaticSprite2D() {
scenegraph = "t2dSceneGraph2";
overActionImageMap = "ringImageMap";
overBlendColour = "255 0 0";
downBlendColour = "100 100 100";
mouseDown = "1";
overActionImagePositionX = "0";
name = "button3";
overActionImageSizeX = "5";
imageMap = "tileMapImageMap";
position = "15 0";
type = "blendButton";
isOver = "0";
overAction = "overActionImage";
size = "5 5";
overActionImageObject = "1578";
overActionImageObjectUID = "0.803039";
defaultBlendColour = "0 0 255";
overActionImagePositionY = "-25";
mouseOver = "1";
overActionImageSizeY = "5";
downAction = "downActionCloseGui";
downActionCloseGuiName = "testGui";
downActionCloseGuiStyle = "fadeout006disable";
};
};
//--- OBJECT WRITE END ---
#17
means you can load multiple GUI's or images on a single button :)
Before I had it working with multiple actions... now I might add an optional delay in the action... then I need to add animated button support...
btw any suggestions are welcome :) Plenty of work still to do, but once I'm done I plan for it to be a rather robust GUI system
04/28/2005 (10:18 am)
Added support for duplicate actions!means you can load multiple GUI's or images on a single button :)
Before I had it working with multiple actions... now I might add an optional delay in the action... then I need to add animated button support...
btw any suggestions are welcome :) Plenty of work still to do, but once I'm done I plan for it to be a rather robust GUI system
#18
04/28/2005 (10:19 am)
Lol the function call to create a button has gotten pretty meaty, but thats what I was going for... that way when I create the GUI I just have it call a single function passing all the set values%button = createNewImageButton(tileMapImageMap, "-25 25", "button5", "overActionImage overActionImage", "overActionImageMap=shipImageMap|tileMapImageMap overActionImagePositionX=-25|-20 overActionImagePositionY=-25|-20 overActionImageSizeX=10|5 overActionImageSizeY=14|7 overActionImageStyle=fadein004out006kill|fadein001 overActionImageStick=false|false", ggLogoImageMap, shipImageMap, "10 10");
#19
04/29/2005 (10:17 am)
Added a new button type "animatedButton" :) working well so far
#20
just added some checks and proper echo messages for that check if the datablock your trying to load is valid... so if you set an invalid image or animation datablock, it will tell you.
04/29/2005 (11:20 am)
Lol just going to use this as a progress thread for my T2D GUI Creator/System... will help me think out the progress...just added some checks and proper echo messages for that check if the datablock your trying to load is valid... so if you set an invalid image or animation datablock, it will tell you.
Torque 3D Owner Matthew Langley
Torque
lol this ended up being more complex than anticipated, but its working well now, cleans itself up nicely too