T2D Gui Tutorial - A Starter

I recently created this Torque 2D Tutorial ... about the last 80% of it covers GUI controls... (so if you don't know how to use them yet)... - this covers some much more advanced GUI methods... this is just a primer for adding images as buttons


first go to where you have your images... make four copies of it... add _n to the end of one... _h to the end of another, _d to another and then _i to the end of the last... (_n = normal, _h = highlighted, _d = depressed, _i = inactive)

something like this


ok now fire up T2D... hit "F10"... go to the top Left and click File -> New GUI


in there choose a name for it... (best to keep some sort of naming standard)

now click on "GuiControl"...
now heres where you can choose what you want, if you want it to be a small menu that pops up (with the game in the background, keep it as GuiControl)... if you want the background to be an entire image from something else, go to guiBitmapCtrl...) now click ok

in here click on "New Control" go down to "GuiBitmapButtonCtrl" and click it...

bring out more towards the center a bit... now in the right-bottom properties list click on "Expand All"... got down to bitmap

here type in the path to the image... mine was "T2D/client/buttons/gglogo"
note do this withou the _n, _h, or _d... it automatically adds those in at the right time... now click apply... you should see the image... this is what I see


now (after resizing mine some, click the button and then the black handles to resize)... go to the "command" property in the properties list... type "echo("test button press");" in there...



now click apply again...

note: if you kept your main control as GuiControl when we test this out you will get some weird background effects (only because the background is invisible so when you load this menu in game it will show the game in the background), if you chose to make the main control a bitmapCtrl... then you need to set a bitmap path for it also (the same way you did for the button)

hit "F10"... ignore any weird artifacts (since it has no background it doesn't refresh it...., just look for your image button and click it...


now bring up the console (with the "~" tilde key) and see if you see the echo text "test button press" like this


if you get this then it works... now to show you how this gui is really meant to perform...

hit "F10" again... go to File -> Save GUI ... click on the directory button like this

go down to T2D/client and click save


now hit the "~" tilde key and type in "quit();"
and press enter...
now go to your T2D/client directory... open up "client.cs"

find all the statements that go like this "exec(./"

add one to the end like this

exec("./TestGui.gui");

(change the gui name to whatever you saved it as)... now save the file and close it... you should see the TestGui.gui (or whatever you named it) in that folder... if you want to change the command later, you can either do it in the editor or in the file itself... ok go fire up T2D

at the main screen hit the "~" tilde key... now type this

"canvas.pushDialog(TestGui);"

(make sure testGui is whatever you called the internal name... hit enter, and now you should see it overlayed... click it a few times and hit the console to see the text... to make the button dissapear type "canvas.popDialog(TestGui);" in the console... now in the command part you can put a script function if you want, so you can perform anything on clicks...

to go back to editing this GUI hit "F10"

click the middle button up top

like this
and go to your gui (mine I named TestGui)... here you can edit any of the already loaded GUIs...

Hope this helps... I strongly recommend going through the long tutorial I linked up top, but this will get you started :)