New GUI Tutorial - Feedback Please
by Thomas Buscaglia · in Torque Game Builder · 07/10/2006 (5:33 pm) · 14 replies
Heya everyone, I just put up the first of the new GUI tutorials that are gonna be up on TDN and it would be swell if I could get some feedback from the community.
Keep in mind that this tutorial is intended to be the first and most basic tutorial - meaning we might link to this tutorial from other tutorials - so it's important that it's concise and clear, while still relaying every step in enough detail to follow along easily and grasp all the information.
In addition to any feedback you might have about it, answering the following would be particularly helpful:
-Are there any parts that aren't clear enough for someone brand new to the GUI Builder?
Here it is: Score and Time GUI
Thanks in advance to anyone who takes the time to check it out and give feedback!
Keep in mind that this tutorial is intended to be the first and most basic tutorial - meaning we might link to this tutorial from other tutorials - so it's important that it's concise and clear, while still relaying every step in enough detail to follow along easily and grasp all the information.
In addition to any feedback you might have about it, answering the following would be particularly helpful:
-Are there any parts that aren't clear enough for someone brand new to the GUI Builder?
Here it is: Score and Time GUI
Thanks in advance to anyone who takes the time to check it out and give feedback!
About the author
Formerly GarageGames designer and gameplay/engine programmer of 5 years. Founder and President at Flying Mongoose Labs, Lead Gameplay Engineer and Senior Designer at LumaArcade, head of the Las Vegas chapter of the IGDA.
#2
07/10/2006 (10:57 pm)
Thank you, Thomas, for your excellent beginner GUI tutorials. They are very nicely done. I especially like your use of namespaces; since this is an area of TorqueScript that confuses people.
#3
Here's the latest: Main Menu With Bitmaps for Background and Buttons.
On the two Main Menu ones specifically: does anyone who's read through them feel that they need more images like the first one, or was that first one overkill?
Thanks again for feedback.
Edit: Those URL tags hate me... fixed the link.
07/11/2006 (12:14 am)
Thanks, Don. :)Here's the latest: Main Menu With Bitmaps for Background and Buttons.
On the two Main Menu ones specifically: does anyone who's read through them feel that they need more images like the first one, or was that first one overkill?
Thanks again for feedback.
Edit: Those URL tags hate me... fixed the link.
#4
07/11/2006 (9:26 pm)
Here's a slightly more advanced one - fresh out of the oven! Simple Options Menu
#5
You are doing great work.
07/11/2006 (10:49 pm)
I honestly do not think that you can overdo the use of images in tutorials like this. Images heighten clarity. It's a lot of work for you; but it will be hugely appreciated by everyone who learns from them. You are doing great work.
#6
07/12/2006 (2:30 am)
Hi Thomas! Cool stuff :) Just curious if schedule is accurate enough to make a time of it? I think it might be off if it runs for some time, not sure though! Anyway, cool :)
#7
Minor typo, in the first tutorial, Gui24TextProfile should be GuiText24Profile.
@Oliver: Schedule will almost always be off by a few milliseconds in realtime since they're all handled at a specific point in TGB's processing loop, but the delay isn't cumulative.
07/12/2006 (9:09 am)
Excellent! I've been putting off learning Gui's. This makes it a lot easier. Thanks!Minor typo, in the first tutorial, Gui24TextProfile should be GuiText24Profile.
@Oliver: Schedule will almost always be off by a few milliseconds in realtime since they're all handled at a specific point in TGB's processing loop, but the delay isn't cumulative.
#8
@Oliver - You're right on that. It's also bad style to use the class callbacks in general, that was just an example of how to use them to test that the gui was working. The schedule/re-schedule method will eventually get further and further from the actual time because it only reschedules itself after it has a chance to run. For a more accurate time you could always do [scenegraph].getSceneTime() in an onTimer() callback or something.
@Ken - Thanks for the catch. Fixed it. :)
Edit: Just a clarification - By "bad style to use the class callbacks" I meant the C++ class callbacks, like t2dSceneGraph, t2dSceneWindow, etc. It's really a personal preference thing, but to me it's much cleaner in general to use script classes for stuff like that.
07/12/2006 (12:54 pm)
Thanks for the feedback guys.@Oliver - You're right on that. It's also bad style to use the class callbacks in general, that was just an example of how to use them to test that the gui was working. The schedule/re-schedule method will eventually get further and further from the actual time because it only reschedules itself after it has a chance to run. For a more accurate time you could always do [scenegraph].getSceneTime() in an onTimer() callback or something.
@Ken - Thanks for the catch. Fixed it. :)
Edit: Just a clarification - By "bad style to use the class callbacks" I meant the C++ class callbacks, like t2dSceneGraph, t2dSceneWindow, etc. It's really a personal preference thing, but to me it's much cleaner in general to use script classes for stuff like that.
#10
They look good.
Will leave feedback when I can go thru them.
Randy
07/15/2006 (8:33 am)
Looked them over.They look good.
Will leave feedback when I can go thru them.
Randy
#11
They are great to learn something in a short time.
I like the minitutorials.
I have a sugestion.
Can you make a minitutorial in wich i can use a slider to turn the music up and down.
Or maybe a minitutorial that show how i can switch form 800x600 to 1024x768 or fullscreen.
Maybe, if you have the time!?
Mathias
07/16/2006 (2:04 pm)
I just work true them as a beginner.They are great to learn something in a short time.
I like the minitutorials.
I have a sugestion.
Can you make a minitutorial in wich i can use a slider to turn the music up and down.
Or maybe a minitutorial that show how i can switch form 800x600 to 1024x768 or fullscreen.
Maybe, if you have the time!?
Mathias
#12
Volume control:
You should read this tutorial about audio first. Notice that 'type' field of your 'AudioDescription' is actually the channel that sounds with that description will play on. There are 32 channels by default: 0 to 31. You could, for example, set sound effects to channel 1 and music to channel 2. Then have a slider for each. From the other tutorials you should know how to get your window to look how you want it. The control you want is 'GuiSliderCtrl'. Note that 'GuiSliderCtrl' 'Command' field gets evaluated only after you release the slider, which makes it perfect for your needs. Enter something like "MyOptionsGui.adjustMusicVolume();". Make sure you give your sliders internal names too. In the adjustMusicVolume function, get the music slider object by its internal name (as in the Options Menu tutorial) and just do the following:
For sound effects, get the sound slider by internal name and change the first argument in alxSetChannelVolume to 1 (or whatever channel sound effects are on).
Resolution:
For this one you can just have a dropdown list with different resolutions and then call setRes(%x,%y) when they hit an 'Apply' or 'Ok' button.
07/16/2006 (8:19 pm)
Thanks for the feedback. I don't know if I'll have time to do those tutorials specifically, but I can definitely give you some advice to point you in the right direction.Volume control:
You should read this tutorial about audio first. Notice that 'type' field of your 'AudioDescription' is actually the channel that sounds with that description will play on. There are 32 channels by default: 0 to 31. You could, for example, set sound effects to channel 1 and music to channel 2. Then have a slider for each. From the other tutorials you should know how to get your window to look how you want it. The control you want is 'GuiSliderCtrl'. Note that 'GuiSliderCtrl' 'Command' field gets evaluated only after you release the slider, which makes it perfect for your needs. Enter something like "MyOptionsGui.adjustMusicVolume();". Make sure you give your sliders internal names too. In the adjustMusicVolume function, get the music slider object by its internal name (as in the Options Menu tutorial) and just do the following:
...
%musicSlider = MyOptionsGui.findObjectByInternalName("musicSlider",true);
alxSetChannelVolume(2,%musicSlider.getValue());
...For sound effects, get the sound slider by internal name and change the first argument in alxSetChannelVolume to 1 (or whatever channel sound effects are on).
Resolution:
For this one you can just have a dropdown list with different resolutions and then call setRes(%x,%y) when they hit an 'Apply' or 'Ok' button.
#13
I will try that.
What i found out is that the guiSliderCtrl is ugly, can we change the look of it or must we then make it complete scripted with own grafics ?
Mathias
07/17/2006 (12:24 am)
Thank you Thomas.I will try that.
What i found out is that the guiSliderCtrl is ugly, can we change the look of it or must we then make it complete scripted with own grafics ?
Mathias
#14
Then just give your slider that profile. Check out my intro to profiles mini-tutorial if you need help with profiles.
07/17/2006 (3:17 am)
Yes you can change the look of the slider. Check out 'games/common/gui/images/slider.png' for an example of a slider image. It's just a key image with 5 parts: beginning, middle, end, inactive marker, and active marker. Create a profile for your slider that says something like the following:new CuiControlProfile(MyCoolSliderProfile)
{
bitmap="~/gui/images/MyCoolSliderImage.png";
};Then just give your slider that profile. Check out my intro to profiles mini-tutorial if you need help with profiles.
Torque Owner Thomas Buscaglia
Any feedback at all would be greatly appreciated.