GUI Profile Tutorial
From TorqueWiki
The following extends the GUI Editor Tutorial.
Contents |
[edit] Links
TGB/Reference:_GuiControlProfile
http://tdn.garagegames.com/wiki/TGB/MiniTutorials/GUIIntroToProfiles
3DGPAiO p. 192
GPGT p. 463
[edit] Basics
Profiles are like css style Sheets in HTML.
new GuiControlProfile( GuiProfileName [ : parentProfile ] ) {
field_0 = value;
...
}
Profiles with the same name override the existing one.
Not every field that is defined in a profile must be used by a control. Different Controls may interpred fields in different ways. Values set in the profile for a control can be changed in the control itself.
Note: Some (common) attributes go into the profiles other are set in the controls. This is list of the profile attributes or groups of attributs (there are too many to list them all, see GPGT p. 462 ff.):
- bitmap
- borders..
- cursors..
- background and color..
- font..
- textformatting..
- autosizing..
- keys and mouse..
- input restrictions (numbers only)
- audio..
[edit] Profile Search Process
- User profile
- Profile with Name of control+"Profile"
- GuiDefaultProfile must always be defined
Console method to change a profile from a script:
setProfile();
[edit] Sizes
3DGPAiO p. 194 GPGT p. 463 -> autosizing
[edit] The .gui File
Profiles have to be loaded before they are used by GUI elements. The loading can be done from a separate .cs file or in the top block of a .gui file.
/* this block is for the gui profiles */
//--- OBJECT WRITE BEGIN ---
/* this block is for the gui editor, do not edit it by hand */
new GuiControl(selectGui) {
...
Profile = "GuiDefaultProfile";
new GuiWindowCtrl() {
...
Profile = "GuiWindowProfile";
new GuiTextCtrl(info) {
...
Profile = "selectGuiTextProfile";
text = "info and explain ....";
};
};
};
//--- OBJECT WRITE END ---
/* this block is where functions for the gui elements go ... */
This gui can be used as Dialog:
Canvas.popDialog(selectGui);
or as main canvas content:
Canvas.setContent(PlayGui);
or it can be pasted into the playGui.gui inside the main widget,
or it may be added dynamically, as done below.
[edit] Adding a Profile for Text
Set a new profile for GuiTextCtrl(info):
Profile = "selectGuiTextProfile";
Then define the new profile for the text:
new GuiControlProfile( selectGuiTextProfile : GuiTextProfile )
{
// set the type face
fontType = "Times";
// set the font size
fontSize = 20;
// set the font color
fontColor = "240 160 45";
};
Note that 'fontType' is assigned as a string. TGB automatically caches fonts when you use them so you can release a game with a font that your users might not have.
[edit] Adding a Profile for the Window
As above set the profine field:
Profile = "selectGuiWindowProfile";
Then define the new profile for the window:
new GuiControlProfile( selectGuiWindowProfile : GuiDefaultProfile )
{
// use fillColor for guiControl background
opaque = true;
// draw a border
border = 1;
// set the border color -> "R G B"
borderColor = "80 140 140";
// set the background color -> "R G B A"
fillColor = "40 165 20 110";
};
[edit] Getting rid of Window Decorations
If you do not like the window with the title bar and the buttons you can replace the GuiWindowCtrl(){..} with a basic GuiControl:
new GuiControl() {
canSaveDynamicFields = "0";
Profile = "selectGuiWindowProfile";
HorizSizing = "relative";
VertSizing = "relative";
Position = "190 166";
Extent = "334 190";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
hovertime = "1000";
[edit] Closing the Dialog
Without the window decoration it become difficult to close the window. Thus add a "close" button to the window that pops the dialog:
new GuiBitmapButtonCtrl(close) {
canSaveDynamicFields = "0";
Profile = "GuiButtonProfile";
HorizSizing = "relative";
VertSizing = "relative";
Position = "450 317";
Extent = "61 27";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
Command = "Canvas.popDialog(selectGui); ";
hovertime = "1000";
text = "done ";
groupNum = "-1";
buttonType = "PushButton";
};
[edit] Skinable Button: GuiBitmapButtonControl
see. GPGT p. 509
Add a skinnable button to your new interface. You may base it on the existing pushbutten and augment it by a bitmap field:
new GuiBitmapButtonCtrl() {
...
bitmap="buttons/fish";
};
The image file for the fish has to be placed relative to the .gui file which uses it.
The bitmap has to be supplied in four versions with a common basename and a tag plus suffix for the image format, e..g., fisch_tag.jpg. The _tags are:
- _n for normal
- _h for highlight
- _d for depressed
- _i for inactive
To layout the buttons on a grid you may use a GuiFramsetCtrl
[edit] Next
Gui Widget Scripting
