GUI Tutorial

#1 GUI Controls in Torque X are basically folders. The canvas (GUICanvas.Instance in the GarageGames.Torque.GUI namespace) is effectively the root. There are several ways to get a gui control onto the window, but here's are the basics:

First, it's important to know that all the controls in a given GUI should be organized so that they are all children of a single root node. For example, in a main menu GUI you might have your root GUIControl, then a GUIControl for the window frame as a child of that, and then several buttons as children of that GUIControl. Part of the reason for this is that it makes it much easier to show or hide different GUI's but more importantly, the root control of a GUI is resized to the dimensions of the Canvas when it's added to the Canvas and child positioning is relative, so it becomes much easier to handle things like window resizing or resolution changes. Ok, on to actually making a GUI work...

You need a style for all of your GUI Controls. Several controls can share the same style, but some controls need specific types of styles. For example, a GUIText needs a GUITextStyle, whereas a GUIControl just needs the basic GUIStyle.

2 basic styles:

// the style for our root control
GUIStyle rootStyle = new GUIStyle();
rootStyle.IsOpaque = false;

// the style for our text control
GUITextStyle textStyle = new GUITextStyle();
textStyle.TextColor = Color.White;
textStyle.SizeToText = true;
textStyle.FontType = "arial14";

A root node and a GUIText control that lives inside it:

// our root control
GUIControl root = new GUIControl();
root.Style = rootStyle;

// our text control
GUIText hello = new GUIText();
hello.Style = textStyle;
hello.Position = new Vector2(20, 20);
hello.Text = "HELO THAR";

// set the folder (i.e. "parent") of the text control
hello.Folder = root;

Now that the GUIText has its folder set to the root, we can show or hide the whole gui by manipulating just that one control. There are a few ways to show the GUI (the simplest is to set root.Folder to GUICanvas.Instance), but the proper way is as follows:

// push the dialog to the canvas
GUICanvas.Instance.PushDialogControl(root, 0);

And when you're done with the GUI, you can hide it like so:

// pop a dialog fromthe canvas
GUICanvas.Instance.PopDialogControl(root);

The stack manipulation language was carried over from TGE/TGB if you're wondering.

Anyway, those are the basics. All the particulars of the different styles and controls should be pretty self explanatory if you follow the API docs and read any assert text (make sure you're building Debug and not Release so you get all the asserts and not just the ISV ones).

This is all 1.0 compatible, but you should know that several things have changed since 1.0 in terms of the styles, relative alignment, color selection, system fonts ala XNA "1.0 Refresh", etc. so GUI's made now and with 1.0 will have to be updated to work with later versions, but not in a big way. They're all minor changes and they're all worth it. All the basics of how the system works are still the same.

Edit: spelling

#2 I put this in my program and i keep getting a bunch of diffrent errors

first im not too sure where to put this in the code, different places give me different errors, do i have to put this in another file completely? or can i just put it in the game.cs

i have put it in the game.cs in a loose sense, and also i made a new public void method, called endgamegui() i put all the stuff in there, the style, the setup and then pushed the gui, and i get lots of errors all saying

"the type class or namespace of GUIStyle could not be found"

please help?!?!

#3 Do you have :

using GarageGames.Torque.GUI;

in your using section up top?

#4 Ok thanks david that fixed some of the errors but now its saying its missing "Vector2" and also "Color" does not exist.

#5 Make sure you have :

using Microsoft.Xna.Framework;

That will fix the Vector2 issue. For the Color, you want to use :

using Microsoft.Xna.Framework.Graphics;

#6 Ok thanks but how did you know all that? like when i have a problem i dont want to sit here and ask everytime, even though i do appreciate it.

#7 Hehe, programming is my passion :)

However, to look it up yourself, you can open any of the starter projects, do a edit-Find and replace-> find in files from the main menu, lookup the word (like Vector2), and once you find it, hover over it, and it will give you the fully qualified namespace of the object. When I hovered over Vector2, it showed Microsoft.XNA.Framework.Vector2, so I knew that I needed a reference to the Microsoft.XNA.Framework library, which is declared either up top in the using section, globally in your config, or is a reference and you type out the fully qualified namespace before the object. If you know a place its used, you can highlight the word, right click and select goto definition and it will show you where its at and you can get the namespace reference that way too.

#8 EDIT: Nevermind figured it out, just make a string named dealerwinsGui and that will make it global



--------------------------------------------------------------



@david
do you have an instant messenger i can contact you at? aim, yim, or msn? if so email it to me at nascarjake@tx.rr.com that will be easier than this, i would deeply appreciate it (if i can spell :P )

Ok so i get that but now here is what im battling

because im going to have several win screens depending on who wins in blackjack game

public void createdealerwinsGUI()
        {
            // the style for our root control
            GUIStyle dealerwinsStyle = new GUIStyle();
            dealerwinsStyle.IsOpaque = false;
            // the style for our text control
            GUITextStyle dealerwinstextStyle = new GUITextStyle();
            dealerwinstextStyle.TextColor = Color.White;
            dealerwinstextStyle.SizeToText = true;
            dealerwinstextStyle.FontType = "arial14";

            // our root control
            GUIControl dealerwinsGUI = new GUIControl();
            dealerwinsGUI.Style = dealerwinsStyle;
            // our text control
            GUIText dealerwinstextGUI = new GUIText();
            dealerwinstextGUI.Style = dealerwinstextStyle;
            dealerwinstextGUI.Position = new Vector2(20, 20);
            dealerwinstextGUI.Text = "DEALER WINS";
            // set the folder (i.e. "parent") of the text control
            dealerwinstextGUI.Folder = dealerwinsGUI;

        }

        public void pushdealerwinsGUI()
        {

            // push the dialog to the canvas
            GUICanvas.Instance.PushDialogControl(dealerwinsGUI, 0);
        }
        public void hidedealerwinsGUI()
        {
            // pop a dialog fromthe canvas
            GUICanvas.Instance.PopDialogControl(dealerwinsGUI);
        }

and the error says

The name 'dealerwinsGUI' does not exist in the current context

this error shows up in the pushdealerwinsGUI and the hidedealerwinsGUI

so what happened?


UPDATE: so i figured out that if i put the push and hide lines into my original "createdealerwinsGUI()" then it doesnt show the error, so what i need help on is how to make the "dealerwinsGUI" global