GUI means 'Graphical User Interface' so we're basically talking about menus and in-game HUD (heads up display). Let's start with something simple, plain text. To use the GUI, we need to add a special camera, and add it to the system:
SDE.Graphic.Gui.Text text = gMan.CreateGuiText("Impact",false,false,new Vector2(7,15));
text.Value = "SDE Rules!";
text.Position = new Vector2(gMan.Core.ScreenSize.X/2,20);
SDE.Graphic.Gui.Camera guiCam = gMan.CreateGuiCamera();
// We set a higher ID so it's render after 'cam'
guiCam.Id = 1;
gMan.AddCamera(guiCam);
guiCam.AddToScene(text);
Position (0,0) means the top-left of the screen and (width,height) is the lower-right corner. Of course I'm using pixels as the measure unit. What you move is the center of the GUI element just like every other node, so to center the text on the screen, just set the position to (width/2,height/2) and you're set.
It wasn't too hard, was it? Of course there are more elements than text: buttons, editboxes, comboboxes (sort of) and progressbars. Let's create one of each:
SDE.Graphic.Gui.Button button = gMan.CreateGuiButton(
text.Clone(),Color.Orange,Color.DarkGreen,Color.Gray);
button.Position = new Vector2(100,100);
button.Text = "Click me";
guiCam.AddToScene(button);
SDE.Graphic.Gui.EditBox editBox = gMan.CreateGuiEditBox(
text.Clone(),Color.Orange,Color.Gray,Color.DarkGreen);
editBox.Text = "Edit me!";
editBox.Position = new Vector2(300,100);
guiCam.AddToScene(editBox);
string[] values = new string[]{"value1","value2","value3"};
SDE.Graphic.Gui.ComboBox comboBox = gMan.CreateGuiComboBox(
text.Clone(),Color.Orange,Color.Gray,Color.DarkGreen,values);
comboBox.Position = new Vector2(100,300);
guiCam.AddToScene(comboBox);
// I've declared "SDE.Graphic.Gui.ProgressBar progressBar" as a class member
progressBar = gMan.CreateGuiProgressBar(Color.Red,Color.Green,Color.Black);
progressBar.Position = new Vector2(300,300);
guiCam.AddToScene(progressBar);
As you can see, some elements need a text element, for example the button. But we can't use the first text we did, so we use the Clone method to create another text element that is the same than the original text. Ok, now we've got nice GUI elements but, how do we listen to events? Just like standard C# events:
button.ActionPerformed += new SDE.Graphic.Gui.ActionPerformed(button_ActionPerformed);
...
private void button_ActionPerformed()
{
progressBar.Progress = progressBar.Progress + 5;
}
Each component has its own events, take a look at the documentation and use the event you need. I will probably change a bit the GUI managing, so I guess the creation system will be a bit different, but the components surely will be the same. Be aware!
But, how do we control the mouse? I mean, where is the cursor? SDE uses DirectInput to catch the mouse input, so it uses different coordinates. We have to create a cursor image and move it acording to mouse position. This way:
SDE.Graphic.Gui.Image cursor = gMan.CreateGuiImage(gMan.Core.GetTexture("../../../Bin/Media/cursor.png"));
cursor.Size = new Vector2(32,32);
cursor.Depth = -10;
guiCam.AddToScene(cursor);
cursor.Alpha = true;
SDE.Util.Controller.CursorController cursorController;
cursorController = SDE.Engine.Instance.CreateCursorController(cursor);
cursorController.Hotspot = new Vector2(8,2);
SDE.Engine.Instance.AddController(cursorController);
Minimalistic Gui