XNA FuchsGUI Part I

___________________________________________________

1-Introduction to the GUI.
2-Hello control :D.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Disclaimer :

-Please before reading note that this gui is for PC only, with some changes it might become runnable at the XBOX360

-The tutorials are for the XNA4.0 version, it’s just a matter of default parameters ( which are not -AFAIK- permitted in .NET3 c# ) , if you’re still using XNA3.1 maybe it’s time to move on :).

-This post doesn’t contain the FuchsGUI dll, please wait for the next post, but I really recommend reading this post if you’re willing to use my gui :).

Introduction:

An important thing any game or simulation needs is a good, reliable & simple graphical user interface (GUI), of course you can use System.Windows.Forms to create a gui for your XNA game but to me I prefer a gui from within the game, XNA code only :D, with this you can place the gui controls anywhere in the game window (I don’t know if it’s possible with Windows forms).

-ALRIGHT get to the the point already!!!
The point is that I’ve recently programmed a simple yet powerful gui library for both XNA3.1 and XNA4.0, The project started with XNA3.1 then was completed in XNA4.0

Here’s a teaser screenshot where I used my gui for an artillery simulation I programmed with two of my colleagues 😀

Please note that blurry text issue is now fixed, check the last part of the tutorial to download the fixed version

might not be that eye-catching cuz I created the textures in a hurry & using only mspaint

The beginning of the project started with my 2D game Space Defender, back then I created two controls classes : a Button class & a Label class.
I didn’t use delegates but rather used a pooling approach where the main game Update method asks each button whether it was clicked this frame or not.

But now I’m using delegates which made using the gui much easier!

What controls do you have?

At first my intention was to program classes for many many controls! with features similar to the controls  of System.Windows.Forms, but then I remembered :D! I need a gui for a game for god’s sake! why make it complex? so I only programmed the most common controls for a game\simulation which are:

-Button: Standered button that is animated on mouse hover\click.

-CircleButton: Just a button with a circular shape to demonstrate how building custom controls is easy (Although the current controls should be enough).

-Label: Basic label supports text wrapping.

-TextBox: Basic Textbox that supports some features like max length allowed for the textbox to contain, char set that contains allowed chars in this textbox… This TextBox doesn’t support multi lines (for now maybe), neither text selection, you can only type\delete chars at the end of the textbox (which is in my humble opinion enough for a game).

-CheckBox: a checkbox that you can check or uncheck 😉

-RadioButton: a radio button that you can radio or…just kidding haha :D, of course the difference between checkboxes and radio buttons is that within a single group only one of the radio buttons can be checked at a time.

-DomainLeftRight: Named after the System.Windows.Forms.DomainUpDown , this control works as a list of objects that you can view by clicking one of the arrows of this control to show the previous\next object in the list.

– PictureBox: A simple control that can display an image stretched, centered, or normal.

-Form: A little similar to the well know form, but you can say that FuchsGUI.Form is a hybrid control between a Form & a GroupBox, A form can contain controls & other forms as well, using forms makes working with gui much much easier, for instance instead of updating & drawing each control individually you can just add them to a form and then call the Update\Draw method of the form, then all children are updated\drawn.

Events supported by FuchsGUI controls:

Click : Most obvious event 😀 , triggered when the controls is clicked (after the mouse button is released).

Mouse Enter : Triggered when the mouse cursor enters the control.

Mouse Leave : Triggered when the mouse cursor leaves the control.

Mouse Move : Triggered when the mouse cursor moves over the control.

Mouse Down : Triggered when the left mouse button is down & the cursor is over the control (before releasing the button).

Change : Triggered when the text in the textbox is changed or when you select another object from the DomainLeftRight.

Toggle : Triggered when the CheckBox “Checked” property is changed either by clicking on the control or from within the code, for the RadioButton it’s triggered when the radio button becomes checked.

Close : Triggered when the form is closed using myForm.Close() where myForm is the name of a FuchsGUI.Form object.

Note : The names of these events are something like “onSomeEvent” eg: onClick, onMouseMove, onChange and so on..

Controls I’m willing to add in the next release are  : ProgressBar, ScrollBar but it’s too early to talk about that :D.
Sorry if there’s no coding in the post but it’s necessary to know the above…The next post will contain the dll and some code samples :D…